В этом посте вы научитесь создавать Workbox с помощью Grunt.

Шаг 1: Установите Workbox

npm install workbox-build --save-dev

Шаг 2. Добавьте Workbox в процесс сборки Grunt.

  1. Открыть Gruntfile.js
  2. Установите плагин Workbox.
npm i workbox-build --save-dev

3. В Gruntfile.js

let workbox = require('workbox-build');

3. Добавьте задачу для создания сервисного работника с помощью Workbox.

grunt.initConfig({
      gulp: {
          generateSW : function() {
              return workboxBuild.generateSW({
                  globDirectory: './src/js',
                  globPatterns: [
                      '**\/*.{html,json,js,css,png,jpg,svg,gif}',
                  ],
                  swDest: './src/main/js/sw.js'
              });
          }
      }
  });
});

4. Установите плагин grunt-gulp.

npm i grunt-gulp --save-dev

5. Загрузите плагин в Gruntfile.js

grunt.loadNpmTasks('grunt-gulp');

6. Зарегистрируйте задачу generateSW

grunt.registerTask('default', ['gulp:generateSW']);

7. Запустите с помощью команды grunt.

Наконец, ваш код должен понравиться этому