如何使用 Service Worker 获取 json 数据并更新应用程序 shell

Question

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

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-precache 以保持 App Shell 资源（HTML、JS、CSS）最新。

它使用运行时缓存（通过对 sw-toolbox 的依赖）来保持 JSON API 缓存响应，以及图像。

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

如何使用 Service Worker 获取 json 数据并更新应用程序 shell

How to fetch json data and update the app shell using service worker

javascript

service-worker