How to develop & launch a Progressive Web App with Flutter?

Jan 06, 2020

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.