Hi, This is a introductory article of Progressive Web Application .In this article we will go through the basic concepts of PWA which are as follows:
- What is Progressive Web Application ?
- Why we need Progressive Web Application ?
- What is difference between Native Application and Progressive Web Application ?
- What are the technical components of Progressive Web Application ?
- Discussing how to create PWA along with whole code walk through
- What is Progressive Web Application ?
In the last few years there was been exponential growth in the number of mobile phone users. Today more than 60% of total internet usage is happening via mobile phone.Obviously ,the reason include portability, cheap hardware, easy access to the internet or increased number of service on the internet,with more users on mobile, the optimization of user experience on the phone is essential.
If companies have a dedicated native web application,there is a possibility that many users will prefer there web version to avoid downloading and installing to handle a memory constraint for any other personal preference.This type of native web applications are known as Progressive Web Application.
2. Why we need Progressive Web Application ?
- Reliable :
The application should be lightning fast when loading ,it should be close to instantaneous , should also open when there is no internet or fairly low speed internet like 2G , Google found that 53% of the user abandon the website if the page took longer than 3 second to load.
2. Fast :
The scrolling of page should be smooth, when the user is interacting with the web application.
The application should fit in all the different size of devices .
If we want to make web application closer to native application, they have to be install or should reside in the home screen.
5. SplashScreen :
Progressive Web Application adds a splash screen during the startup of the application,this make the PWA feel more like a native application.
3. What is difference between Native Application and Progressive Web Application ?
Let’s start with Native Application features:
- Made with framework or device specific SDK’s.
- Published & then downloaded from the app store.
- Can be installed on the mobile home screen.
- Runs on the device itself with access to device features.
- Can be used offline.
- Can use application push notification.
Now let’s see the Progressive Web Application features:
- Accessible via a web address but not from the application store.
- Can be installed on the mobile home screen.
- Runs in the browser but with access to device features.
- Can be used offline.
- Can use web push notifications.
4. What are the technical components of Progressive Web Application ?
PWA has some important technical components which work together and energizes the regular web app. The following components are required to develop a good PWA.
- Service Worker.
Let’s discuss each one of those briefly.
- Service Worker:
Service Worker Life Cycle:
When we create a service worker it goes through a custom Life Cycle ,this is really important concept to grasp:
If we reload the page the service worker goes through exactly the same lifecycle ,when we refresh the page service worker is still registered because that happens inside app.js. But in change it will reinstall it or it stop a server and remain in waiting to be activated meanwhile the old service worker is gonna continue to be activated by default.
A new service Worker is only gonna activate if all the instance of the our application is closed.
The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme.
If the manifest file is present, the Chrome browser will automatically trigger the web app install banner, and if the user agrees, this adds the icon to the home screen and the PWA is installed.We will discuss about it later when we will be creating our Progressive Web Application.
Service workers have the ability to intercept the network requests and can modify the responses. Service workers perform all the actions on the client side. Hence, PWA requires secure protocol HTTPS.
The service worker has the ability to receive push notifications and background sync, which definitely increases the user experience and keeps the customer engaged. Push notification and background sync are optional, but are recommended to provide a more native-like experience.
4. Discussing how to create PWA along with whole code walk through
Now it’s enough theoretical stuffs done let’s start coding..
So the application which we are going to build is a food restaurant application where we can add food in our menu ,it also having contact us page and about page of the restaurant. We will build that application, we will apply PWA on it ,we will implement add to home screen ,will run the application offline and will also run audit test on our application.
So first let’s see the folder structure of our code base:
In Index.html we have added a title ,added several link for material icon , style.css , material.min.js , manifest.json. For materialize css visit the website click on get started ,cdn are available there ,and download the folder under materialize ,that folder will have the materialize.min.js and materialize.min.css file copy those and paste it into your codebase. After that we create our top navigation then we create our side nav that opens when we click on the menu icon of our top navigator which is having several options like Home, About and Contact . After that we have designed our body part having plus button if we click on it ,it opens a form having two fields Recipe Title and Ingredients on submitting the form the recipe gets added to our food menu list . After that our code is having cdn that we have to get from firebase firestore to store the data for our backend to get the cdn we have to go to firestore website, then we have to login ,create a project,after creating project screen like this will appear:
After clicking on the project your project dashboard will appear :
After that in order to store the data we have to create a database for that click on Cloud Firestore and create a database on test category or mode after that a screen like this will appear:
After that click on start collection button :
In my case I have created a recipes collection having two fields title having type string and value soup and ingredients having type string and value tomato, After that click on Save button.
Thus we have created the database that will store our data and in order to use this firestore in our application we have to added the cdn provide by firestore in our codebase. For that cdn click on home button ,after that click to setting icon then we will see a screen like this:
Now if we scroll down ,we will see a cdn tab click on it we will get a code copy it and will place that inside our code base ,we have to modify little bit in that code after the firebase link :
and add this line before the script tag ends:
const db = firebase.firestore();
Thus our backend is ready and firestore is connected with our application.Now let’s see the manifest file(manifest.json):
In manifest.json we have created an object having all the information about the application thus name : ‘Gweta FoodCorner’ it’s the name of the application, short_name means the name that will appear below the icon of the application ,start_url means the first page which will be displayed,display : ‘standalone’ means the application will not show the address bar which will make it look like a native app, background_color and theme_color determines the background color and theme color of the splash screen of our application, orientation : ‘portrait-primary’ means our application will open in a portrait mode, icons is a array of object having the several properties of icon of our application.Now let’s see our service worker file which is sw.js:
In db.js we are actually doing three things persisting out data so that offline data is enabled ,creating real time listener means if our application is offline the ui will be updated according to the changes made from frontend but the database modification in firestore or backend will happen when the application will be online, and another thing is adding new recipe in our menu list.db.enablePersistence actually helps in persisting our data for offline mode .Whenever some changes occurs in the database from frontend even if the application is offline it reflect those changes in Ui using onSnapshot method ,this onSnapshot returns a object ,this object has method docChanges () which has all properties of the changes happened from frontend to the database, we check if that change type is added we are calling a render method (renderRecipe)where we are sending the changed data and changed document id, renderRecipe is defined in ui.js. Actually service worker used IndexedDb for storing the data offline ,when the application is offline all the changed gets reflected in the indexedDb and when the application runs online the changes gets reflected in the actual backend.
Last thing in db.js is adding new recipe we are having a form having class name ‘form’ we are getting value from that form title and form ingredients fields and storing it on recipe object in a key value pair and finally add recipe to the recipes collection .Now lets see the ui.js file:
Ui.js is having mainly materialize syntax which we are not going to discuss much. we have defined renderRecipe here we are taking added recipe title and ingredients and rendering in the frontend and finally appending it inside the div having ‘recipes’ as class Name.Last thing which is remaining now is the pages folder those are self explainetory we can just go through them,those are just normal html:
So our Progressive Web Application is now ready.
Let’s run the live server and see the output:
If we open the google develop tool and check the console we will see two console.log first caching shell assets and service worker registered.
Let’s see our About page :
Let’s see our contact us page:
Let’s see our side navigation bar:
We can also add menu on list on clicking on the add button:
Now if we go to application in google developer tool inside service worker we will see status of the server worker is running:
If we now check the Manifest file we will see all the details we have added to our manifest file include the icon available there:
Now let test the application offline if we check the offline checkbox and refresh our website still renders.
Let’s check the about page offline:
Let’s check the contact us page offline:
Let’s try to add new recipes offline:
Let’s now run audit test for running test we have to go audit tab in google developer tool run test and here is our PWA Report :
Now let’s see what is cached in our static Cache by our service worker in our application:
Now let’s see what is cached in our dynamic Cache by our service worker in our application:
Now there is only one thing remaining to observe that is Add to Home Screen .If your application is running you will see a add button on the right of your address bar , you just click it and add your web application in your homework. Now to test whether the application is added to the home screen or not , if we share our application on windows search engine :
Hurry! We got our Gweta Food Corner application into our system , this is really cool .
Ohh! It’s really a long article .There are many other ways of building Progressive Web Application, I think this article will be helpful to whom who wants to get some kick start on building Progressive Web Application .I am leaving my github link down below for the code base of the application.
It's an implementation of building Progressive Web Application using Service Worker . GitHub is home to over 50 million…
One last thing I want to say to everyone that stay safe, stay at home .We can win the fight against Corona Virus together , always be thankful to the peoples out there fighting for us for our safety, the doctors,the nurses, airport staffs, municipal cleaning staffs everyone .And lastly we should never forget the very root of our existence which is our Nature,our Mother Earth .
HAPPY CODING :)