Search code examples
wordpressreactjsservice-workerprogressive-web-appsworkbox

React/WordPress PWA does not respond with a 200 when offline

I am currently trying to build a WordPress theme using React/Redux. Everything is working as expected except for responding with 200 when offline.

The build folder of CRA (Create React App) is located at /wp-content/themes/pwa/build.

When online, WordPress loads the index.php for all routes. This registers the .css and .js from the build folder. Here everything is working as expected.

Im trying to understand how to configure CRA / WorkBox to register the service worker at / and serve all pages using the index.html in the build folder whilst offline.

Full url of index.html: https://example.com/wp-content/themes/pwa/build/index.html

I can provide a link to the demo if required.

Solution

  • I finally solved the problem with some help from W3C.

    Pass scope option in /src/serviceWorker.js of the react app.

    // navigator.serviceWorker.register(swUrl)
navigator.serviceWorker.register(swUrl, {scope: "/"})

    Configure Apache to serve the Service-Worker-Allowed header for the deployed service worker.

    <Files "service-worker.js">
    Header Set Service-Worker-Allowed "/"
</Files>