ServiceWorker无法缓存持久性资产

Question

到目前为止，我正在学习如何实现PWAs并理解其基本概念。我的问题是，当我试图在我的服务工作者文件中缓存静态资产时，实际上没有缓存任何东西，而是触发了这个错误。

Uncaught (in promise) TypeError: Request failed

下面是我的代码。

const staticAssets = [
    './',
    './index.php',
    './account.php',
    './css/account.css',
    './css/bootstrap-4.0.0.css',
    './css/bootstrap.min.css',
    './css/common.css',
    './css/dashboard.css',
    './css/fonts.css',
    './css/home.css',
    './lib/Magnific-Popup/dist/magnific-popup.css', ,
    './lib/sweetalerts/sweetalert.css',

    './images/logo.png',
    './repository/images/*.png',
    './repository/images/*.jpg',
    './repository/images/*.gif',


    './js/account.jsx',
    './js/app.jsx',
    './js/bootstrap-4.0.0.js',
    './js/dashboard.jsx',
    './js/jquery-3.2.1.min.js',
    './js/popper.min.js',
    './js/project.jsx',
    './js/security.jsx',

    './lib/Magnific-Popup/dist/jquery.magnific-popup.min.js',
    './lib/Magnific-Popup/dist/jquery.magnific-popup.js',
    './lib/sweetalerts/sweetalert.min.js',
    './lib/sweetalerts/sweetalert.js'
];

self.addEventListener("install",  async event => { 
    const cache = await caches.open("mystatic-assets");
    cache.addAll(staticAssets);
});

self.addEventListener("fetch", event => {
    const req = event.request;
    event.respondWith(cacheFirst(req));
});

async function cacheFirst(req) { 
    const cacheResponse = await caches.match(req);
    return cacheResponse || fetch(req);
}```


What am I doing wrong?

Answer 1

首先，我必须指出，如果您作为静态URL提供的路径中存在错误或拼写错误，它将失败，并且不会缓存任何内容。

1/试试这个

​

self.addEventListener("install", event => {
    event.waitUntil(
      caches.open("mystatic-assets").then(cache => {
        cache.addAll(staticAssets);
      })
    );
});

​

第二点

在fetch事件中

​

self.addEventListener("fetch", event => {
    const req = event.request;
    event.respondWith(cacheFirst(req));
});

function cacheFirst(req) {
    return chaches.match(req) || fetch(req)
}

​

试试这个，然后告诉我