Isrg KB
The Best Way to Gain Knowledge

Easy and Simple Guide on Adding “Add to Home Screen” to support PWA

Easy tutorial to add "Add to Home Screen" Progressive Web App in HTML and WordPress based websites

After Accelerated Mobile Pages (AMP) Google announced Progressive Web Apps (PWA) that let the website owners to generate a signed APK and install on the users’ device within the fraction of seconds which has tons of possibilities to deploy-on.

In this tutorial we would be learning to create the Progressive Web Apps (PWA) to HTML based or WordPress based website.

Requirements:

  1. HTTPS enabled website
  2. manifest.json
  3. service-worker.js
  4. PNG icons etc

It should be noted that PWA is only supported with the HTTPS-secure website which means it won’t work with the websites that are still using the insecure HTTP protocol. If you are website is not having the HTTPS support you can either install the SSL or join the biggest free content delivery network (CDN), Cloudflare that has inbuilt HTTPS (SSL) support and that’s of free of cost.

We would be following 5 steps towards adding and integrating the PWA and “add to home screen” option to your website.

Step 1– Generating PNG icons 

Generate the PNG images of your logo in the 192×192, 256×256, and 512×512 pixel sizes. There are tons of websites that offers free generation of icons and favicons in different sizes. I’ll recommend favicomatic.com and of course you can always Google for the more possibilities.

Step 2– Creating manifest.json file

The manifest.json file is used to store the important information and the instructions used by the Chrome to generate the PWA.

Create an empty file named manifest.json in the root of your website and add the following code in it after making necessary changes.

Here is an example which you can change accordingly to make it yours:

Replace YOUR-GCM_ID with your Google Firebase Cloud Messaging ID and all other details as per your website.

Step 3– Creating service-worker.js

The service-worker.js is an important file that will handle various events and also it will show the “Add to home screen” pop up dialog, help in generating the webAPK for your websites by fetching the details from your manifest.json file.

Create an empty file named service-worker.js in the root of your website and copy paste the below code in it:

Deploying on custom or HTML based website

In order to deploy the “Add to home screen” support and create PWA for your website, add the below code just before </head> tag:

Add the below code just before </body> tag ends:

Adding PWA support to WordPress

There are two possible ways to add PWA support and “Add to home screen” button on your website:

  1. Using Plugin.
  2. Adding above code that we just learnt.

You can use Super Progressive Web Apps WordPress plugin to add the PWA support on your WordPress or simply add the above codes manually.

Adding PWA and “Add to home screen” feature to WordPress without Plugin

I’m assuming that you’ve already created the manifest.json and service-worker.js in the root of your website and added the above suggested code after making changes as per your domain. If you’ve created these files, the only step left is adding the required HTML and JavaScript tags in your current template.

Open the current theme folder and in functions.php add the following code:

Do not add the below code in functions.php if OneSignal plugin is installed, instead login into your WordPress admin dashboard choose OneSignal Push> Configuration> Custom manifest.json URL and change the URL to your manifest.json which you have created in the root of your domain.

Troubleshooting

Even after adding the codes manually is “add to home screen” pop-up dialog is not appearing? Well, you can try following steps to resolve it:

  1. Clear the cache of your website if you are using Caching Plugins and also of your web browser.
  2. Ensure that manifest.json in <head> and above JavaScript tag are begin added.
  3. Cross check the URLs in the manifest.json, service-worker.js, head and footer.
  4. Debug using the Google Chrome.