React w/ Service Worker & Push Notifications

Some initial considerations:

"react": "^16.8.2",
"react-scripts": "2.1.5"

I have created a new react app and I need to implement Push Notifications.
Following this tutorial, I was able to get up and running in 5 minutes, but now I have to implement the same strategy (kinda) into a react app.

The problem I am facing is that I am able to subscribe to the Notification API, but I’m not sure how to edit the service-worker.js file to add an event listener to catch the push event (Handle a Push Event chapter in the google guide)

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Customizing your service worker with Create React App is possible, but could be quite difficult and hacky.

Out of the box, CRA uses Workbox GenerateSW webpack plugin to generate service-worker.js file, and you cannot inject any code to it (you could with [email protected], not any more with since [email protected])

You have several strategies, I’ll start with the simplest one.

Solution 1: provide your own service-worker file

  • in src/index.js enable service worker:
    // serviceWorker.unregister()
    serviceWorker.register()
    
  • in src/serviceWorker.js register your custom file:
    // if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    if ('serviceWorker' in navigator) {
    
    // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
    const swUrl = `${process.env.PUBLIC_URL}/custom-service-worker.js`;
    

    You have to change the name cause when running dev server, CRA provides a mock for service-worker.js

  • in public/ folder, create custom-service-worker.js file. Webpack will copy it as is in the build/ folder

Pros: quick, dirty win

Cons: your custom file is not processed with Webpack (no imports), and you must implement the network caching logic by yourself (assuming you want a PWA) since you’re bypassing Workbox plugins

Solution 2: append your code to generated service-worker

There’s a module for it: cra-append-sw.
You’re in charge to provide the appended code.

Pros: easy setup, takes advantages GenerateSW

Cons: appended code is processed with Babel/Webpack, but not using CRA’s config (you could opt-out). Still use GenerateSW which handle network caching for you. Not sure it works when developing locally

Solution 3: use Workbox in custom service-worker file

  • apply the first 2 steps of solution #1: change src/index.js and src/serviceWorker.js
  • in src/ folder, create custom-service-worker.js file. It will be processed by Webpack, so you can use ES2016/TypeScript syntax and import modules
    /* eslint no-restricted-globals: "off" */
    import * as precaching from 'workbox-precaching'
    // your own imports
    
    if (self.__precacheManifest) {
    precaching.precacheAndRoute(self.__precacheManifest)
    }
    
    // your own code
    
  • install react-app-rewire:
    • npm add --save-dev react-app-rewired
    • in package.json, in "scripts", replace react-scripts with react-app-rewired
  • 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
    }
    }
    

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.

I’ve used the last solution, cause I needed both caching code from Workbox and some import in my service worker file.

react-app-rewire-workbox may help simplifying the Webpack configuration (the one for main app). To be tested.

Method 2

Create React App 4 – Released Oct 2020

Starting with Create React App 4, you have full control over
customizing the logic in this service worker, by creating your own
src/service-worker.js file, or customizing the one added by the
cra-template-pwa (or cra-template-pwa-typescript) template. You can
use additional modules from the Workbox project, add in a push
notification library, or remove some of the default caching logic.

https://create-react-app.dev/docs/making-a-progressive-web-app/#customization


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x