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

Question

我有一个托管的、基于 CMS 的 Web 应用程序，我想将其打包为带有离子电容器的 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() 表示平台是 "web"，而不是 "android"。

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

Answer 1

事实证明，我遇到麻烦的原因是我的页面有一个活跃的服务人员。容量使用 WebViewClient::shouldInterceptRequest for injecting the Javascript code that initializes the bridge to the native world, and Android does not call this callback for requests that a service worker handles. Instead, it has a separate callback for these requests that is available via a 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);
      }
    });
  }

}

然后它按预期工作了。（我还必须将本地服务器的 getter 添加到桥 class。）

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

How to package a hosted web app with Ionic Capacitor

android

capacitor