In this article, we will learn how progressive web app is special and what makes it crucial when it comes to making an effect on business and how to build it In Flutter. Before learning PWA and their — pros and cons. Let us have an outlook about the — Progressive Web Apps (PWA)
What are Progressive Web Apps
Progressive Web Apps are like having qualities of web and app at the same time, web and app have their own and different capabilities, for example, we see for web, it is a mix of ubiquity across all the devices and operating systems and important fact is its user-centered security model, specification and implementation is not controlled by any specific company or organization which makes it special, Web applications can reach anyone, anywhere, on any device with a single codebase.
While Native applications are known for being rich and reliable they have their own standalone experience, Native application feels like a part of the device they are run on as you can read and write files from the local system and also with data stored on the device like contacts, calendar. Easily access hardware connected via USB, Serial, or Bluetooth. So will have awesome user experience if you compare with the web.
If we look at both the platforms in different aspects such as capability and reach then native apps best in capability while web apps are best in the reach.
So where does the Progressive web app exists?
Progressive Web Apps are designed, built, and enhanced with advance and modern APIs to deliver which consist of qualities of both native app and web apps, such as native-like capabilities, reliability, on any device with a single codebase, installability and reaching anyone, anywhere.
This was a go through sections of Pwa but let’s check how its market is growing
Facts :
As you know humans have a tendency to check a comparative study and numbers up and down to believe, so for information Companies which have launched Progressive Web Apps have seen some impressive results. For example, Tweeter registered a 65% increase in pages per session, 75% more Tweets, and a 20 % decrease in bounce rate, all while reducing the size of their app in by over 97 %. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their native desktop experience with a Progressive Web App and saw a 27% increase in return visits.
It was an introduction of Progressive Web APP now we are going to understand its basic implementation :
Why PWA?
You might be wondering the community going gaga over it, if we can hold all versions like android, ios, web separately then why we need it? so the reason behind it is if the user wants to use your without installing it and if users want to run a web version of it on mobile then PWA is the option that can give the full experience of APP. As you can observe various sites give an option on ads to open their app.
Developing PWA in Flutter
As there are many options to develop a Progressive Web App but the thing which makes Flutter well suited for this is its availability over all platforms. As we know Flutter is a cross-platform app development toolkit to develop an app, you can deploy your app on platforms like Android, iOS, web. which makes it stronger in terms of availability and reach with higher performance and responsiveness. The intention behind developing PWA is quite the same if you observe what flutter does. So it would be best to go with flutter if you want to develop your app with PWA.
Implementation
System Requirement :
- Flutter SDK
- Install Chrome
Implementation of Progressive Web Apps requires a web app to make it happen so first you need to set is up for web
Setup for Web
first, you need to run it on the master channel, for this, you need to run a command
flutter channel master
it may take some time then run the following commands :
flutter doctor -v
It will show some messages so you can check if you have required setup :
After this, you need to set up web support for the application by running the command
flutter config --enable-web
as if it is already available it will “true” on the terminal then you will find a web folder in your directory then the next step is to edit your index.html file you can edit it manually to step things but is it very easy to write it by command so first, delete your index.html file then run
flutter create .
Note : Please don’t forget to run it with that dot(.) either you will get some errors
You need to run the command in your terminal to create a build folder, which is necessary to host your app on the web.
flutter build web
Now you can run your app on the local server if you want to make changes in your web app like app icon, orientation, name, display, background-color then you can change it by editing manifest.json file in the web folder either manually or you can create manifest.json file by using
https://app-manifest.firebaseapp.com/ you can generate manifest.json then replace the previous file by new.
now you are done with this flutter setup, now you can host your app on the local server but if you want to host on other platforms like Surge or Firebase then there is a different process to implement it. so let’s understand it in following steps
Hosting the PWA APP on Server
Hosting of Web APP on different servers requires installing Node.js on your machine it provides all required things to host your file on the server.
lets first install it on the machine, here I am installing it on ubuntu so open your terminal and run the command
sudo apt install nodejs
It will start working, once it installed you can verify it by checking the installed version by this command
node -v or node –version
you will find this if installed properly (version could be different)
Note: It is recommended to install the Node Package Manager with Node.js on the machine as it provides different packages, run the command to install it.
sudo apt install npm
and you check it by running the command.
npm -v or npm –version
For installing the web on server Node.js and NPM may require the latest version so you can update it. You can visit this Website to do so.
so now you have the latest versions of Node.js and npm now I will host my app on firebase (you can also host on Suge by installing it on your machine).
For firebase hosting first, you need to create a project on Firebase here you need to select hosting.
then you need to start and follow the instruction as it says. You need to install firebase tools in your machine by running the command
npm install -g firebase-tools
it may take some time but once it installed you are ready to use now you need to log in firebase by running
firebase login
but wait you may found some error of firebase or npm so if you get please sort it by upgrading your firebase tool or refreshing npm,
Firebase Upgradation: You may run command to install firebase version according to the error you found by running the command(@7.6.1 is the version of firebase tool)
npm install -g firebase-tools@7.6.1
or
npm i firebase-tools@7.6.1
you can also go through this Firebase CLI documentation for any firebase related query or problem
NPM Upgradation
If you run firebase login in your terminal and get error command not found you need to refresh your npm
For NPM Related problem you can go with Documentation and you need to run only given commands and sort this problem out.
now you again you need to run the command firebase login and if you are not logged in it will take you to the screen where you need to verify your firebase account and if you are already logged in you will get this.
now run command
firebase init
here you will find a window where you need to select which action you are going to perform, here we are going to host it so we would select it
then we get an option to select which folder you want to set as a public directory so we would use web folder of build folder because we need to host this folder on the server, and then we select all override options As “NO” because we need not override it because we have already run it (so it is necessary to run at least once before doing this process)
now as it says initialization is completed so there then we can run the following command:
firebase deploy
hereafter running this command we have deployed our project on firebase and as you can see we have got a link which has been automatically created by it you can use this to see your deployment.
you can also see it by running the command
firebase open
As stated in the above image: To select what is needed to open we have selected Hosting: Deployed Site which then takes me to the site as can be seen underneath.
So this was a basic implementation showcasing Progressive web App.
Conclusion:
PWA is a business-friendly idea to provide the same user experience to the user of your app in all platforms and it could be quite difficult tasks if develop apps for all platforms separately hence the PWA is the solution of it. the best thing which comes as an outcome with PWA in terms of business is it boosts business in various aspects such as no of users, total reach, lesser size of the app and availability of app among users easily and it would be the icing on the cake if you go with Flutter to develop it because Flutter consists almost each and everything you want with PWA.
If this article has helped you a bit and found interesting please clap!👏
Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
