ServiceWorker 不缓存资产

问题描述

我正在研究 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);
      })
    );
  });

解决方法

我发现了这个问题。整个设置是正确的。问题出在我包含在“sw.js”文件中的“assets”中的网址中。 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'
 
];

javascript service-worker