PWA Support on Desktop and Mobile Using Flutter apps

In this article you will learn. How to setup the flutter apps as PWA for both Desktop and Mobile using flutter. Before Moving into the setup let’s learn about what is PWA? in a brief.

Progressive web apps is combination of application and web. It is intended to work on all the platform that uses the a standards-compliant browser, including both desktop and mobile devices. PWA look as standalone application but works on browser.

If you think about the native application and progressive web apps in terms of the capabilities and performance, Native applications are the best capabilities, whereas web apps represent the best of reach.

A lot of companies are on progressive web apps to modernize there website and reach the user expectation. How?

There are some interesting facts user will be not satisfied with native application.

When it’s come to the above facts PWA reach the user expectations. When user installs the PWA from website, whereas an installed PWA usually takes less than 1MB. According to those observations, we found out that users prefer experiences that are fast, installable, reliable, and engaging.

There are many ways to develop PWA but Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX. Here you can deploy your flutter app on multiple platforms like Android, iOS, web.

Setp1:

Before moving to creation of new flutter project make sure to run the below command. To get PWA support for flutter apps, you have to be on stable channel.

Confirm the chrome installation by running the below command. It will shown up the connected devices.

Step2:

Create the flutter project with CLI run the below commands.

Run the below command to enable the web support for flutter apps.

To serve your app from localhost in Chrome, enter the following from the top of the package:

The above command launches your flutter app on web. Once the app launches. web support is successful.

Step3:

This is the step where you do the exact PWA process in flutter. Here you will get one interesting fact, you need not do any changes in the code of flutter to make PWA. When you enable the web configuration in flutter apps it will already add the service workers to the app for run as PWA.

After that You need to run the command in your terminal to create a build folder, which is necessary to host your app on the web.

The above command will build the application and creates a directory called web inside the build folder. This will be the root folder for our project. Now we can make the necessary configuration changes in the manifest. Images, icons, themes can be changed as per required in the manifest file found in the web folder. After the above process, make sure that you are ready to deploy your application as PWA.

Step4: Deploy the app on Surge for test

Surge is a static web publishing tool. It is widely used among Front-End Developers. Using surge is the best way for front end developers to publish static web applications into production. We can use surge to publish our PWA.

REQUIREMENTS:

The above command installs surge globally on your system. Then after the installation move to web directory inside the build folder to deploy the web.

Run the below command inside the web directory to deploy your web on surge server.

This will give us a live link deployed on surge. The link will be denoted as domain and will have a file extension .sh. Open this file in your browser to view the application.

To remove an app from surge, run surge teardown followed by the URL name.

If this article helped you a bit, found interesting and learnt new thing please clap!👏

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

Related posts:

Ogni volta che finisco di leggere Ted Chiang ho bisogno di calmare i nervi; nella mia testa si accavallano paragoni forti, forse troppo forti, e non c’è nulla di più difficile che placare un lettore…