Turn web app into progressive web app
Posted By : Satendra Shakya | 29-Nov-2018
In today's Article I will show you how to turn your web application into the progressive web app. Before going to process let's understand what are progressive web apps?
Progressive Web Apps
Progressive Web Apps (know as PWAs) are an exciting innovation in web technology. It comprises a mixture of technologies that makes a web app function as a native mobile app.
1. Add the Modern Head Tags
For creating a progressive app we first need to add Modern Head Tags in our application what's called a Web App Manifest. It describes meta information about a site, such as how it might look when user added it to home screen.
So..add the following tags in header tag of your application's index.html.
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
</head>
Viewport – The First line consist meta tag which specifies the viewport. This helps in your web site responsiveness.
Manifest – In the second line referencing a file i.e. manifest.json file – It helps to control how the site gets added to the home screens.
2. Create manifest.json file
Once done, we have added Modern Head tags. Now it's time to write a manifest.json file so open a text editor and copy the following sample of manifest.json file and paste it into your file and modify it according to your site. Further, we will discuss about the manifest.json file in detail...
{
"name": "The Most Awesome Sample Site",
"short_name": "Sample",
"description": "A sort description",
"display": "minimal-ui",
"start_url": "/",
"theme_color": "#673ab6",
"background_color": "#111111",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
The main manifest properties are:
name: name of the application used to show on application's splash screen.
short_name: A short name is used where the space is insufficient for name.
description: a long description of the application
display: the preferred view can be
— fullscreen (no chrome),
standalone (looks like a native app),
minimal-ui (a small set of UI controls)
browser (a conventional browser tab)
theme_color: define the theme color of the application.
start_url: the start url of the application.
background_color: it's used for splash screens and browser chrome.
icons: an array of image objects defining the src URL, sizes and type used to show on splash screen and app icon.
2. Service Worker
We have added maniest in our site. Now we need something that will do caching of the contents in our application, offline support and trigger push notification service. so here comes Service worker. It's a background script that can run even while the user isn't on your page, provides offline support and trigger notification.
So Let's create a empty service worker...
2.1 Add a Service Worker
Let's copy the following code into a new file-
/** An empty service worker! */
self.addEventListener('fetch', function(event) {
/** An empty fetch handler! */
});
Now Save this file as sw.js.
Now we have created our service worker but we need to register it with our site. so let's move to further step...
2.2 Register the Service Worker
Now copy the below code and paste it to your site.js file. that's it.
navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) {
console.log('Excellent, registered with scope: ', registration.scope);
});
This code will execute on every page load. NOw open your site If the Service Worker is already registered, your browser will ignore the request and otherwise it will prompt to register service worker. We can check chrome://serviceworker-internals/ to ensure that it's actually loaded for the site.
when we open our site in mobile web browser it will prompt to user to add to home screen. just like showing in the below image.
Reference: https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/index.html
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Satendra Shakya
An experienced mean stack developer having work experience in nodeJs, Angular and MongoDB. Apart from these he likes to play chess and solving riddles like Rubik cubes.