I've created a service-worker and manifest.json
file in order to display an 'add to home screen' Web App Install Banner for Chrome Browser Users.
It is not working as intended.
Here is my manifest.json
file
{
"name": "MySite",
"short_name": "Mysite",
"start_url": "./?utm_source=homescreen",
"icons": [{
"src": "assets/cacheable/images/shortcut/120x120.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "assets/cacheable/images/shortcut/142x142.png",
"sizes": "142x142",
"type": "image/png"
}, {
"src": "assets/cacheable/images/shortcut/192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "assets/cacheable/images/shortcut/192x192.png",
"sizes": "384x384",
"type": "image/png"
}],
"orientation": "portrait" ,
"background_color": "#fff",
"display": "standalone",
"theme_color": "#fff"
}
Please let me know if I forgot to add anything?
Open the menu next to the URL bar. Depending on whether you're using Chrome or Android you'll see a menu option "Install" or "Install App". This is the "Add to Home screen" option displayed for any site that has the necessary features in place.
First, let's check if your manifest fulfills the requirements for showing Web App Install Banners.
Requirements
Full (current) requirements for showing Web App Install Banners are*:
Reference
Okay, so for now let's assume this is all valid. Let's move on to testing.
Testing
To test if you've installed it correctly, you can try the following steps:
A prompt should now show on top of your browser asking if you want to add the url to your things (on Chrome desktop).
Troubleshooting
If after testing you are getting the following error in your console:
No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest
Then please make sure that 1. Your service worker is functioning properly and without errors, and 2. Your start_url
matches an actual url of your website that loads. Else, you will never get the prompt to show!
Additionally,
Do note that users (and you!) can also add to the home screen manually through the the (Android) Chrome menu. It is not required to wait for the prompt! I add a lot of websites I tend to use daily to my homescreen, and I hardly ever see a banner!
* Do note that these requirements could change from time to time (they have before!). An update to 'Add to home screen' coming in 2017 has already been announced here
** Also note that these requirements differ significantly from native app install prompts.**
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With