Workbox Build mit Grunt

Question

Ich benutze Workbox Build mit Grunt Task Runner Service-Worker für meine Anwendung zu generieren. Ich habe versucht, Service-Mitarbeiter damit zu generieren, aber es hat nicht funktioniert. Hier finden Sie den folgenden Codeausschnitt: Gibt es Tutorials oder Code-Snippets, um workbox-build mit grunt task runner zu integrieren?

Aufgabenkonfiguration.

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

Answer 1

Was genau nicht funktioniert? Vorbeugende Injektion? Es sieht so aus, als ob Sie Workbox 2.0 verwenden, während Ihre Grunt-Task auf Workbox 3.0-APIs verweist, z. injectionPointRegexp - Ich denke nicht, dass dies in Workbox 2.0 unterstützt wird. Als Beispiel können Sie sich auf https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest beziehen. Dies gibt ein Versprechen, verwenden Sie then() und catch(), um zu protokollieren und zu sehen, was vor sich geht.