javascript - PWA 没有更新缓存，我使用的是网络回退到缓存的方法

Question

我在我的 sw.js 文件中尝试了以下代码，但它没有将更新的响应存储在缓存中。它在在线时显示更新的响应。但是当我下线时，它返回的响应与我第一次访问时相同。

importScripts('/src/js/idb.js');
importScripts('/src/js/utility.js');

var CACHE_STATIC_NAME = 'static-v1000009';
var CACHE_DYNAMIC_NAME = 'dynamic-v1000009';

console.log('sw.js version ==>> ' + CACHE_DYNAMIC_NAME);

self.addEventListener('install', function (event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
    .then(function (cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.addAll([
        '/',
        '/wp-content/themes/siilc/assets/css/siilc-stylesheet.css',
        '/wp-content/themes/siilc/assets/css/common.css',
        '/wp-content/themes/siilc/assets/css/owl.theme.default.min.css',
        '/wp-content/themes/siilc/assets/css/swiper.min.css',
        '/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=3.3.5',
        '/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=3.3.5',
        '/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=3.3.5',
        '/wp-content/themes/siilc/style.css?ver=4.9.5',
        '/wp-content/themes/siilc/assets/js/swiper.min.js',
        '/wp-content/themes/siilc/assets/js/owl.carousel.js',
        '/wp-content/themes/siilc/assets/js/custom.js',
        '/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.70',
        '/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4',
        '/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=3.3.5',
        '/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=3.3.5',
        '/wp-content/themes/siilc/js/navigation.js?ver=20151215',
        '/wp-content/themes/siilc/js/skip-link-focus-fix.js?ver=20151215',
        'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i',
        ]);
    })
    )
});

self.addEventListener('activate', function (event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
    .then(function (keyList) {
      return Promise.all(keyList.map(function (key) {
        if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
          console.log('[Service Worker] Removing old cache.', key);
          return caches.delete(key);
        }
      }));
    })
    );
  return self.clients.claim();
});


self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).then(function (res) {
          return caches.open(CACHE_DYNAMIC_NAME)
          .then(function (cache) {
            if (event.request.url != '/src/js/sw-contact-us.js' || event.request.url != 'cart') {
              if(navigator.onLine){
               cache.put(event.request.url, res.clone());
              }else{
                return caches.match(event.request); 
              }
            }
            return res;
          })
        }).catch(function() {
      return caches.match(event.request);
    })
  );
});

我遵循以下参考 https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

标签： javascriptcachingservice-workerpwaservice-worker-events