1
私はアプリケーションのサービスワーカーを生成するためにgruntタスクランナーでworkbox buildを使用しています。私はサービスワーカーを作ってみましたが、うまくいきませんでした。以下のコードスニペットをご覧ください ワークショップビルドとgruntタスクランナーを統合するためのチュートリアルやコードスニペットはありますか？Workboxでgruntを使用してビルド
タスクの構成。
grunt.registerTask('generateSW', function() {
grunt.log.writeln("Generate SW",__dirname);
workboxBuild.injectManifest({
swSrc: path.join(__dirname,'frontend','serviceWorker.js'),
swDest: path.join(__dirname,'frontend','serviceWorker.js'),
globDirectory: './build/public/',
globPatterns: ['**\/*.{html,js,css}'],
injectionPointRegexp: /(\.precacheAndRoute\()\s*\[\s*\]\s*(\))/,
staticFileGlobs: [
'./build/public/scripts/*.js',
'./build/public/styles/{,*/}*.css',
'./build/public/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'./build/public/styles/fonts/*',
'./build/public/styles/main.css',
'./build/public/extensions/*.js',
'./build/public/translations/*.json'
],
runtimeCaching: [
{
urlPattern: /\.cdn\.com/,
handler: 'cacheFirst',
options: {
cacheName: 'image-cache',
cacheExpiration: {
maxEntries: 50,
},
},
},
{
urlPattern: /api/,
handler: 'cacheFirst',
options: {
cacheName: 'config-cache',
cacheExpiration: {
maxEntries: 10,
},
},
}
]
})
})
ServiceWorker.js
importScripts('workbox-sw.prod.v2.0.0.js');
const workboxSW = new WorkboxSW();
workboxSW.precache([]);
workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
cacheName: 'googleapis',
cacheExpiration: {
maxEntries: 20
},
cacheableResponse: {statuses: [0, 200]}
})
);
workboxSW.router.registerRoute('http://weloveiconfonts.com/(.*)',
workboxSW.strategies.cacheFirst({
cacheName: 'iconfonts',
cacheExpiration: {
maxEntries: 20
},
cacheableResponse: {statuses: [0, 200]}
})
);
// We want no more than 50 images in the cache. We check using a cache first strategy
workboxSW.router.registerRoute(/\.(?:png|gif|jpg)$/,
workboxSW.strategies.cacheFirst({
cacheName: 'images-cache',
cacheExpiration: {
maxEntries: 50
}
})
);