当 Capacitor 服务器 URL 不可用时显示错误页面

Question

在带有 Capacitor 的 Ionic 项目中，我想通过使用 Capacitor.config.ts 文件中的 url 变量从 Web 视图中的 URL 加载项目：

const config: CapacitorConfig = {
  ...
  webDir: 'www',
  server: {
    androidScheme: 'https',
    iosScheme: 'https',
    cleartext: true,
    url: 'http://192.168.1.54:8081'
  },
  ...
}

我已经能够加载 URL，但如果没有连接，打开应用程序时会出现空白页面。

在这种情况下如何显示错误页面以避免显示空白屏幕？

我尝试了几种解决方案，但没有一个有效。错误页面应该位于本地项目中，而不是在服务器中，但是如果我在配置中使用 URL 服务器构建应用程序，则加载 webview 时所有本地代码都会被忽略，因此我无法访问错误页面。另外我还没有找到任何在运行时更改配置 URL 的解决方案。

Answer 1

有一个

errorPath

配置选项，您可以使用它指定出现错误时要显示的本地 html 页面的路径：

{
  "server": {
    "errorPath": "..."
  }
}

但请记住，

url

配置选项不适用于生产。我建议使用实时更新。它们具有相同的优点（立即提供更新），但缺点却少得多（离线支持……）。