Как зарегистрировать сервисного работника с помощью webpack?

Я использую веб-приложение ReactJS с помощью webpack, и я хочу начать внедрение рабочего сервиса для обработки сетевых вызовов, чтобы кэшировать файлы. Тем не менее, мне трудно зарегистрировать файл javascript для рабочего пользователя службы. (Я должен добавить, что я новичок, когда дело касается как React, так и webpack.)

Если я получу это правильно, webpack объединяет каждый файл javascript в один файл bundle.js, что затрудняет вызов navigator.serviceWorker.register('./sw.js').... Я пробовал разные подходы, такие как serviceworker-webpack-plugin, но без везения. Если я следую инструкциям на странице readme, я получаю сообщение об ошибке Uncaught Error: serviceworker-webpack-plugin: It seems that your are importing "serviceworker-webpack-plugin/lib/runtime" without using the plugin. Makes sure that your webpack configuration is correct..

Здесь мой файл webpack.config.js:

var webpack = require('webpack');
var path = require('path');
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ['babel-loader'],
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, 'src/sw.js'),
      excludes: [
        '**/.*',
        '**/*.map',
        '*.html',
      ],
      filename: 'sw.js'
    })
  ]
}

Примечание. Я использовал команду create-react-app для продолжения. Кроме того, у меня нет проблем с самим работником службы, у меня есть рабочая реализация для другого веб-приложения. Это просто регистрация, с которой я борюсь.

Любая помощь приветствуется!

Ответ 1

Чтобы удалить ошибку, измените

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

to

var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');

Также обратите внимание, что документация имеет опечатку:

plugins: [
new ServiceWorkerWepbackPlugin({
  entry: path.join(__dirname, 'src/sw.js'),
}),
],

Обратите внимание, что здесь Webpack написано неверно. Он должен быть Webpack вместо Wepback.

Кроме того, в документах указано, что для регистрации Рабочего Рабочего в основном потоке JS используйте следующий код:

import runtime from 'serviceworker-webpack-plugin/runtime';

if ('serviceWorker' in navigator) {
  const registration = runtime.register();
}

Однако при ближайшем рассмотрении кажется, что каталог времени выполнения неверен. Проверка папки node_modules,

Кажется, что runtime.js находится внутри папки lib. Итак, чтобы исправить это, измените

import runtime from 'serviceworker-webpack-plugin/runtime';

к

import runtime from 'serviceworker-webpack-plugin/lib/runtime';

Как только я это сделал, мне удалось установить Service Worker в моей среде dev.

Я все еще изучаю React + Webpack! Также по-прежнему выяснять, как правильно использовать Service Worker в моем приложении React. Я также сообщил автору этого плагина о необходимых изменениях в документации. Надеюсь, это поможет другим!

Ответ 2

Создайте проект с помощью приложения create-response-app, а затем внесите некоторые изменения в package.json для добавления сервисного работника в ваш проект.

Это поможет вам настроить сервис-работника в вашем проекте, и вам не нужно создавать собственную команду для создания приложения-приложения-приложения автоматически.

Пожалуйста, посетите: https://github.com/jeffposnick/create-react-pwa#adding-in-a-github-deployment-step