ServiceWorker不缓存资产

Question

我正在开发一个Progressive Web App，我正在使用Chrome Developer Tools。我已经安装了我的Service Worker，并与Fetch事件一起激活。我已经在我的sw.js文件中添加了缓存代码。当我重新加载页面并查看Cache Storage时。我确实看到了静态站点，但是没有任何东西看起来是缓存的。

sw.js脚本

const staticCacheName = 'site-static';
const assets = [
    '/',
    '/index.html',
    '/app.js',
    '/script.js',
    '/style.css',
    'https://fonts.googleapis.com/css?family=Audiowide',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW',
    '/images/AppliedArts.PNG',
    '/images/MasterBA.png',
    '/images/MscCS.png',
    '/images/MscEngineer.png',
    '/images/UXDesign.png'
];
// install event
self.addEventListener('install', evt => {
    //console.log('service worker installed');
    evt.waitUntil(
      caches.open(staticCacheName).then((cache) => {
        console.log('caching shell assets');
        cache.addAll(assets);
      })
    );
  });

​

​

​

​

​

​

Answer 1

我发现了这个问题。整个设置都是正确的。问题在于我在“sw.js”文件中的“资产”中包含的urls。在url前面的正斜杠引起了这个问题。解决此问题的最佳方法是消除所有url并添加1乘1。

const assets = [
    '/',
    'index.html',
    'images/AppliedArts.PNG',
    'images/MasterBA.png',
    'images/MscCS.png',
    'images/MscEngineer.png',
    'images/UXDesign.png',
    'images/logo.png',
    'style.css',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css',
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
    'https://fonts.googleapis.com/css?family=Audiowide',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js',
    'manifest.json',
    'app.js',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js',
    'script.js'
 
];