How to implement Progressive Web App in your website

Want to give your website an application look? Thinking if it is possible ? Yes it is, as technology is developing day by day people thing along with a website they need a application.

To get that resolved we have a solution i.e implementing Progressive web app in your website, Which allows users to install your website as an app and use it whenever needed.

This Blog is Authored By Tanya Gupta

WHAT IS PROGRESSIVE WEB APP ? 

Progressive web app is a type of application software which are built and developed with modern API’s to deliver improved reliability and easy to install feature.

These are built with common web technologies including HTML, CSS & JavaScript, It is compatible to work on any platform including desktop and mobile.In short it is called as PWA.

WHAT CAN PROGRESSIVE WEB APP DO?

Progressive web applications are normal web applications or web pages which are designed and developed to give native mobile application like look and feel.

To give use a native app like look, PWA uses web browsers and advance strategies.

ADVANTAGES AND DIS-ADVANTAGES OF PWA

ADVANTAGES
  • Easy Install
    • It is easy to install. Unlike other applications you need not  to go to Play store or app store to install it
    • With a single click you can install it in Your desktop,Android and IOS Application.
  • Easy to build
    • You can easily build PWAs using common web technologies like HTML,CSS & Javascript.
  • Cheaper
    • They are often Cheaper to build.
  • Minimum Code
    • A very few lines of code is written to integrate and manage.
  • PWAs are responsive and works with many different screen sizes.
  • These are smooth, faster and lightweight.
  • They work offline, Unlike your regular sites.
DISADVANTAGES
  • Compatibility with IOS
    • The latest versions of IOS are compatible to run IOS on their devives, But Older versions which are less than 11.3  are not compatible and dosen’t work.
    • Apple doesn’t allow PWAs access important features which includes Touch ID, Face ID, Bluetooth, altimeter sensor, and even battery information.
  • Issues with outdated devices
    • As PWAs came ito existence just a few years back, It should not a surprise that Outdated devices or older devices don’t support well.
    • Hope in future they may work
  • Not capable of doing everything 
    • Like regular mobile applications, PWAs are not capable of doing every thing that android applications do.
    • Because as they are written in JavaScript, they are not as good as apps written in native languages, such as Kotlin or Swift.
    • Their performance is also not as good as the performance of native apps

Now let’s see how to implement progressive web app in your website and install it in android.

NOTE* This code only allows installing of your website in Android devices, so It won’t work for IOS or desktop applications.

HOW TO IMPLEMENT PROGRESSIVE WEB APP ?

STEP 1 : 

  • Create a file with name manifest.json and copy and paste the below code.
  • Change the required details according to you.
    • Name : Your website name
    • Short Name : Name to show with icon.
    • Description : Your website description.
    • Scope & Start URL* : Your website’s main URL. (Important)
    • Background color 
    • Theme Color : Your websites theme color.
    • Icon->src : Icon to show after installing app.
{
    "name": "Vbloggers",
    "short_name": "Vbloggers",
    "description": "Vbloggers For you, For Me, For All.",
    "scope": "https://www.vbloggers.in/",
    "start_url": "https://www.vbloggers.in/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color":"#fff",
    "theme_color": "#c80000",
	"icons": [
	    {
	      "src": "https://www.vbloggers.in/wp-content/uploads/2021/07/cropped-lage-icon.png",
	      "sizes": "512x512",
	      "type": "image/png",
          "purpose": "any maskable"
	    }
	]
}

STEP 2 : 

  • Create a another file with name sw.js and copy and paste the below code.
  • Change index.php to your home index page.
  • Sometimes changing the file name to other may not be visible in your website due to cache, Like changing index.php to index.html and saving file, but when you open that URL the file name may not change to index.html rather shows index.php event it exists in your core file.
  • This is due to cache, In that case change the file name and try again, It works. 
self.addEventListener('install', function(event) {
    event.waitUntil(caches.open('sw-cache').then(function(cache) {
        return cache.add('index.php');
    }));
});
self.addEventListener('fetch', function(event) {
    event.respondwith
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
});

STEP 3 : 

  • Upload both manifest.json and sw.js to your root folder
  • Now link the manifest.json file  and copy the below script.
  • Inside navigator.serviceWorker.register include your sw.js file name, If you have another file name then change to it.
<meta name="theme-color" content="#c80000">
<link rel="manifest" href="manifest.json">
<script>
	if('serviceWorker' in navigator){
		navigator.serviceWorker.register('sw.js');
	};
</script>
  •  That’s it now save your header and run the website in your android device. and click on the bottom link which says add Vbloggers to home page.
  • Click on that link then a pop up opens and says install, Click on install, and your web app is installed 
  • To check it go to your apps list and search for your app and open it, You can see a feel and look of android application.

PWA Install Process

The same process was implemented on our website i.e Vbloggers To check that open vbloggers.in and click on the link below, install and check it out.

Lets see the difference between browser and PWA application.

implement Progressive Web App

With this you will also get an option install app from the 3 dots in your browse on mobile.You can install from there too.

Hope this article will be useful for those who have websites, Do share with your friends and colleagues whom might be useful.

Related articles:

For more updates:

Follow us on our Facebook page :
Facebook

Do Follow my Instagram page for more updates :
Instagram

Join Our Telegram group for more updates :

Telegram

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.