时间戳

首页 > 解决方案 > 如何使用 Workbox-build 为 Service Worker 生成带有版本控制的预定义清单

service-worker - 如何使用 Workbox-build 为 Service Worker 生成带有版本控制的预定义清单

问题描述

我正在尝试配置workbox-build以创建服务工作者（generateSW ）或根据预定义的 URL 列表而不是模式匹配向现有服务工作者注入清单（injectManifest ），以便在应用程序加载时预缓存特定资源.

不是这样的：

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

const swDest = 'app/cache-sw.js';
generateSW({
    globDirectory: "app/",
    globPatterns: [
        "**/*.{html,js,png,css,json,txt,ico,config}"
    ]
    swDest
}).then(({ count, size }) => {
    console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

但像这样：

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

const swDest = 'app/cache-sw.js';
generateSW({
    globDirectory: "app/",
    manifestURLs: [
        "/index.html",
        "/favicon.ico",
        "/info.txt",
        ...
    ],
    swDest
}).then(({ count, size }) => {
    console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

这样自动生成的 service worker 就会包含一个类似这样的清单：

[
        {
            "url": "/index.html",
            "revision": "487659b6e9c542e7cd8227e0e9d0bed1"
        },
        {
            "url": "/favicon.ico",
            "revision": "29459c5d9c542e7cd8227e0e9d0if83"
        },
        {
            "url": "/info.txt",
            "revision": "73932c5d9c542e7cd8227e0e9z7el19"
        },
        ...
]

并且在构建期间资源更改时会更新修订，以便下次加载时浏览器中的缓存无效。

提前致谢！

标签： service-workerworkboxcache-manifestsw-precache

解决方案

没有任何通配符的glob模式应该匹配文字文件名。您应该能够通过使用这些文件名作为传递给的值来完成您描述的内容globPatterns：

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

const swDest = 'app/cache-sw.js';
generateSW({
    globDirectory: "app/",
    globPatterns: [
        "index.html",
        "favicon.ico",
        "info.txt",
        ...
    ]
    swDest
}).then(({ count, size }) => {
    console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

推荐阅读