Luvgreed/Progressive Web App.md

## Progressive Web App.md

      
    Raw
  

              Progressive Web App.md
            
          
    Web App Install Banners

enable "add to home screen prompt" with minimal code for Android Device
last update : April 2018
Remark


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

Criteria

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
Issues


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

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"));
});
sw.js

console.log("sw loaded")
self.addEventListener('fetch', function(event) {
  // Perform some task
});

manifest.js

{
  "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": "."
}