Сборка рабочего ящика с ворчанием

Question

Я использую workbox build с grunt task runner для создания сервисного работника для моего приложения. Я попытался создать работника службы с этим, но это не сработало. Пожалуйста, найдите приведенный ниже фрагмент кода. Существуют ли какие-либо учебные пособия или фрагмент кода, позволяющие интегрировать сборку с помощью workbox и grunt task runner.

Конфигурация задачи.

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

Что именно не сработало? Precache инъекция? Похоже, что вы используете Workbox 2.0, в то время как ваша основная задача относится к API-интерфейсам Workbox 3.0, например injectionPointRegexp - Я не думаю, что это поддерживается в Workbox 2.0. Например, вы можете обратиться к https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build. Это возвращает обещание, используйте then() а также catch() войти и посмотреть, что происходит.