0

按照此处工作箱 gulp 示例的安装说明https://developers.google.com/web/tools/workbox/get-started/gulp

gulp.task('generate-service-worker', () => {
        return workbox.generateSW({
            globDirectory: buildDir,
            globPatterns: ['**\/*.{html,png,css,js,ico,eot,svg,ttf,woff,woff2,jpg,json}'
            // swSrc: 'sw.js', isn't working in generator
            swDest: buildDir+`/sw.js`,
            clientsClaim: true,
            skipWaiting: true
        }).then(() => {
            console.info('Service worker generation completed.');
        }).catch((error) => {
            console.warn('Service worker generation failed: ' + error);
        });
    });

一切都运行得很好。

但是现在我想为我的软件生成添加一个外部源。

这里写了如何将外部谷歌字体源添加到服务工作者脚本：https ://developers.google.com/web/tools/workbox/next/

我不确定如何在 gulp 中将其添加到我的生成器中。

我认为它可以像那个选项一样工作：

globPatterns: ['**\/*.{html,png,css,js,ico,eot,svg,ttf,woff,woff2,jpg,json}','^https://fonts.(?:googleapis|gstatic).com/(.*)'],

我还尝试在该选项中包含自定义脚本。但发电机不可能。说一个错误。

swSrc: 'sw.js',

我是否需要第二个自定义服务人员来处理我的 gulp 脚本之外的外部资源？

编辑

也许我会在这里找到答案：Workbox build with grunt

4

1 回答 1

0

很抱歉回答你自己的问题。

是的，您可以通过像这样更改 gulp 脚本来添加：

gulp.task('generate-service-worker', () => {
    return workbox.generateSW({
        globDirectory: buildDir,
        globPatterns: ['**\/*.{html,png,css,js,ico,eot,svg,ttf,woff,woff2,jpg,json}'],
        runtimeCaching: [
            {
                urlPattern: new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
                handler: 'cacheFirst',
                options: {
                    cacheName: 'font-cache',
                    cacheExpiration: {
                        maxEntries: 10,
                    },
                },
            }
        ],
        swDest: buildDir+`/sw.js`,
        clientsClaim: true,
        skipWaiting: true
    }).then(() => {
        console.info('Service worker generation completed.');
    }).catch((error) => {
        console.warn('Service worker generation failed: ' + error);
    });
});

这会将使用过的外部谷歌字体添加到缓存中。

于 2018-01-24T11:17:32.760 回答