脱机时工作箱不工作，一些 .svg 图标导致 net::ERR_INTERNET_DISCONNECTED

编程问答 2022-05-23

问题描述

图书馆受影响： 工作箱-sw 4.3.1

浏览器和平台： 所有浏览器

问题或功能请求说明： globPatterns 不起作用

workBox-config.js：

module.exports = {
  globDirectory: "dist/",globPatterns: [
    "**/*.{txt,svg,png,ico,html,js,json,css}"
  ],globIgnores: [
    '3rdpartylicenses.txt','favicon.ico','manifest.json','assets/icons/**','assets/images/**','pdfjsWorker.**.js','favicon-16x16.png','favicon-32x32.png',],swSrc: "sw/sw-default.js",swDest:"sw/sw-injected.js"

};

workBox-build-inject.js:

const {injectManifest} = require('workBox-build');

// We reuse the configuration from WorkBox CLI
var workBoxConfig = require('./workBox-config.js');

// Adding one extra property
workBoxConfig.swSrc = 'sw/sw-default.js';

// Deleting unneeded property
delete workBoxConfig.runtimeCaching;

// Genrate manifest file ang inject them into the precache entry of the sw-default.js file
injectManifest(workBoxConfig)
  .then(({count,size}) => {
    console.log(`Generated ${workBoxConfig.swDest},which will precache ${count} files,totaling ${size} bytes.`)
  });

运行这个命令：

npm run workBox-build-inject

给我：

Generated sw/sw-injected.js,which will precache 46 files,totaling 2464057 bytes.

如果我从 workBox-config.js 中删除 globPatterns 数组并再次运行该命令，它会给我：

Generated sw/sw-injected.js,which will precache 8 files,totaling 2362657 bytes.

globPatterns 数组将 38 个文件添加到缓存中。

但是，如果我将 PWA 应用程序脱机，一些应该缓存的 svg 文件会导致以下错误： 浏览器的控制台输出：

polyfills-es2015.660…617b89c20560bc.js:1 GET https://<domain here>/assets/closeIcon.svg net::ERR_INTERNET_disCONNECTED

我该如何解决这个问题？ 在我看来，workBox-config 似乎已正确设置为缓存所有 svg 文件？ 为什么这对文件“closeIcon.svg”不起作用？ 其他 svg 文件工作正常。

closeIcon.svg 和所有其他 svg 文件都在 sw-injected.js 中的 precaching.precacheAndRoute 数组中

请指教。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

assetsassetsassetsbrowser-cachecachingcachingsvgsvgsvgworkbox