为什么我的 Workbox GenerateSW 在连接时显示我的离线页面? [英] Why is my Workbox GenerateSW showing my offline page while connected?

问题描述

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

I'm trying to setup my offline page using Workbox GenerateSW() and running into an issue where on the first load after I clear site data and hard refresh displays my homepage, but on subsequent loads I am getting the offline page I set up even though I'm online. I have a multi page PHP app that has the assets served up by a CDN. I run the GenerateSW() task in a JS file called by an npm node script.

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

Here is my GenerateSW() code...

// 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 实际上并不是离线页面.来自 工作箱文档:

navigateFallback is not actually offline page. From workbox docs:

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

If specified, all navigation requests for URLs that aren't precached will be fulfilled with the HTML at the URL provided. You must pass in the URL of an HTML document that is listed in your precache manifest. This is meant to be used in a Single Page App scenario, in which you want all navigations to use common App Shell HTML.

对于离线页面，这个问题可能会有所帮助.

For offline page, this question might help.

这篇关于为什么我的 Workbox GenerateSW 在连接时显示我的离线页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！