无法使用脚本 ("http://localhost/service-worker.js") 为作用域 ("http://localhost/") 注册服务工作者

Question

我正在尝试将我的vue-pwa项目转换为带有电容器的android项目。

以下是我遵循的步骤。

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

vue add @vue/pwa
npm run build

在这一点上，该应用程序作为pwa工作，具有serviceworker和离线支持。然后我添加了电容器并转换为安卓项目

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

这是控制台日志我需要正确地工作服务人员

编辑：当我点击http://localhost/js/app.15b911b2.js时，我发现未找到。但是如果我在链接中添加端口-http://localhost:8081/js/app.15b911b2.js我可以获取该文件。所以我想如果能让我的项目使用带有端口的链接，问题就会得到解决。

Answer 1

服务人员不会处理电容器请求，因此无法加载。你可以在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 上工作

Answer 2

此错误是在为我的案例更改capacityor.config.json文件中的主机名后修复的。

添加的配置在这里：

"server": {
"hostname": "your_hostname_is_here"
}