如何使用 Ionic Capacitor 打包托管 Web 应用程序答案

【问题标题】：How to package a hosted web app with Ionic Capacitor如何使用 Ionic Capacitor 打包托管 Web 应用程序
【发布时间】：2019-09-17 13:37:39
【问题描述】：

我有一个托管的、基于 CMS 的 Web 应用程序，我想用 Ionic Capacitor 将它打包为 Android / iOS 应用程序。所以我加了

  "server": {
    "url": "https://my.domain/"
  },

到电容器.config.json 并做了

import { Capacitor, Plugins } from '@capacitor/core';

console.log('Plugins', Capacitor.Plugins);

在我的应用程序的主要 Javascript 文件中（我使用 webpack 进行捆绑）。这基本上是有效的，即应用程序被正确加载和显示。但在控制台上，我看到 Capacitor 加载了插件的 Web 版本，Device.getInfo() 说平台是“web”，而不是“android”。

如何让 Capacitor 像从设备的文件系统加载我的应用时一样，特别是如何让它在此设置中使用插件的本机版本？

【问题讨论】：

我可能是捆绑器的一些问题。如果您使用没有捆绑器的插件（常规Capacitor.Plugins.Device.getInfo()），您会得到相同的结果吗？无论如何，我建议不要指向应该用于开发的 url（即指向本地实时重新加载服务器），而不是指向网站。
@jcesarmobile 谢谢。我可能找到了原因（仔细检查后会写一个答案）：我在模拟器中使用本地服务器对此进行了测试，出于某种原因，Android 没有为 10.0.2.2 调用 shouldInterceptRequest() （这是模拟器的 IP主持人）。所以 JS 注入在这种特殊情况下不起作用——除非你通过模拟器的 hosts 文件给这个 IP 命名。 --- 对于将 CMS 驱动的动态站点（想想报纸）加载到应用程序中，而不是指向远程服务器，您有什么建议？在本地 index.html 中设置 location.href？
你不必使用10.0.2.2，但你的服务器的本地IP。我不建议嵌入动态站点，而是建议在您的应用程序中使用本地资产并使用 XHR/fetch 获取内容更新或提要。 Apple 不允许嵌入网站，我认为 Google Play 也会因此拒绝应用程序。
@jcesarmobile 在开发过程中 10.0.2.2 是我的服务器的本地 IP。无论如何，真正的原因最终是别的，看我的回答。总的来说，我分享您对嵌入网站的担忧，但客户至少希望以这种方式尝试。我们将添加更多功能（例如推送、离线页面），并希望通过这种方式满足 Apple 提供“不仅仅是一个打包的网站”的要求。感谢您的回复！你认为 localServer 的 getter 对 Capacitor 的 Bridge 类有很好的增强作用吗？
听起来很有帮助，您要发送拉取请求吗？

标签： android capacitor

【解决方案1】：

事实证明，我的页面有一个活跃的服务人员是我遇到麻烦的原因。 Capacity 使用WebViewClient::shouldInterceptRequest 注入初始化连接到原生世界的 Javascript 代码，Android 不会为 service worker 处理的请求调用此回调。相反，它为这些请求提供了单独的回调，可通过ServiceWorkerController 获得。

所以我所做的就是创建自己的小插件：

@NativePlugin
public class ServiceWorker extends Plugin {

  @RequiresApi(api = Build.VERSION_CODES.N)
  @Override
  public void load() {
    ServiceWorkerController swController = ServiceWorkerController.getInstance();

    swController.setServiceWorkerClient(new ServiceWorkerClient() {
      @Override
      public WebResourceResponse shouldInterceptRequest(WebResourceRequest request) {
        return bridge.getLocalServer().shouldInterceptRequest(request);
      }
    });
  }

}

然后它按预期工作。（我还必须将 localServer 的 getter 添加到 Bridge 类中。）

【讨论】：