perymimon
4/28/2019 - 7:35 AM

PWA & service worker

for service worker and offline page

<link 
    rel="preload|prefetch"
    as="font|script|style"
    href='https://fonts.googleapis.com/css........'
    onload="this.rel = 'stylesheet'"
>

/*for ...*/
<link rel="manifest" href="/manifest.json">
/*apple*/
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="Chatty Images">
  <link rel="apple-touch-icon" href="/static/icons/144.png">
/*ie*/
  <meta name="msapplication-TileImage" content="/static/icons/144.png">
  <meta name="msapplication-TileColor" content="#000">
{
  "name": "Chatty Images",
  "short_name": "Chatty",
  "start_url": "index.html",
  "display": "standalone",
  "theme_color": "#9c27b0",
  "background_color": "#fff",
  "icons": [
    {
      "src": "/static/icons/144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/static/icons/512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(reg => {
    reg.onupdatefound = function() {
      const sw = reg.installing;

      sw.onstatechange = function() {
        if (sw.state === 'installed') {
          if (navigator.serviceWorker.controller) {
            app.message = 'New version is available. Reload to activate it.'
            app.show=true
          } else {
            app.message = 'Content is now available offline'
            app.show=true
          }
        }
      }
    }
  })
}
//------------------------------------
self.addEventListener('activate', event => {
  event.waitUntil(clients.claim());
});

self.addEventListener('activate', () => {
    self.clients.matchAll({ type: 'window' }).then(clients => {
        for (let client of clients) {
            client.navigate(client.url)
        }
    })        
})