用咕噜声构建工作箱 [英] Workbox build with grunt

问题描述

我正在使用带有grunt任务运行器的工作箱构建来为我的应用程序生成服务工作者。我试着用它来产生服务人员，但它没有奏效。请找到下面的代码片段
是否有任何教程或代码片段将工作箱 - 构建与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}']，
 injectPointRegexp： /(\.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 /，
处理程序：'cacheFirst'，
选项：{
 cacheName：'image-cache'，
 cacheExpiration：{
 maxEntries：50， 
}，
}，
}，
 {
 urlPattern：/ api /，
处理程序：'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：{status：[0，200]} 
}）
）; 
 
 workboxSW.router.registerRoute（'http://weloveiconfonts.com/（。*）'，
 workboxSW.strategies.cacheFirst（{
 cacheName：'iconfonts'， 
 cacheExpiration：{
 maxEntries：20 
}，
 cacheableResponse：{status：[0，200]} 
}）
）; 
 
 //我们希望缓存中不超过50张图片。我们使用缓存优先策略检查
 workboxSW.router.registerRoute（/ \。（?: png | gif | jpg）$ /，
 workboxSW.strategies.cacheFirst（{
 cacheName： 'images-cache'，
 cacheExpiration：{
 maxEntries：50 
} 
}）
）; 
  

解决方案

什么都不起作用？ Precache注射？看起来您正在使用Workbox 2.0，而您的grunt任务引用了Workbox 3.0 API，例如 injectPointRegexp - 我不认为这在Workbox 2.0中受支持。
例如，您可以参考 https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest 。这将返回Promise，使用 then（）和 catch（）来记录并查看发生了什么。

I'm using workbox build with grunt task runner to generate service worker for my application. I tried generating service worker with it, but it didn't work. Please find the below code snippet Is there any tutorials or code snippet to integrate workbox-build with grunt task runner.

Task Configuration.

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
    }
  })
);

解决方案

What exactly didn't work? Precache injection? It looks like you are using Workbox 2.0 while your grunt task refers Workbox 3.0 APIs, e.g. injectionPointRegexp - I don't think this is supported in Workbox 2.0. As an example, you could refer https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest. This returns a Promise, use then() and catch() to log and see what's going on.

这篇关于用咕噜声构建工作箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！