PWA Symfony 缓存工作箱

Question

我在一个 symfony 应用程序上实现了工作箱。然后我创建了我的 service worker。 我想缓存我正在浏览的所有页面，但不会创建缓存，我只有缓存“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 事件（不使用工作箱）不起作用。 （在没有 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