ServiceWorker не может кэшировать постоянные активы - PullRequest
Новая
       61

ServiceWorker не может кэшировать постоянные активы

0 голосов
/ 29 апреля 2020

Я изучаю, как реализовать PWA и до сих пор понимаю основную концепцию. Моя проблема заключается в том, что когда я пытаюсь кэшировать данные stati c в моем файле сервисного рабочего, на самом деле ничего не кэшируется, а вместо этого выдается эта ошибка.

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?

1 Ответ

0 голосов
/ 02 мая 2020

Прежде всего я должен указать, есть ли ошибка или опечатка в путях, которые вы указываете как stati c URL-адресов, он не будет работать и ничего не будет кэшироваться.

1 / попробуйте это 

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

во-вторых

в вашем событии получения 

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

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

попробуй это и скажи мне

...