Home Discover Mobile E Sports Technology Business Viral Gadgets Movies Events


How To Make Progressive Web App (PWA) For Blogger [Part - 2]

PWA for Blogger. Progressive web app maker. How to make progressive web app for blogger like Twitter.
PWA for Blogger
PWA Like Twitter for Blogger

In previous article on PWA, we have shared about pwa for blogger implementation. Today I am going to share with you How To Create PWA like Twitter. If you don't know about pwa, then for simple language - pwa is a Web App, who's allow users to keep your website in their mobile homescreen like a app. 

How to make pwa for blogger like Twitter?

First read previous article (pwa part 1) and implement the Service worker.js, offline.html. 

PWA Part 1

The main work is in the manifest.json file, to make a pwa like Twitter. If you have already manifest file for your website then you can simply replace this manifest with your old manifest file. 

Features

  1. Direct install button, no coding required. 
  2. App screenshots available like play store.
  3. App shortcuts available.

1. Direct install button: Yes, now users can install your web app directly with one click. (Support on Chrome, Firefox etc)

2. App screenshots available: Like play store, you can use app screenshots for showing example how your app looks like after installed.

3. App shortcuts: Users can able to create shortcuts for your particular labels or post and can directly open the post or specific page.

App Screenshots: You can use upto 7 app screenshots in pwa. Just go to your website take some screenshots of highlighted features of your website. 

If you want to make screenshot professional, then you can edit screenshots via any online generator tool. Watch this video and know how to make app screenshots for your web app.

You need to make 7 screenshots and upload them on any online free image hosting site. I am using GitHub to host my image, js files etc. 

Just create account on GitHub and upload all your images and after uploading images on GitHub, open images one by one and long press on image and click copy image url. 

After copy the image url open a notepad and paste all 7 images url one by one and save. (Important)

Now think about your important pages in your website, like- in my website: G- Drive link generator, Alexa rank checker or other important pages are available, where users usually visit again and again. This is for adding shortcuts, for best user experience (UX). 

Download the manifest.json file and open it on a notepad. 

Download JSON file

  1. Add website name.
  2. Add short name (your website name).
  3. Select language code - by default en-US.
  4. Select background colour: appear on splash screen.
  5. Select theme colour: appear on nav bar (where network, battery percentage are shown).
  6. Add icon with png format with round shape. Example here. Create all sizes of images and upload on GitHub and copy image url and replace with # tag.
  7. Purpose : Maskable - make 2 images with 192 and 512 sizes with full size. Example here. Upload this two images on GitHub and copy image urls and replace # tag with your image urls in your notepad.
  8. Description: add your short description - Example: Install App and get blogger updates, technology news etc in your Mobile.
  9. Android package name: if you have a app on play store then replace package name and play store url. Otherwise don't edit.
  10. Screenshots: now replace # with your app screenshots url, i already told you to save app screenshots image urls in a notepad.
  11. Shortcuts: Shortcuts is a way to open a specific page directly in a app.

Make 3 shortcuts icons with 192 round shape related with your page. Example here. After making 3 different icons, upload them on GitHub and copy images urls.

 12. Go to notepad and replace # with your 3 short icons url.

 13. Now in final step add your shortcuts pages url. 

Example: Original url : https://www.gamenewsmania.in/2022/02/password-generator-strong-and-random.html 

Remove your domain name from url: 

/2022/02/password-generator-strong-and-random.html

Note: if you have Google analytics then add ?utm_source=homescreen after end of your url, this will help you to calculate your pwa traffic. 

Example: 

/2022/02/password-generator-strong-and-random.html?utm_source=homescreen

Add all 3 url without domain name, add name of your shortcut and done. Just copy the hole manifest.txt file from your notepad and paste it  on Cloudflare. If you have already manifest file in Cloudflare for your website then select all old manifest file and replace with the new codes. 

Now just clear cookie from the browser for your website, then you can see the new results.

Note for Bloggers: if you want to make a tutorial for your audience with this manifest file. Then please give a link back to our website. https://www.gamenewsmania.in . We will feel happy and get motivation for upcoming projects.