How to add support for PWA

[alexandre1921]

I'm having issues with metro when I make a build of my application my service-worker isn't created, I'm using react native web and I don't know how to use a plugin from workbox with metro, currently I am using the example from expo about PWA.

[Kmilasc]

up!

[Flip32]

up!

[omariosouto]

up

[marklawlor]

The guide linked is deprecated and should not be followed (as stated at the bottom). You should be following the documentation on the website. https://docs.expo.dev/guides/progressive-web-apps/

However, the Expo documentation is for setting up PWAs with Expo Web (using Webpack). Expo Router uses Metro, which doesn't have first-class support for PWA/Workbox.

You can still use it, you will just need to do the setup manually as if you weren't using a framework or a bundler, just a vanilla HTML project. You can edit the root html file to include the scripts you need.

[Bastianowicz]

do you have a running example somewhere? I would love to see it

[oliviercperrier]

yes, i running example would be helpfull

[Bastianowicz]

I have managed to have a working setup. In a nutshell what I do during deploy do is:

1. expo export -p web build the app (without service worker so far. service-worker lives in a different directory)
2. workbox-cli injectManifest --config workbox-config.js build the service-worker file and fill it with all the data from the built web app. My workbox config points to the source service-worker.js file as well as to the destination. This destination is just an intermediate location for step 3. so chose any place you deem suitable.
3. metro build public/service-worker.js -O dist/service-worker.js bundle the generated service-worker file so it works in browsers. the output should go to your final destination that is going to be deployed (i.e. the destination of expo export in step 1)

Maybe this helps someone.