微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何使用Service Worker的workbox-build生成带有版本控制的预定义清单

我正在尝试配置 workBox-build 来创建服务工作程序( generateSW )或将清单( injectManifest )注入到现有服务人员基于 预定义URL列表 而不是模式匹配,以便在 preCache 上使用特定资源应用加载。

不是这样的:

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,totaling ${size} bytes.`);
});

这样,自动生成的服务工作程序将包含类似于以下内容的清单:

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

当资源发生更改时,修订会在构建期间进行更新,以便在下次加载时使浏览器中的缓存无效。

谢谢!

解决方法

没有任何通配符的glob pattern应该与文字文件名匹配。通过将这些文件名用作传递给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.`);
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。