Offline Cache

javascript

https://www.youtube.com/watch?v=jCKZDTtUA2A
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

Service Worker

Proxy between browser and network

BEFORE:

AFTER:

Features

• Web Worker
• Proxy
• Https

Life Cycle

1. 通过register来获取和注册，注意scope
2. install
   
   1. installing
   2. installed 已经安装完毕，等待使用旧的service worker的client被关闭
   3. activating 没有使用旧的sw的client，此时可以清除旧的cache
3. activated handle function（fetch、sync、push），可以代理请求，
4. redundant 被别的sw替代，失效

1. Register A service worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/path/sw.js', { scope: '/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);
    });
  });
}

disable sw.js http cache

If we register service worker at /path/sw.js, only pages like /path/page1 /path/page2 will be under control by service worker.

2. Install a service worker

Decide which files you want to cache

self.addEventListener('install', function(event) {
  // 1. Open a cache.
  // 2. Cache our files.
  // 3. Confirm whether all the required assets are cached or not.
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

3. Cache and return requests

Recieve request and return response cache if exist

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).catch(function() {
      return fetch(event.request);
    })
  );
});

4. Update a service worker

this.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2'];
  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

workbox

sw-precache vs sw-toolbox

precache

staticFileGlobs: [
  './dist/js/**/*.js',
  './dist/css/*.css',
  './dist/img/**/*',
  './dist/*.html'
],
stripPrefixMulti: {
  './dist/js/': `${cdnPrefix}/js/`,
  './dist/css/': `${cdnPrefix}/css/`,
  './dist/img/': `${cdnPrefix}/img/`,
  './dist/': dev ? '/' : `https://xxx/${projectName}/`
}

After compilation:

self.__precacheManifest = [
  {
    "url": "http://localhost:3000/css/detail.79e341dd393ad094529c.css",
    "revision": "a2eef255ee6f166e4050a6226270beb4"
  },
  {
    "url": "http://localhost:3000/js/detail.ede7025524a699a749bb.js",
    "revision": "e532f0c17656a3e1a9081fd1dcd11aac"
  }
]

runtimeCaching

runtimeCaching: [{
  urlPattern: /https:\/\/s3.pstatp.com\/pgc\/tech\/collect\/collect-.*/,
  handler: 'cacheFirst',
  options: {
    cacheName: 'tea-sdk'
  }
}, {
  urlPattern: /https:\/\/m.dcdapp.com\/motor\/brand\/m\/v1\/brand/,
  handler: 'staleWhileRevalidate',
  options: {
    cacheName: 'brand-list'
  }
}],

Handlers

• staleWhileRevalidate
• networkFirst
• cacheFirst
• networkOnly
• cacheOnly

staleWhileRevalidate

networkFirst