Question

（对不起，我的英语不好）

我是PWA上的真正初学者，我必须让服务工作者缓存网页的所有元素（图像，css，js等）。我无法静态缓存，因为有成千上万张图片，网站是动态的。

其他信息，该站点是Prestashop。

当前，我的html中有这个

<script>
    // This is the "Offline copy of pages" service worker

    // Add this below content to your HTML page, or add the js file to your page at the very top to register service worker

    // Check compatibility for the browser we're running this in
    if ("serviceWorker" in navigator) {
        if (navigator.serviceWorker.controller) {
            console.log("[PWA Builder] active service worker found, no need to register");
        } else {
            // Register the service worker
            navigator.serviceWorker
                    .register("sw.js", {
                        scope: "./"
                    })
                    .then(function (reg) {
                        console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
                    });
        }
    }
</script>

在我的服务人员（sw.js）中：

var CACHE = 'network-or-cache';


self.addEventListener('install', function(evt) {
    console.log('The service worker is being installed.');


    evt.waitUntil(precache());
});


self.addEventListener('fetch', function(evt) {
    console.log('The service worker is serving the asset.');


    evt.respondWith(fromNetwork(evt.request, 400).catch(function () {
        return fromCache(evt.request);
    }));
});


function precache() {
    return caches.open(CACHE).then(function (cache) {
        return cache.addAll([
            '/themes/caverne_rocket/assets/css/theme.css',
            '/themes/core.js',
            '/themes/caverne_rocket/assets/js/theme.js',
            '/',
            '/themes',
            '/img'
        ]);
    });
}


function fromNetwork(request, timeout) {
    return new Promise(function (fulfill, reject) {


        var timeoutId = setTimeout(reject, timeout);


        fetch(request).then(function (response) {
            clearTimeout(timeoutId);
            fulfill(response);


        }, reject);
    });
}


function fromCache(request) {
    return caches.open(CACHE).then(function (cache) {
        return cache.match(request).then(function (matching) {
            return matching || Promise.reject('no-match');
        });
    });
}

我看了几本教程，测试了一些代码，这是我目前最好的东西。

但是，我有一个问题：

在某些页面上，当我仍然可以上网并且有图像时，最终显示的页面是404。但是，如果我按下“刷新”按钮，则该页面将正确显示，而无需进行任何更改。

好像该站点正在尝试加载它没有的缓存或类似的东西。有人有主意吗？（或只是改善我的服务人员）。

谢谢！

PWA-Prestashop网站的缓存加载问题

0 个答案: