Service Workers & Manifests

Aug 19 2017- POSTED BY projecth 0 Comment

Service Worker

A script that runs in the background that features to be cached without requiring a user interaction. They are a great way to offer a performance boost and manage your application’s cache for offline use.

Usage
  • Not supported by all browsers. Chrome, Opera, and Firefox do, Edge is in development, Safari is in consideration.
  • appCache is the old, service workers is the new.
  • Do not cache polyfills. Chances are the browsers that need polyfills won’t support service workers.
  • Don’t be too aggressive, this will just add additional load time.
  • Requires an HTTPS connection.
    To have a local HTTPS virtual server, use: https://github.com/indexzero/http-server
  • In order for a service worker to cache elements of your site you must designate the path to files in the return cache.addAll() function
  • In order to validate that you have registered a Service Worker, you should look in the Application tab of Chrome’s Inspector
Server Worker Code (sw.js)
// set variable name for cached resource
var CACHE = 'date-picker';

// On install, cache some resource.
self.addEventListener('install', function (event) {

  // Open a cache and use addAll() with an array of assets to add all of them to the cache.
  event.waitUntil(caches.open(CACHE).then(function (cache) {
    return cache.addAll([
      '/',
      '/index.html',
      '/css/date-picker.min.css',
      '/js/moment.min.js',
      '/js/pikaday.min.js',
      '/js/feature.min.js'
    ])
    .then(function () {
      return self.skipWaiting();
    });
  }));
});

// On fetch, use cache but update the entry with the latest contents from the server.
self.addEventListener('fetch', function (event) {
  event.respondWith(fromCache(event.request));
  event.waitUntil(
    update(event.request)
  );
});

// Open the cache where the assets were stored and search for the requested resource.
function fromCache(request) {
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request);
  });
};


// Update consists in opening the cache, performing a network request and storing the new response data.
function update(request) {
  return caches.open(CACHE).then(function (cache) {
    return fetch(request).then(function (response) {
      return cache.put(request, response.clone()).then(function () {
        return response;
      });
    });
  });
};

Service Worker Code in HTML

    ...
    <script>
        if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.min.js').then(function(reg) {});
        }
    </script>
</body>

Application Manifest

A site manifest in conjunction with a service worker really helps seal the deal with that app like experience, holding the meta data of your app.

Adding A Manifest

Add manifest.json at the root of the source, specifying some boilerplate values to get things started.

Manifest JSON File Example

{
  "name": "Date Picker",
  "short_name": "Date Picker",
  "icons": [{
        "src": "images/date-picker_128.png",
        "type": "image/png",
        "sizes": "128x128"
      }, {
        "src": "images/date-picker_152.png",
        "type": "image/png",
        "sizes": "152x152"
      }, {
        "src": "images/date-picker_144.png",
        "type": "image/png",
        "sizes": "144x144"
      }, {
        "src": "images/date-picker_192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "images/date-picker_256.png",
        "type": "image/png",
        "sizes": "256x256"
      },
      {
        "src": "images/date-picker_512.png",
        "type": "image/png",
        "sizes": "512x512"
      }],
  "start_url": "/index.html",
  "scope": "/",
  "display": "standalone",
  "orientation": "landscape",
  "background_color": "#fff",
  "theme_color": "#fff"
}

Manifest Code in HTML

    <head>
        ...
        <meta name='theme-color' content='#fff'>
        <title>Fun with Calendars</title>
        <link rel='manifest' href='manifest.json'>
        ...
    </head>

To check if you have a manifest running, in Chrome DevTool’s Application tab, in the left menu select manifest.