首页 > 解决方案 > 是否可以直接从 React PWA 中的地址栏访问 Web 服务?

问题描述

我正在开发一个已转换为 PWA 的 React Web 应用程序,它运行良好。但是,当我尝试通过在浏览器的地址栏中键入直接调用 Web 服务(例如https://www.somewebsite.com/api/someController?parametersHere)时,它会返回一个空白屏幕并且什么也没有发生。我是否需要更改清单中的某些内容或添加一些侦听器以绕过阻止具有“/api/”的路由触发 Web 服务的侦听器?

我正在阅读清单,我在其中添加了一个范围,但不确定应该是什么样子,但以如下方式添加它会在浏览器控制台的“应用程序”选项卡中呈现一些警告。

{
  "short_name": "MyApp",
  "name": "MyApp",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "scope": "/api/"
}

它导致了这个警告。

在此处输入图像描述

我还在 react-router-dom 中添加了一个路由,它会监听“/api/”,以防万一,但它也没有任何效果。

标签: reactjsprogressive-web-appsreact-router-dom

解决方案


我仍然没有找到问题的罪魁祸首,但我确实找到了解决该问题的方法。首先,我Route在 routes.tsx 中添加了一个新组件,它将调用另一个 React 组件,在该组件中我通过 redux-saga 触发了 Web 服务调用。


推荐阅读