PWA问题：更新Service Worker后空缓存

Question

我是PWA的新手，我在一个简单的项目上接受培训。在goole chrome上的第一次运行之后，一切都运行正常，我更改了服务工作人员中的cacheName常量和index.html中的标题，以测试所有站点资产的重新缓存。从这里开始，缓存仍然创建，但它是空的，我得到错误未捕获（在promise）TypeError：请求失败提到SW的行，我们const static CacheName='site-stest-v1'被声明。

这里是SW的代码：

const staticCacheName = 'site-static-v2';
const assets = [
    './',
    './index.html',
    './index.js',
    './main.js',
    './style.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4-src.js'
];

// install service worker
self.addEventListener('install', evt => {
    console.log('service worker has been installed');
    evt.waitUntil( 
        caches.open(staticCacheName).then(cache => {
            console.log('caching shell assets');
            cache.addAll(assets);
        })
    );
   
});

// activate event
self.addEventListener('activate', evt => {
    console.log('service worker has been activated');
});

// fetch event
self.addEventListener('fetch', evt => {
    evt.respondWith(
        caches.match(evt.request).then(cacheRes => {
            return cacheRes || fetch(evt.request);
        })
    );
});

任何帮助都将不胜感激。

Answer 1

问题出在您的资产数组中。它只将URLpath带到要缓存的文件，而不是文件路径。简而言之，从这些路径的前面删除点。

const assets = [
    '/',
    '/index.html',
    '/index.js',
    '/main.js',
    '/style.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4-src.js'
];

如果您将js和css文件存储在一个静态文件夹中， /static作为路由，那么您需要在其中存在的每个文件前面添加 /static。

我想再次指出，它只接受URLpath，而不接受FILEpath。它与您的文件路径无关。主要原因实际上是它从服务器缓存资产，而不是从您的计算机缓存资产。因此，它需要路由而不是文件路径。