Не удалось зарегистрировать ServiceWorker для области видимости (‘http://localhost /’) с помощью скрипта (‘http://localhost/service-worker.js ‘)

#vue.js #progressive-web-apps #capacitor #vue-pwa

#vue.js #progressive-веб-приложения #конденсатор #vue-pwa

Вопрос:

Я пытаюсь преобразовать свой проект 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
 

Вот журнал консоли
Мне нужно, чтобы правильно работал serviceworker

РЕДАКТИРОВАТЬ: когда я щелкнул http://localhost/js/app.15b911b2.js , я обнаружил, что НЕ НАЙДЕН. Но если я добавлю порт к ссылке — http://localhost:8081/js/app.15b911b2.js я смогу получить файл. Итак, я предполагаю, что если бы мой проект мог использовать ссылку с портом, проблема была бы решена.

Ответ №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, а конденсатор поддерживает SDK 21, поэтому он не будет работать на 21-23