enabling-web-service-workers.md

Enabling web service workers

Start from a template: npx create-react-native-app -t with-workbox

Expo's Webpack config has is capable of generating icons, splash screens, manifests, and metadata for your progressive web app based on the app.json and other configuration used for your native app. However, the offline support must be added to your Webpack config manually.

1. Install the required Workbox dependencies: package.json
2. Create a local webpack.config.js in your project: npx expo customize webpack.config.js
3. Copy the template webpack.config.js
4. Create the src/service-worker.js and src/serviceWorkerRegistration.js (the file path is important).

• Optionally, you can create a noop file for native.

5. In your App.js (or other entry file) import the registration and invoke the register method.

Testing

The service worker is disabled in development and requires that you build the app for production and host locally to test.

• Check to make sure you are invoking serviceWorkerRegistration.register(); and not serviceWorkerRegistration.unregister(); in your ./App.js.

• npx expo export -p web

• Host the files locally with npx serve web-build

  • This uses serve CLI to host your /web-build folder.

• Open: http://localhost:5000/

• In chrome, you can hard reset the service workers with ⌘+shift+R

Considerations

• Offline support can be confusing for many because the website will only update if all tabs and windows with your website are closed. Often it's easier to just force refresh (⌘+R).
• Service workers can only be run from a secure origin (https). This doesn't apply to localhost.
• The service worker will be disabled in development mode. You can test it by building the project locally expo build:web and running the project from a local https server.

Deprecated Guide

🚨 This is the deprecated guide for @expo/webpack-config@<=0.13.3. Here is the PR that removed service worker support. You can use the manual setup with any version of @expo/webpack-config and we highly recommend doing that.

Expo's Webpack config has all the required plugins for building a progressive web app, but the offline support is disabled by default starting in Expo SDK 39.

To enable offline support you can do the following:

• Generate the Webpack config:
  • Run npx expo customize webpack.config.js
• Modify the config file and pass the option offline: true to the creator method.

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      // Passing true will enable the default Workbox + Expo SW configuration.
      offline: true,
    },
    argv
  );
  // Customize the config before returning it.
  return config;
};