与服务人员互动推送通知

问题描述

一些初始注意事项：

 c>  
 

npm add --save-dev react-app-rewired
in package.json, in "scripts", replace react-scripts with react-app-rewired

调整webpack配置：在根文件夹中创建 config-overrides.js ：
tweak webpack configuration: create config-overrides.js in root folder:
const WebpackBeforeBuildPlugin = require('before-build-webpack')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const path = require('path')
const merge = require('lodash.merge')
const fs = require('fs')

// from https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/
class WaitPlugin extends WebpackBeforeBuildPlugin {
constructor(file, interval = 100, timeout = 60e3) {
 super(function(stats, callback) {
   const start = Date.now()

   function poll() {
     if (fs.existsSync(file)) {
       callback()
     } else if (Date.now() - start > timeout) {
       throw Error(`Couldn't access ${file} within ${timeout}s`)
     } else {
       setTimeout(poll, interval)
     }
   }
   poll()
 })
}
}

const swOutputName = 'custom-service-worker.js'
const workerSource = path.resolve(__dirname, 'src', swOutputName)

module.exports = {
webpack: (config, env) => {
 // we need 2 webpack configurations:
 // 1- for the service worker file.
 //    it needs to be processed by webpack (to include 3rd party modules), and the output must be a
 //    plain, single file, not injected in the HTML page
 const swConfig = merge({}, config, {
   name: 'service worker',
   entry: workerSource,
   output: {
     filename: swOutputName
   },
   optimization: {
     splitChunks: false,
     runtimeChunk: false
   }
 })
 delete swConfig.plugins

 // 2- for the main application.
 //    we'll reuse configuration from create-react-app, without a specific Workbox configuration,
 //    so it could inject workbox-precache module and the computed manifest into the BUILT service-worker.js file.
 //    this require to WAIT for the first configuration to be finished
 if (env === 'production') {
   const builtWorkerPath = path.resolve(config.output.path, swOutputName)
   config.name = 'main-application'
   config.plugins.push(
     new WorkboxWebpackPlugin.InjectManifest({
       swSrc: builtWorkerPath,
       swDest: swOutputName
     }),
     new WaitPlugin(builtWorkerPath)
   )
 }

 // remove Workbox service-worker.js generator
 const removed = config.plugins.findIndex(
   ({ constructor: { name } }) => name === 'GenerateSW'
 )
 if (removed !== -1) {
   config.plugins.splice(removed, 1)
 }

 const result = [swConfig, config]
 // compatibility hack for CRA's build script to support multiple configurations
 // https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js#L119
 result.output = { publicPath: config.output.publicPath }
 return result
}
}
  
 
  优点 ：您可以在service-worker文件中使用ES2016 / TypeScript代码。您仍然可以从Workbox网络缓存功能中受益，对其进行完全控制
Pros: you can use ES2016/TypeScript code in service-worker file. You still benefit from Workbox network caching facilities, with total control on it
  缺点 ：复杂而脆弱，因为
Cons: complicated and fragile, because of the multiple configuration hack.
我使用了最后一个解决方案，因为我既需要从Workbox缓存代码，又需要一些 import 在我的服务工作者文件中。
I've used the last solution, cause I needed both caching code from Workbox and some import in my service worker file.
 可能有助于简化Webpack配置（用于主应用程序的配置）。要测试。
react-app-rewire-workbox may help simplifying the Webpack configuration (the one for main app). To be tested.
                        
这篇关于与服务人员互动推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！