SuperBluestar / expo-react-native-pwa-template

Workbox Example

npx create-react-native-app -t with-workbox

Workbox is a collection of libraries for creating and managing powerful web service workers. Service workers can be used to add offline support to websites.

This example is based on the create-react-app PWA guide, with native escape hatches added.

🚀 How to use

Creating a new project

• Install the CLI: npm i -g expo-cli
• Create a project: npx create-react-native-app -t with-workbox
• cd into the project

Testing the service worker

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.

• expo build:web

• Host the files locally with yarn serve

  • 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

Service workers are disabled in development in three places:

• The custom Webpack dev server adds a noop service worker on /service-worker.js to prevent collisions from other projects on your computer.
• The webpack.config.js skips adding the injection plugin unless the environment is production (expo build:web)
• The src/serviceWorkerRegistration.js register method checks to ensure the app is running in production.

You may find that your website doesn't update by default when refreshing the page. You might need to ensure that no other tabs on your computer are open to the website. This is just one of many pitfalls that you need to consider when using service workers.

📝 Notes

• create-react-app PWA guide
• workbox docs
• Enabling service workers in Expo web