时间戳

首页 > 解决方案 > ServiceWorker 不缓存资产

javascript - ServiceWorker 不缓存资产

问题描述

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

文件结构

缓存存储 Chrome 工具

错误信息

标签： javascriptservice-worker

解决方案

我发现了这个问题。整个设置是正确的。问题出在我包含在“sw.js”文件的“资产”中的网址中。网址前面的正斜杠导致了问题。解决此问题的最佳方法是消除所有 url 并逐个添加。

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'
 
];

推荐阅读