~wuz/wuz.sh

4e0b33724201a130df7d5769395b577f2820dca5 — Conlin Durbin 11 months ago ef2c94c
Add service worker
5 files changed, 48 insertions(+), 1 deletions(-)

M .eleventy.js
M _includes/layouts/footer.njk
M _includes/layouts/head.njk
M _includes/styles/token.css
A sw.js
M .eleventy.js => .eleventy.js +1 -0
@@ 10,6 10,7 @@ module.exports = (config) => {
  config.addLayoutAlias("post", "layouts/post.njk");
  config.addPassthroughCopy("fonts");
  config.addPassthroughCopy("js");
  config.addPassthroughCopy("sw.js");
  config.addPassthroughCopy("assets");
  config.addPlugin(pluginRss);
  config.addPlugin(syntaxHighlight);

M _includes/layouts/footer.njk => _includes/layouts/footer.njk +13 -0
@@ 1,2 1,15 @@
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').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>

M _includes/layouts/head.njk => _includes/layouts/head.njk +1 -0
@@ 2,6 2,7 @@
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ pageTitle }}</title>
    <link rel="stylesheet" href="/css/main.css" />
    <script src="/js/black-lives.js" async></script>

M _includes/styles/token.css => _includes/styles/token.css +1 -1
@@ 33,7 33,7 @@
  --c-brand-secondary: var(--c-lavender);

  --base-font-size: em(typescale(4));
  --mobile-font-size: em(typescale(3));
  --mobile-font-size: em(typescale(5));

  --large-width: 1280px;
}

A sw.js => sw.js +32 -0
@@ 0,0 1,32 @@
var CACHE_NAME = 'my-site-cache-v1'[
       '/',
       '/index.html',
       '/index.html?homescreen=1',
       '/?homescreen=1',
       '/styles/main.css',
       '/scripts/main.min.js',
       '/sounds/airhorn.mp3'
     ];
var urlsToCache = [
  '/',
  '/css/main.css',
  '/js/black-lives.js'
];

self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open(CACHE_NAME).then(function(cache) {
     return cache.addAll(urlsToCache);
   })
 );
});

self.addEventListener('fetch', function(event) {
 console.log(event.request.url);

 event.respondWith(
   caches.match(event.request).then(function(response) {
     return response || fetch(event.request);
   })
 );
});