Turn into a PWA

[daneSchilling]

Steps

• Run lighthouse
• Create manifest
• Create service worker

[iDaneSchilling]

You will need to create some favicons. Example site.webmanifest

{ "name": "Site Name", "short_name": "Icon Name", "display": "standalone", "start_url": ".", "scope": "/PutGitHubPagesPathHere/", "theme_color": "#ffffff", "background_color": "#ffffff", "icons": [ { "src": "icon_130.png", "sizes": "130x130", "type": "image/png" }, { "src": "icon_192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon_512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }, { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

[iDaneSchilling]

You will likely need meta data and pull in the manifest:

<meta name="description" content="A simple PWA.">
<meta name="theme-color" content="#FFFFFF" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='manifest' href='site.webmanifest' />

[iDaneSchilling]

script to add to index:

<script type='text/javascript'>
    if (navigator.serviceWorker != null) {
        navigator
            .serviceWorker
            .register('./scripts/sw.js');
    }
</script>

[iDaneSchilling]

Example service worker:

var cacheStorageKey = 'version-token-v-1';

var cacheList = [ 'add every full url you will be pulling in' ];

self.addEventListener('install', e => { e.waitUntil( caches.open(cacheStorageKey).then(cache => { return cache.addAll(cacheList); }).then(() => self.skipWaiting()) ); });

self.addEventListener('activate', (e) => { e.waitUntil( Promise.resolve( caches.keys().then((cacheNames) => { return cacheNames.map((name) => { if (name !== cacheStorageKey) { return caches.delete(name); } }); }) ).then(() => { return self.clients.claim(); }) ); });

self.addEventListener('fetch', (e) => { e.respondWith( caches.match(e.request.url).then((response) => { if (response != null) { return response; }

  return fetch(e.request.url);
})

); });