enable "add to home screen prompt" with minimal code for Android Device
last update : April 2018
- iOS currently dun support the A2HS and service worker, can provide tutorial animation using css
- sw.js requires at least one fetch function
- only support Chrome ver >= 39
Chrome automatically displays the banner when your app meets the following criteria:
- Has a web app manifest file with:
- a short_name (used on the home screen)
- a name (used in the banner)
- a 192x192 png icon (the icon declarations must include a mime type of image/png)
- a start_url that loads
- Has a service worker registered on your site.
- Is served over HTTPS (a requirement for using service worker).
- Meets a site engagement heuristic defined by Chrome (this is regularly being changed).
instruction :
https://developers.google.com/web/fundamentals/app-install-banners/
https://developer.chrome.com/multidevice/android/installtohomescreen
- scope issue
<!DOCTYPE html>
<html>
<head>
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json">
</head>
<body class="hold-transition login-page">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js?v3', {
scope: '.' // THIS IS REQUIRED FOR RUNNING A PROGRESSIVE WEB APP FROM A NON_ROOT PATH
}).then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
</body>
</html>
APP.get('/manifest.json', function(req, res) {
res.append('Content-Type', 'text/javascript');
res.sendFile(path.join(root, "manifest.json"));
});
APP.get('/sw.js', function(req, res) {
res.append('Content-Type', 'text/javascript');
res.sendFile(path.join(root, "sw.js"));
});
console.log("sw loaded")
self.addEventListener('fetch', function(event) {
// Perform some task
});
{
"short_name": "XXX PWA",
"name": "XXX",
"icons": [
{
"src": "/static/manifest/app_icon.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/static/manifest/app_icon.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/static/manifest/app_icon.png",
"type": "image/png",
"sizes": "192x192"
}
],
"background_color": "#FFFFFF",
"display": "standalone",
"start_url": "."
}