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

问题描述

我正在尝试使用 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);

解决方法

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

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

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

,

因此，在我误用了 navigationFallback 时，接受的答案是正确的，我试图将其用作非缓存路由的离线后备。经过一番挖掘和修补，我找到了正确的方法。我在 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);