Workbox-build 不会添加到服务工作者**一些**的预缓存 url（但会添加其他）答案

【问题标题】：Workbox-build doesn't add to service worker **some** of precache urls (but does add others)Workbox-build 不会添加到服务工作者**一些**的预缓存 url（但会添加其他）
【发布时间】：2020-01-10 20:17:56
【问题描述】：

我有一个 Angular 8 项目，在使用 angular-cli 构建后输出到多个捆绑文件：

chunk {0} 0.86bbf5c9edb63f626a71.js () 45.4 kB  [rendered]
chunk {1} runtime.b7f5cba16f3e526a1461.js (runtime) 2.44 kB [entry] [rendered]
chunk {2} 2.2ecd18f83cbcdc2f41b1.js () 30.8 kB  [rendered]
chunk {3} 3.3c6f6cac43c897221001.js () 66.7 kB  [rendered]
chunk {4} common.47e8c0f35a6b18d38d74.js (common) 3.78 kB  [rendered]
chunk {5} 5.a2ada2def205b6dd2266.js () 2.1 MB  [rendered]
chunk {6} main.7eef8fe96731a01550cd.js (main) 416 kB [initial] [rendered]
chunk {7} polyfills.ad9a67987ca4da80a52a.js (polyfills) 36.4 kB [initial] [rendered]
chunk {8} styles.8727807d7b65fa51a4c7.css (styles) 598 kB [initial] [rendered]
chunk {9} vendor.17d6b0cb2434f0d8397d.js (vendor) 2.87 MB [initial] [rendered]
chunk {10} 10.f7fd6c136990dd6fca53.js () 571 kB  [rendered]
chunk {11} 11.6d02f073f8b0d383d045.js () 19.9 kB  [rendered]
chunk {12} 12.84e1a02b9b9f7f159775.js () 9.92 kB  [rendered]
chunk {13} 13.d7ede168008c6b29a08c.js () 8.71 kB  [rendered]
chunk {14} 14.e8d9110fbb4072ef19df.js () 3.67 kB  [rendered]
chunk {15} 15.f6088492832d55965c5f.js () 29.9 kB  [rendered]

我使用 Workbox 4 使用服务工作者 (AppShell) 在客户端缓存捆绑包。

我使用 workbox-build 包让 service worker 知道它必须预缓存哪些文件名（以及最终的 url）。

Workbox-build 在我调用 npm run build 时用实际文件名补充给定的服务工作者文件（ng build --prod && node workbox-build -inject.js，其中 workbox-build-inject.js 包含补充默认服务工作者文件的说明）。

我的workbox-build-inject.js：

    const { injectManifest } = require('workbox-build')

    let workboxConfig = {
        globDirectory: 'dist',
        globPatterns: [
            '*.js',
            '*.css',
            'favicon.ico',
            'index.html',
        ],
        swSrc: 'src/service-worker.js',
        swDest: 'dist/service-worker.js'
    }

    injectManifest(workboxConfig)
    .then(({
        count,
        size
    }) => {
        console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
    })

构建项目后补充service-worker.js出现在我的dist/文件夹中。

// We inject manifest here using "workbox-build" in workbox-build-inject.js
workbox.precaching.precacheAndRoute([
  {
    "url": "0.86bbf5c9edb63f626a71.js",
    "revision": "c57834e89d94af468bc665e4040137ba"
  },
  {
    "url": "10.f7fd6c136990dd6fca53.js",
    "revision": "f26476084572d2c5252d97ffdde9e24a"
  },
  ...

此文件包含所有捆绑包，但 vendor.17d6b0cb2434f0d8397d.js 和 5.a2ada2def205b6dd2266.js 尽管它们符合规则 "*.js" 来自 workbox-build-inject.js。

那么我的构建过程或工作箱配置有什么问题？

【问题讨论】：

标签： angular service-worker progressive-web-apps workbox

【解决方案1】：

事实证明，service-worker.js 中没有包含两个文件的原因是文件大小（均超过 2Mb）。

根据 workbox-build docs 有 maximumFileSizeToCacheInBytes 参数：

maximumFileSizeToCacheInBytes：可选数字，默认为 2097152

此值可用于确定文件的最大大小将被预缓存。这可以防止您无意中预缓存非常大的文件可能不小心匹配了您的一个模式。

例子：
// Increase the limit to 4mb:
maximumFileSizeToCacheInBytes: 4 * 1024 * 1024

所以这里修复了 workbox-build-inject.js：

    const { injectManifest } = require('workbox-build')

    let workboxConfig = {
        globDirectory: 'dist',
        globPatterns: [
            '*.js',
            '*.css',
            'favicon.ico',
            'index.html',
        ],
        swSrc: 'src/service-worker.js',
        swDest: 'dist/service-worker.js',
        // Custom size limit
        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
    }

    injectManifest(workboxConfig)
    .then(({
        count,
        size
    }) => {
        console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
    })

【讨论】：