Listen to the blog audio here! 
Progressive Web Application is a result of new technologies that deliver services like mobile applications through web browsers. The PWA serves the same native user experience as an installed mobile app provides.
What is PWA?
Progressive Web App operates the same as any mobile application does, but it runs on the standard browser of the device. Once you have added the PWA to your device from the website, the PWA will run on the same browser wherein you had opened the website.
There are many technologies available to develop a PWA, but for the prominent and optimal experience, it recommends to opt for Flutter to develop Progressive Web Application.
So, how would you start to build PWA with Flutter?
Let’s get you on the ride to develop and deploy a PWA with Flutter chronically.
System Requirements
Install the Flutter SDK on your platform.
Install Chrome. Currently, debugging a web app requires the Chrome browser.
Steps to build PWA with Flutter
1. Setup flutter for web
flutter channel master
It will take some time and then run the following
flutter doctor -v
It will download the latest dart SDK so, it will be required a long time
Expected output:-
[√] Flutter (Channel master, v1.13.1-pre.59, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
• Flutter version 1.13.1-pre.59 at C:\flutter
• Framework revision e58dc16d7b (11 days ago), 2019-12-06 18:21:52 -0800
• Engine revision e7b69ced2e
• Dart version 2.7.0 (build 2.7.0-dev.2.1 a9c77229c2)
flutter config --enable-web
It will enable web support
flutter devices
It will give as the following output
Chrome • chrome • web-javascript • Google Chrome 79.0.3945.79
Web Server • web-server • web-javascript • Flutter Tools
2. Create New Project
flutter create hello
cd hello
It will create a new app hello.
Add web support to an existing app
flutter create .
“ . ” is important because it will give support to the existing app.
3. Run-on web
flutter run -d chrome
It will run our app on chrome on localhost
4. Run-on IP (if you want to check web app into your mobile device )
Requirement: System(mac or windows ) are connected on the same wifi network
On windows
flutter run -d chrome --web-hostname=192.168.43.59 --web-port=80
192.168.43.59 IP of the windows
It will run our app on chrome with given IP and enter this IP on a mobile browser
On Mac
flutter run -d chrome --web-hostname=192.168.1.79
192.168.1.79 IP of the mac
5. Build Project
flutter build web
It will create s folder named “ web ” in the build directory please see image below
Please look into web folder you will find following files
Please note this files are auto-generated and generate each and every time when we build the project for web so, please copy this file so we can have backup
6. PWA CONFIGURATION
1. Generate manifest.json file
https://app-manifest.firebaseapp.com/ it will generate manifest and required icons
Display Mode will be Standalone and Orientation will be Portrait for more info
https://developers.google.com/web/fundamentals/web-app-manifest
It will generate the following files
Copy images folder and manifest file and put in the web folder
2. Favicon & App Icon Generator
These steps are required for generating the home icons while adding to the home and favicon is required for the web address bar
https://www.favicon-generator.org/
Copy all icons file, DO NOT COPY MANIFEST, past all icons to the web folder
3. Edit index.html (from web folder )
Open index.html and add above lines in <head> below <title> tag amd remove “ / ” from href
SO index.html file will look like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kore</title>
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Now our PWA code is ready. let’s create a live link and test it
7. Deploy a PWA Application with Surge.
Surge is a static web publishing tool for Front-End Developers. It is the best way for developers to publish static web applications into production.
Requirements:
1. First, ensure you have the latest version of Node.js
2. Then, install Surge using npm by running the following command:
npm i -g surge
If you are on mac don't forgot to add sudo
sudo npm i -g surge
This command will install surge globally on your system, and hence you can use it everywhere.
Run this command to get a live link and deploy on surge
Surge
Will take some time and give you the following output
Now open “ teeny-tiny-drawer.surge.sh ”Url into the web & hurreeeee its working.
If you want to remove your project from Surge
surge teardown teeny-tiny-drawer.surge.sh
8. Check App as PWA in android and iOS
On Android’s Chrome browser go to settings and click on Add to Home Screen
On iOS’s Safari browser click on share button and click on Add to Home Screen
Conclusion:
Thus, with just a few steps, you can develop and deploy your Progressive Web Application with Flutter. Flutter is the perfect technology to develop PWA as it renders perfect user experience that users can easily interact with PWA as same as they can with native applications. Moreover, it is easy for flutter developers too to Deploy a PWA with Flutter after completing the entire development process.
If you want to get your PWA developed without any hassle,get in touch with us today!
Sagar Bagsariya
Principle Mobile App Developer
by Sanjay kidecha
by Manav Patel
by Mihir Mistry
by Drashti Pandya
