Future of WEB APP (Progressive Web Application) Part 1
In the last few years Smart Phone User are Increasing and all the web apps become native apps. Native Apps playing massive role in our daily life. But the problem is when business already have web driven application and need to attract more customers from publishing Native app for mobile it takes some time to develop entire business logic to convert to (Java,Kotlin,React Native etc.) Native app languages . Native Apps are quite expensive rather than web app.
Luckily There is a Solution
This option Combines Look and Feel like native apps with technology use for web: progressive web app also known as PWA.
What is PWA ?
This Kind of apps built from the web technologies like HTML, CSS , JavaScript . Easily we can turn any website in to PWA with minimum effort. plus can do all native app features like push notifications,offline support etc.
How to identify PWA websites ?
Now a day Google play Store and Apple App Store allows to publish pwa apps on their stores .and when we use web browser yo will notify when you visit the site and popup comes out “ Add to Home Screen” when you add it .It added to the home screen and gives you native app experience .
Or you can add manually browser has in build option add to home screen
If you want more about PWA please reffer this link .
Lets Get Start
What are the main thing you need to Setup a valid PWA
- Secure Connection (HTTPS)
- Service Worker (sw.js) : it is script that control network requests for PWA
- manifest file (manifest.json) this json file determin how your PWA should appear and function such as colors ,icon , name description.
First when you have sample website go to that directory or download basic website
There are two main steps to turning a plain web app in to PWA . adding Mainfest and ServiceWorker.
Step 1
Lets add mainfest.json to root of our website
Save the file and move in to our index.html before the </head> insert following link
This will load manifest.json and detect browser website as an application
NOTE : you have to go to site through localhost other wise you can not see manifest in my case i use “python SimpleHTTPServer”
Go to your website from browser and open DevTool (in Chrome Ctrl+Shif+i) under the Application Tab you will see manifest section
Step 2
Registering a ServiceWorker
Service worker is a js that support for cache resourses when the ntwork is offline.
In the root directroy of application crate file name “sw.js” and “app.js” leave it empty for now.
open up app.js and add below event listner to register our ServiceWorker
Tip: It’s good practice to delay this kind of execution after the initial page load.
Open your sw.js and put the below script
after that reload browser and open cache storage section on Devtool to verify that all worked as expected.
check your browser address bar you will see a icon install it mean we are good to go in the next part we will see how show a prompt to web site to add to a Home Screen.
If you found a better solution then we can help each other out by sharing as many reference we can .
Happy Coding ! ❤