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.
In addition to true cross-platform ability, Flutter offers a golden opportunity to turn your website into a highly responsive app similar to mobile apps. That is convincing why every other CEO and CTO prefers to hire Flutter developers nowadays.
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 masterIt will take some time and then run the following
flutter doctor -vIt 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-webIt will enable web support
flutter devicesIt 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 hellocd helloIt 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 chromeIt 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
5. Build Project
flutter build webIt will create s folder named “ web ” in the build directory please see the image below
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
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
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
Copy all icons files, DO NOT COPY MANIFEST, and 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 in production.
Requirements:
- First, ensure you have the latest version of Node.js
- 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 surgeThis 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
SurgeI 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 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.
- Offline access – allows offline access to pages for the users
- Rapid loading time – it provides us with 3x time performance
- Mobile app Like feel – with the support of Flutter UI abilities and control
- No need for App store submission – users can add your PWA app from any website and run it on their browsers
- 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.
Contact Information