React CLI missing serviceWorker parameter

[igamidanes]

As is an option for angular: https://nx.dev/previous/react/cli/build#serviceworker

Description

It would be expected to have PWA support with react apps as well.

Motivation

I see no reason why this option would be denied.

[mattgibb]

Amazing! This would be great

[adrigardi90]

Any plan to add serviceWorker support any time soon? I'd say that's fundamental. Any alternative in the meantime?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[igamidanes]

Bump

[xelaos]

Is there any way to use service workers without it?

[TriPSs]

@xelaos Yes, create a custom webpack config like this:

const nxReactBaseConfig = require('@nrwl/react/plugins/webpack')
const mergeWebpack = require('webpack-merge')
const { InjectManifest } = require('workbox-webpack-plugin')
const path = require('path')

module.exports = function(webpackConfig, nxConfig) {
  // Fix that Nx uses a different attribute when serving the app
  nxConfig.options = nxConfig.options || nxConfig.buildOptions
  const config = nxReactBaseConfig(webpackConfig)

  const mergeWebpackConfigs = [config]

  // For production we add the service worker
  if (config.mode === 'production') {
    mergeWebpackConfigs.push({
      plugins: [
        new InjectManifest({
          swSrc: path.resolve(
            nxConfig.options.root,
            nxConfig.options.sourceRoot,
            './service-worker/service-worker-workbox.ts'
          ),
          // this is the output of the plugin,
          // relative to webpack's output directory
          swDest: 'service-worker.js'
        })
      ]
    })
  }

  return mergeWebpack(mergeWebpackConfigs)
}

And the service-worker/service-worker-workbox.ts inside the project root:

/// <reference lib="webworker" />
import { precacheAndRoute } from 'workbox-precaching'
import { clientsClaim } from 'workbox-core'
import { setCacheNameDetails } from 'workbox-core'

// ServiceWorkerGlobalScope is a type from the workbox-precaching module
declare const self: Window & ServiceWorkerGlobalScope

setCacheNameDetails({
  prefix: 'project name',
  suffix: 'v1'
})

// Tells the Service Worker to skip the waiting state and become active.
self.skipWaiting()

// Will make the Service Worker control the all clients right away
// (even if they're controlling other tabs or windows). Without this,
// we could be seeing different versions in different tabs or windows.
clientsClaim()

// Download and cache all the files webpack created
const precacheManifest = [].concat(self.__WB_MANIFEST || [])
precacheAndRoute(precacheManifest)

[xelaos]

@TriPSs Thank you very much for your help.

I used the custom webpack config and added the service-worker-workbox.ts, but I still don't quite get it to work.
Now I just get the content of the service-worker/service-worker-workbox.ts file as a service-worker.js file which leads to Uncaught SyntaxError: Cannot use import statement outside a module in the react app.
I guess I miss something totally obvious here but I don't know what.

[TriPSs]

@xelaos sorry, you also need to add this to the main.ts (or other start point) to load the service worker:

 if (NODE_ENV === 'production') {
   window.addEventListener('load', () => {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/service-worker.js')
     }
   })
 }

[xelaos]

Yes, I did that, there the error occurs I mentioned above.
This works for me I guess:

const mergeWebpack = require('webpack-merge')
const { InjectManifest, GenerateSW } = require('workbox-webpack-plugin')
const path = require('path')

module.exports = function(webpackConfig, nxConfig) {
  // Fix that Nx uses a different attribute when serving the app
  nxConfig.options = nxConfig.options || nxConfig.buildOptions
  const config = nxReactBaseConfig(webpackConfig)

  const mergeWebpackConfigs = [config]

  // For production we add the service worker
  if (config.mode === 'production' ) {
    mergeWebpackConfigs.push({
      plugins: [
        new GenerateSW({
          // swSrc: path.resolve(
          //   nxConfig.options.root,
          //   nxConfig.options.sourceRoot,
          //   './service-worker/service-worker-workbox.ts'
          // ),
          // this is the output of the plugin,
          // relative to webpack's output directory
          swDest: 'service-worker.js'
        })
      ]
    })
  }

  return mergeWebpack(mergeWebpackConfigs)
}

Since it creates a service-worker.js file like this:

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "precache-manifest.572ae019ffef6e04d6e0e1d1fefc22ff.js"
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

The other version you outlined above just duplicated the code of the service-worker-workbox.ts file.
However, thank you very much, since without you I didn't even come this far.

[TriPSs]

@xelaos It indeeds duplicates it but also injects all the files that where compiled with webpack, that is where these lines are for:

const precacheManifest = [].concat(self.__WB_MANIFEST || [])
precacheAndRoute(precacheManifest)

I'm not quite sure why you get an error with the other one, here its working fine.

[dngconsulting]

Hi,
Is there any news on serviceWorker support without having to hack this custom webpack config ?
Thanks

[arumals]

Is there a plan to make this part of the react application generation? This is a big missing compared to create-react-app.

[cafesanu]

any news?

[itmaxxx]

Updates?

[PranavGPR]

Is there any plans to include service worker support ?

[Crocsx]

Bump to prevent stale. This is a major feature nowadays, and would be nice to have it built in.

[jabidof]

Totally agree!

[zaunermax]

Our team also ran into this just now - support for this would be phenomenal 🙌

[jabidof]

Ready to test on our apps...

[Milananas]

No updates I'm afraid? Also running into this, would be great if this is now possible.

[w8ze-devel]

Bump

[alexiusp]

I'm also missing this feature. Will try to implement something custom made for now, but support out of the box would be great to have in future.

[FrozenPandaz]

I've moved this to the discussion boards as there are more github features for discussions and feature requests there.

I still think this would be a good feature. Since this discussion first started, we've also added more ways to build React apps via Vite. Let's keep discussing for ways people would like this feature to be implemented.

cc @jaysoo