时间戳

首页 > 解决方案 > 使用脚本 ('http://localhost/service-worker.js') 为范围 ('http://localhost/') 注册 ServiceWorker 失败

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

问题描述

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

这是我遵循的步骤。

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

vue add @vue/pwa
npm run build

此时，该应用程序作为 pwa 工作，具有 serviceworker 和离线支持。然后我添加了电容器并转换为android项目

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我可以获取文件。所以我猜测是否可以让我的项目使用带有端口的链接问题将得到解决。

标签： vue.jsprogressive-web-appscapacitorvue-pwa

解决方案

服务人员不会处理电容器请求，因此他们无法加载。您可以像这样添加此代码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 不起作用

推荐阅读