Зарегистрируйте своего сервисного работника на Angular вместе со своим работником - PullRequest
Новая
       3

Зарегистрируйте своего сервисного работника на Angular вместе со своим работником

5 голосов
/ 09 января 2020

У меня есть веб-приложение, которое должно работать в автономном режиме. Я хочу создать своего сервисного работника для обработки кэширования API / syn c logi c и позволить сервисному работнику angular кэшировать ресурсы приложения.

Я получил Angular работника зарегистрироваться и работать отлично. Но я не смог зарегистрировать своего работника.

Я попробовал три метода: 

//1. Does not seem to do anything. No worker built, no worker starter.
ServiceWorkerModule.register('./offline.worker', {enabled: environment.production});

//2. The worker does not get built, registering fails since the script does not exist.
navigator.serviceWorker.register('./offline.worker');

//3. The worker gets built, it even gets started, but is not registered as ServiceWorker.
new Worker('./offline.worker', {type: 'module'});

Итак, вариант 1 работает нормально, используя документы на сервисном работнике angular, когда мы указываем на файл ngsw js. Может быть, он просто не предназначен для работы наших работников?

Вариант 2 - это документированный / стандартный способ регистрации сервисных работников, может, мне просто нужно заставить своего работника быть построенным? Я не знаю, с чего начать ... Полная ошибка, которую я получаю:

Uncaught (в обещании) TypeError: Не удалось зарегистрировать ServiceWorker для области ('http://localhost : 8080 / ') со сценарием (' http://localhost: 8080 / offline.worker '): при получении сценария получен неверный код ответа HTTP (404).

Вариант 3 делает все как я и ожидал. Мой рабочий скомпилирован ./offline.worker даже изменен на созданный пакет! Это действительно, как я ожидал, чтобы все пошло как надо. К сожалению, созданный таким образом работник - это всего лишь веб-работник, а не ServiceWorker. Это означает, что он не может обрабатывать FetchEvents ...

Ради полноты, вот мой tsconfig.worker. json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ],
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

И команды, используемые для запуска angular в производственном режиме, так как работники сферы обслуживания не работают в разработке: 

ng build --prod
http-server dist/app

Ответы [ 2 ]

0 голосов
/ 21 января 2020

Допускается регистрация только одного работника службы в каждой области , поэтому вы не можете зарегистрировать более одного работника службы.

Вы можете обрабатывать как кэширование API / syn c, так и Кэширование ресурсов приложения в одном файле рабочего сервиса.

0 голосов
/ 16 января 2020

Мы добавили пользовательские логи c рядом с Angular Service Worker, используя простой промежуточный скрипт для загрузки сгенерированного скрипта ngsw и нашего собственного скрипта. Это хорошо сочетается с процессом сборки Angular.

app.module.ts 

@NgModule({
  //...
  imports: [
    ServiceWorkerModule.register('sw-master.js', {
      enabled: environment.production
    }),
    //...
  ],
  //...
});

angular. json

...
"assets": [
  ...
  "src/manifest.json",
  "src/sw-custom.js",
  "src/sw-master.js"
],...

sw-master . js

importScripts('./ngsw-worker.js'); // generated by Angular build process
importScripts('./sw-custom.js');

sw-custom. js

Просто пример ... мы делали это так, чтобы пользователи могли нажимать на уведомления pu sh и быть направлены на определенный вид приложения. 

(function () {
  'use strict';
  self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    if (clients.openWindow && event.notification.data.url) {
      event.waitUntil(clients.openWindow(event.notification.data.url));
    }
  });
}());
...