0

I managed to get my PWA to complete all the chrome dev tools tests but I still cannot get an install prompt to fire.

www.billtravis.net/pwa/

from what I've seen everywhere the install prompt should fire when the manifest loads before the service worker installs.

This PW also needs to live on an IIS server, which won't even register the worker.

Any ideas?

{
"name": "SYLVANIA LightPRO",
"short_name": "LightPRO",
"icons": [
{
"src": "/img/image-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/pwa/?homescreen=1",
"scope": "/",
"display": "standalone",
"background_color": "#ff6600",
"theme_color": "#ffffff"
}
Bill Travis
  • 1
  • 2
  • Don't know if this makes a difference. Looks like you may have some airhorner stuff still in your code (const cacheName = `airhorner-${version}`;) in (pwabuilder-sw.js) and missing images listed in your manifest are throwing errors in the console. – Mathias Apr 01 '19 at 18:19
  • Install lighthouse on chrome and see what that audit says – McMurphy Apr 02 '19 at 01:51
  • Thanks for the comments, I had the icon misnamed. It installed great on android but I didn't get a prompt on safari/mac. I also fixed the airhorner tag. – Bill Travis Apr 02 '19 at 15:10
  • Sadly, Safari is not PWA friendly yet. Did it work for you on Mac - Chrome ? – Mathias Apr 02 '19 at 16:22
  • Installs on my Mac Chrome OK as a standalone - with a manual install, so you are close. Note: go here ( chrome://apps/ ) in desktop chrome to uninstall and test again. – Mathias Apr 02 '19 at 16:26
  • 1
    Maciej has a good solution but I can't get a popup to generate. https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native – Bill Travis Apr 02 '19 at 16:41
  • Unfortunately, now I can't get it to update the service worker with new content. I'm using the pwabuilder cache-first worker but it doesn't seem to ping the server after install. – Bill Travis Apr 02 '19 at 18:43

1 Answers1

0

Probably it due to lack of image sizes definitions in manifest.json which were required by web browser. I can see you have only 512 while different browsers expect a different set of images. So if you would not like to care about that differences in PWA implementation between the browsers, you can use pwacompat:

<script async src="path/to/pwacompat.min.js"></script>

This "polyfill" will generate all necessary images (if not specified in manifest.json) and will add metatags (required by ios for example)

Marcin
  • 773
  • 6
  • 17
  • Alrighty, I managed to get an offline service worker to register and the app installed correctly in android and desktop. https://www.billtravis.net/pwa/ However, when I move the app into its new home it passes all the chrome dev tools audits but will not install on Android, but does show an install on chrome. https://appqa.sylvania.com/pwa/lightpro/ Any ideas? – Bill Travis Apr 12 '19 at 17:38