为什么我的 Workbox GenerateSW 在连接时显示我的离线页面？

Question

我正在尝试使用 Workbox GenerateSW() 设置我的离线页面，并遇到一个问题，即在我清除站点数据并硬刷新后第一次加载时显示我的主页，但在后续加载时我得到离线页面我设置，即使我在线。我有一个多页 PHP 应用程序，其中包含由 CDN 提供的资产。我在一个由 npm 节点脚本调用的 JS 文件中运行 GenerateSW() 任务。

这是我的 GenerateSW() 代码...

// Pull in .env file values...
const dotEnv = require('dotenv').config({ path: '/var/www/my-project/sites/www/.env' });
if (dotEnv.error) {
  throw dotEnv.error
}

const {generateSW} = require('workbox-build');

// Used to break cache on generate of new SW where file is composed of multiple pieces that can't be watched.
const genRanHex = (size = 24) => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');

const mode = 'development';

generateSW({
    swDest: './sites/www/public/service-worker.js',
    skipWaiting: true,
    clientsClaim: true,
    cleanupOutdatedCaches: true,
    cacheId: genRanHex(),
    mode: mode,
    navigateFallback: '/offline',
    offlineGoogleAnalytics: mode === 'production',
    globDirectory: './sites/assets/public',
    globPatterns: [
        'img/shell/**/*.{svg,png}',
        'dist/**/*.{js,css}',
        'manifest.json'
    ],
    modifyURLPrefix: {
        'dist/': `${dotEnv.parsed.APPLICATION_ASSETS_CDN}/dist/`,
        'img/shell/': `${dotEnv.parsed.APPLICATION_ASSETS_CDN}/img/shell/`,
    },
    ignoreURLParametersMatching: [/v/],
    additionalManifestEntries: [
        {
            "url": "/offline",
            "revision": genRanHex()
        }
    ],
    runtimeCaching: []
}).then(({count, size}) => {
    console.log(`Generated service worker, which will precache ${count} files, totaling ${size} bytes.`);
}).catch(console.error);

Answer 1

navigateFallback 实际上并不是离线页面。来自workbox docs：

如果指定，所有未预缓存的 URL 导航请求都将使用提供的 URL 处的 HTML 来满足。您必须传入预缓存清单中列出的 HTML 文档的 URL。这适用于单页应用场景，您希望所有导航都使用通用的 App Shell HTML。

对于离线页面，this question 可能会有所帮助。

Answer 2

因此，在我试图将其用作非缓存路由的离线回退时，我误用了 navigateFallback 时接受的答案是正确的。经过一番挖掘和修补，我找到了正确的方法。我错过或在 Workbox 上没有充分记录的重要部分是脱机回退发生在 runtimeCache 级别...

// Pull in .env file values...
const dotEnv = require('dotenv').config({ path: '/var/www/my-project/sites/www/.env' });
if (dotEnv.error) {
  throw dotEnv.error
}

const {generateSW} = require('workbox-build');

// Used to break cache on generate of new SW where file is composed of multiple pieces that can't be watched.
const genRanHex = (size = 24) => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');

const mode = 'development';

generateSW({
    swDest: './sites/www/public/service-worker.js',
    skipWaiting: true,
    clientsClaim: true,
    cleanupOutdatedCaches: true,
    cacheId: genRanHex(),
    mode: mode,
    offlineGoogleAnalytics: mode === 'production',
    globDirectory: './sites/assets/public',
    globPatterns: [
        'img/shell/**/*.{svg,png}',
        'dist/**/*.{js,css}',
        'manifest.json'
    ],
    modifyURLPrefix: {
        'dist/': `${dotEnv.parsed.APPLICATION_ASSETS_CDN}/dist/`,
        'img/shell/': `${dotEnv.parsed.APPLICATION_ASSETS_CDN}/img/shell/`,
    },
    ignoreURLParametersMatching: [/v/],
    additionalManifestEntries: [
        {
            "url": "/offline",
            "revision": genRanHex()
        }
    ],
    runtimeCaching: [
        {
        urlPattern: /^https:\/\/([\w+\.\-]+www\.mysite\.tv)(|\/.*)$/,
        handler: 'StaleWhileRevalidate',
        options: {
            cacheName: 'core',
            precacheFallback: {
                fallbackURL: '/offline' // THIS IS THE KEY
            }
        }
    }
]
}).then(({count, size}) => {
    console.log(`Generated service worker, which will precache ${count} files, totaling ${size} bytes.`);
}).catch(console.error);