PWA Symfony Cache Workbox

Question

我在symfony应用程序上实现了workbox。然后我创建了我的服务工作者。我想缓存我正在浏览的所有页面，但缓存不会被创建，我只有缓存"workbox-preache-v2...“My cache

这是我的服务工作者：

​

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');
import { NetworkFirst, NetworkOnly, StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import { precacheAndRoute, matchPrecache } from 'workbox-precaching';
import { setCatchHandler } from 'workbox-routing';
import { BackgroundSyncPlugin } from 'workbox-background-sync';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';




console.log("TEST_1 from Sw");
// Force development builds
workbox.setConfig({ debug: true });

self.addEventListener('install', function(event) {
    self.skipWaiting();
});

self.addEventListener('activate', () => {
    clients.claim();
});

// Cache page navigations (html) with a Network First strategy
registerRoute(
    // Check to see if the request is a navigation to a new page
    ({ request }) => request.mode === 'navigate',
    // Use a Network First caching strategy
    new StaleWhileRevalidate({
        // Put all cached files in a cache named 'pages'
        cacheName: 'pages',
        plugins: [
            // Ensure that only requests that result in a 200 status are cached
            new CacheableResponsePlugin({
                statuses: [200],
            }),
        ],
    }),
);

// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
registerRoute(
    // Check to see if the request's destination is style for stylesheets, script for JavaScript, or worker for web worker
    ({ request }) =>
    request.destination === 'style' ||
    request.destination === 'script' ||
    request.destination === 'worker',
    // Use a Stale While Revalidate caching strategy
    new NetworkFirst({
        // Put all cached files in a cache named 'assets'
        cacheName: 'assets',
        plugins: [
            // Ensure that only requests that result in a 200 status are cached
            new CacheableResponsePlugin({
                statuses: [200],
            }),
        ],
    }),
);

precacheAndRoute([
    { url: "sw.js", revision: "7895" },
    { url: "repo.js", revision: "7895" },
    { url: "/home", revision: "7895" },
    { url: "/home/create", revision: "7895" },
], {
    cleanUrls: false,
    ignoreURLParametersMatching: [/.*/],
    directoryIndex: null,
});

precacheAndRoute(self.__WB_MANIFEST);

​

我用另一个应用程序php (没有Symfony )尝试这段代码，它很好，我认为问题出在URL (因为我使用symfony-route...)，但我不知道如何解决它。你能帮帮我吗？

更新:我试着做了几件事，最后我发现fetch事件(没有使用workbox )不起作用。(在没有symfony的php应用程序上，worker服务工作得很好)我不明白为什么这里的"self.addEventListener("fetch"，function(event) {“”不能传递。这与导航有关吗？

我的新服务工作者(用于测试和调试错误)

​

const staticCacheName = 'pages-cache-v2';

self.addEventListener('install', event => {
    console.log('Attempting to install service worker and cache static assets');
    event.waitUntil(
        caches.open(staticCacheName)
        .then(cache => {
            return cache.addAll(filesToCache);
        })
    );
});

self.addEventListener('fetch', event => {
    console.log('Fetch event for ', event.request.url);
    event.respondWith(
        caches.match(event.request)
        .then(response => {
            if (response) {
                console.log('Found ', event.request.url, ' in cache');
                return response;
            }
            console.log('Network request for ', event.request.url);
            return fetch(event.request)
                .then(response => {
                    return caches.open(staticCacheName)
                        .then(cache => {
                            cache.put(event.request.url, response.clone());
                            return response;
                        });
                });
        }).catch(error => {
            console.log('Error, ', error);
            return caches.match('/offline');
        })
    );
});

self.addEventListener('activate', event => {
    console.log('Activating new service worker...');

    const cacheWhitelist = [staticCacheName];

    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

​

Answer 1

您将调用precacheAndRoute()两次。

如果您正在使用workbox，则应该让workbox-config.js生成__WB_MANIFEST