如何使用service worker获取json数据并更新应用程序外壳

Question

我已经通过ServiceWorker注册、激活和缓存了资源，现在我想知道如何使用ServiceWorker获取JSON数据和更新应用程序外壳。

我已经通过ServiceWorker注册、激活和缓存了资源，现在我想知道如何使用ServiceWorker获取JSON数据和更新应用程序外壳。

var CACHE_NAME = 'my-cache-v1'; 
var urlsToCache = [
 
  '/common.css',
  '/common.js'
  
];

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');
    e.waitUntil(
      caches.open(CACHE_NAME).then(function (cache) {
          console.log('[Service Worker] Caching app shell');
          return cache.addAll(urlsToCache);
      }).then(function(e){
        return self.skipWaiting();
      })
    );
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
      
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

             var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== CACHE_NAME) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

Answer 1

要效仿的一个例子是https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo

它在一个构建过程中集成了sw-preache，以保持App Shell资源（超文本标记语言、JS、CSS）是最新的。

它使用运行时缓存（通过对sw工具箱的依赖）来保持JSON API响应和图像的缓存。

它基于一个稍微过时的React/react-router/react-redux版本，但一般原则仍然适用。