无法使用脚本 ('http://localhost/service-worker.js') 为范围 ('http://localhost/') 注册 ServiceWorker

Question

我正在尝试将我的 vue pwa 项目转换为具有 capacitor 的 android 项目。

这是我遵循的步骤。

首先将pwa添加到我的vue项目中并构建它

vue add @vue/pwa
npm run build

此时应用作为 pwa 运行，具有 serviceworker 和离线支持。然后我添加了电容器并转换为 android project

npm install --save @capacitor/core @capacitor/cli
npx cap init 
npx cap add android
npm run build
npx cap copy
npx cap open android

但是当我运行 android 项目时，我得到以下错误

E/Capacitor/Console: File: http://localhost/js/chunk-vendors.3815e007.js - Line 7 - Msg: TypeError: Cannot read property '-1' of undefined
I/chromium: [INFO:CONSOLE(0)] "An unknown error occurred when fetching the script.", source:  (0)
E/Capacitor/Console: File: http://localhost/js/app.15b911b2.js - Line 1 - Msg: Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('http://localhost/') with script ('http://localhost/service-worker.js'): An unknown error occurred when fetching the script.
D/Capacitor: App paused

这是console log 我需要正常工作 serviceworker

编辑：当我点击 http://localhost/js/app.15b911b2.js 时，我发现 NOT FOUND。但是如果我将端口添加到 link - http://localhost:8081/js/app.15b911b2.js 我可以获取文件。所以我猜如果可以让我的项目使用带端口的 link 问题就会解决。

Answer 1

Service Worker 不会处理电容器请求，因此无法加载。您可以像这样在 MainActivity.java 中添加此代码：

if(Build.VERSION.SDK_INT >= 24 ){
  ServiceWorkerController swController = ServiceWorkerController.getInstance();

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

但请注意，它需要 SDK 24，而 Capacitor 支持 SDK 21，因此无法在 21-23 上使用

无法使用脚本 ('http://localhost/service-worker.js') 为范围 ('http://localhost/') 注册 ServiceWorker

Failed to register a ServiceWorker for scope ('http://localhost/') with script ('http://localhost/service-worker.js')

vue.js

progressive-web-apps

capacitor

vue-pwa