How to Test PWA on Google Chrome Browser

Looking to get testing with Progressive Web Apps (PWA) on Google Chrome Browser?  Here’s a quick guide to know how to test PWA on Google Chrome Browser. Google Chrome fire the beforeinstallprompt event to show the Add to Homescreen prompt from Chrome 68.

The criteria Google Chrome uses to decide if the site is a Progressive Web App:

  • Website should be served fully via HTTPS
  • Has a Web App Manifest
  • Web App Manifest has name or short_name property
  • Service Worker registered with a fetch event handler
  • Web App Manifest with start_url property 
  • Web App Manifest has an icon property must include a 192px and a 512px sized icons
  • Display property should be set to standalonefullscreen and minimal-ui

As to test PWA on Google Chrome, first of all make sure that you have cleared the browsing data of browser. It’s because sometimes the browser’s cache web pages for faster loading of websites, due to that the files that we needed for PWA like manifest and Service Worker won’t get loaded in this case. If you have tried any service workers or PWA’s earlier the clearing of browsing data helps to resolve that case too.

How to clear the browsing data on Google Chrome?

1) Tap on the Browser menu (3 dots at the top right corner of Chrome Browser)
2) From the menu tap Settings, then tap Privacy
3) Within the Privacy page at the bottom you can see Clear browsing data, tap on it.
4) Once you tap it, you can see another page with Clear browsing data options. Select the Advanced tab
5) Then select Browsing history, Cookies and site data, Cached images and files, Site settings and Media Licenses. Then tap CLEAR DELETE.

 

How to test PWA on Google Chrome?

1) Make sure that you have cleared the browsing data.
2) Visit the website that you have installed PWA
3) You can see a Add to Home screen prompt from the bottom of page
4) Tap the button, instantly the web app will be added to your Home screen with the icon which you added in manifest
5) Tap the icon,  then the Progressive Web App of your website will be loaded.
6) You can see the Splash Screen with the icon and background color that you set earlier upon Manifest.
7) Navigate via some of the web pages, after that disconnect the internet on your device and close the web app
8) After that tap the web app icon again, you can notice that all the pages that you viewed earlier during online can be viewed and all the pages that you haven’t viewed will showed by an Offline page that you set upon the service worker.

If your website uses any caching plugins or addon’s or extensions don’t forget to clear the cache before testing. If you are using WordPress, try “Super Progressive Web Apps” on WordPress plugin directory.

Hope the article helps to know how to test PWA on Google Chrome Browser, if anything missing please do comment below so that we can add more details and make it more helpful for others.

Leave a Reply

Your email address will not be published. Please enter all fields.

Chet says:

Followed installation instructions and am not getting icon at bottom of page. Testing on Google Chrome.
Thanks,
Chet

Jose Varghese says:

Good day Chet! Please do share your website URL via our contact page, so that we can check it and revert you asap.

Stay Updated

Learn more about Progressive Web Apps
and get latest updates about SuperPWA

we'll share our root password before we share your email with anyone else.