Progressive Web Application results from 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.

Have you ever thought of developing a web app that delivers a mobile app-like experience without needing users to download it from any app store? This is what exactly a Progressive Web App provides you with. Also known as PWA has quickly become a value-added advantage for brands to attract and grow user base. And when the number of users increases, companies get more chances to improve their conversion rates. 

The other reason behind PWA development popularity is Convenience. When visitors visit your website, and if you have a PWA, they can simply add it to their mobile device screen with one click. It’s that simple. Therefore, from Amazon, Twitter, Airbnb, and Uber to Starbuck, brands from diverse industries with millions of users have their PWA. 

What is PWA?

Progressive Web App operates the same as any mobile application but runs on the device’s standard browser. 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.

Many technologies are available to develop a PWA, but for the superior and optimal experience, it recommends opting 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 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 the web app on your mobile device)

Requirement: System(mac or windows ) are connected to 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 the 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

Steps to build PWA with Flutter

5. Build Project

flutter build web

It will create s folder named “ web ” in the build directory please see the image below

Develop a Progressive Web App

Please look into the web folder you will find the following files

Please note this files are auto-generated and generated each and whenever we build the project for the web so, please copy this file so we can have backup

Progressive Web Application

6. PWA CONFIGURATION

1). Generate manifest.json file

https://app-manifest.firebaseapp.com/ it will generate manifest and required icons

build your PWA with Flutter

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

build your PWA with Flutter

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/
Favicon & App Icon Generator

Copy all icons files, DO NOT COPY MANIFEST, and past all icons to the web folder

3). Edit index.html (from web folder )

Edit index.html

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 in 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 forget 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

I will take some time and give you the following output

Deploy a PWA Application

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
Deploy a PWA Application

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 the share button and click on Add to Home Screen

Why build your PWA with Flutter?

If you’re an online retailer, you know how important it is to keep your customers happy and coming back for more. That’s why it’s so important to offer a good experience for your customers. Accepting payments through PayPal is one way to make shopping simple on your online store. This helps you keep your customers happy, and it also enables you to save time and money.

The Flutter SDK, Skia Engine, and Dart programming language enable the creation of beautiful, high-functioning applications in a shorter amount of time than other tools. With Flutter, one can develop applications for the major platforms.

Flutter comes with the added advantage of web support as a PWA. With this, we can create a PWA of the mobile application that will run smoothly in the browser. All that is needed is to wrap it up and render it as a PWA. Besides, you reap the benefits below when you build your PWA with Flutter.

  1. Offline access – allows offline access to pages for the users
  2. Rapid loading time – it provides us with 3x time performance
  3. Mobile app Like feel – with the support of Flutter UI abilities and control
  4. No need for App store submission – users can add your PWA app from any website and run it on their browsers
  5. Single code base – you can use the same code of your cross-platform app to ship a PWA.

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 the ideal user experience that users can easily interact with PWA as same as they can with native applications.

It is a brainer for any Flutter developers to Deploy a PWA with Flutter after completing the entire development process. If you want to launch PWA for your business instantly, hire our Flutter App Development Company.

Hire Flutter developers with first-hand experience!