Days
Hours
Minutes
Seconds

Black Friday/Cyber Monday/Christmas
Sale is here! 50% off on Everything for a very limited time!!!

Claim The Offer Now

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.

Prabal Moudgil says:

I am having the same issue.

Team SuperPWA says:

Hi Prabal Moudgil,

Will you please elaborate more about your issue so that we will understand and help you.

Hamsatu Bashir says:

Hi, the app keeps failing and it wouldn’t open. I am not sure what to do as I followed the guide.

Team SuperPWA says:

Hi Hamsatu Bashir,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Stephen Guild says:

Followed installation instructions and am not getting icon at bottom of page. Testing on Google Chrome, my website is https://smdconference.scoe.co.za

Please let me know.

Team SuperPWA says:

Hi Stephen Guild,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Julien says:

Same problem as Chet

https://www.liguebasketmayotte.yt

Team SuperPWA says:

Hi Julien,

Will you please elaborate more about your issue so that we will understand and help you.

Adrian says:

Hi there, i just cant figure out why SPWA’s not working on my website : https://cirque-electrique.com/

Could you help me with this, please ?
Adrian

Team SuperPWA says:

Hi Adrian,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Ravi J says:

hi,

I have set all the settings but in mobile add to home screen button not shown and neither its shown in the right side of chrome install site name. I have set in my subdomains.

Rgards,

Team SuperPWA says:

Hi Ravi J,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

bryan says:

When I downloaded the icon of my PWA and added to the desktop appears my icon but next to a smaller google how do I remove that ?

Team SuperPWA says:

Hi bryan,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible

Sergio Sztokman says:

Hello
When I click “Add to home” everything works fine but the app icon is the WordPress icon and not my icon. I’ve uploaded 2 images 192×192 and 512×512 png.
How can I fix the icon?

Jose Varghese says:

Hi Sergio,

Please clear the browsing data and try it out again. It will resolve the issue. If you have added the PWA earlier to your phone, please don’t forget to uninstall it from the app’s list. Hope that helps.

Evan says:

Tienes que borrar la caché del navegador de tu móvil, ve hacia el candando junto al hipervinculo y luego borra los datos de Uso y presiona el boton borrar y restablecer y listo , lo que paso es que lo probaste apenas lo instalaste y por lo mismo guardo los iconos y demás dato predeterminados

Jeison says:

quiero agregar a mi landing page botones y banner que inviten a descargar la PWA de mi web como puedo hacerlo

Team SuperPWA says:

Hi Jeison,

You can use Our CTA addon to add a shortcode button. For the free version, you can use “custom element to add to home screen” in the Advance section

Elimara says:

olá boa tarde, eu configurei tudo, limpei o cache e nada de dar certo, não aparece o pop-up para baixar atalho na área de trabalho.
https://colinadosipes.com.br

Team SuperPWA says:

Hi Elimara,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Gipre says:

Good day,
I followed all of the instructions, still there’s no prompt to add it in home screen.
I already finished the setup in wordpress and in google chrome in my phone.

Team SuperPWA says:

Hi Gipre,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Guillermo says:

I follow the instruction, but am not getting icon at bottom of page.

https://www.foerster.com.ar

Thank´s

Team SuperPWA says:

Hi Guillermo,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Fireman says:

Hi! Followed installation instructions and I don’t see on android web=pade instalation button PWA. I have https.

Team SuperPWA says:

Hi Fireman,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

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.
💬 Any Query?