React/WordPress PWA 离线时不响应 200 [英] React/WordPress PWA does not respond with a 200 when offline

问题描述

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

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

CRA(Create React App)的build文件夹位于/wp-content/themes/pwa/build.

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

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

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.

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

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.

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

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.

推荐答案

我终于在W3C.

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

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

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

配置 Apache 为已部署的 Service Worker 提供 Service-Worker-Allowed 标头.

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

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

这篇关于React/WordPress PWA 离线时不响应 200的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！