Question

我通过服务工作者注册，激活和缓存资源，现在我想知道如何使用服务工作者获取JSON数据并更新app 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的略微过时的版本，但一般原则仍应适用。

如何使用服务工作者获取json数据并更新app shell

1 个答案: