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

Question

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

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

到capacitor.config.json并做了

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

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

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

当我的应用程序从设备的文件系统加载时，我怎样才能让 Capacitor 表现得像它一样，特别是我怎样才能让它在这个设置中使用插件的本机版本？

Answer 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 类。）