React/WordPress PWA 在离线时不响应 200

Question

我目前正在尝试使用 React/Redux 构建 WordPress 主题。除了在离线时响应 200 之外，一切都按预期工作。

CRA（Create React App）的构建文件夹位于/wp-content/themes/pwa/build。

在线时，WordPress 会为所有路由加载 index.php。这会从 build 文件夹中注册 .css 和 .js。这里一切都按预期工作。

我试图了解如何配置 CRA / WorkBox 以在 / 注册服务工作者并在离线时使用 build 文件夹中的 index.html 为所有页面提供服务。

index.html 的完整 url：https://example.com/wp-content/themes/pwa/build/index.html

如果需要，我可以提供 link 给演示。

Answer 1

在 W3C 的帮助下，我终于解决了这个问题。

在 React 应用的 /src/serviceWorker.js 中传递 scope 选项。

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

配置 Apache 为已部署的 Service Worker Service-Worker-Allowed header 提供服务。

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

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