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.
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.
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.
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.