Проверьте прогресс установки сервисного работника от компонента (угловой) - PullRequest
1 голос
/ 20 марта 2019

Я обновил свое угловое приложение в PWA, так как мне нужно предварительно загрузить все ресурсы при первом запуске (в приложении много изображений, которые используются для пользовательского интерфейса).Вот почему я хотел бы показать некоторую полосу вращения / загрузки во время события установки сервисного работника и скрыть его, когда это будет сделано.Итак, первый вопрос - возможно ли обработать это событие из компонента?

Я нашел этот пример и попытался добавить его в первый компонент, который загружается при запуске приложения, но не получает никаких журналов.Так что, вероятно, это не сработает.

ngOnInit() {
self.addEventListener('install', event => {
    this.log("INSTALLING ");
    const installCompleted = Promise.resolve()
                        .then(() => this.log("INSTALLED"));

    event.waitUntil(installCompleted);
});

self.addEventListener('activate', event => {
    this.log("ACTIVATING");
    const activationCompleted = Promise.resolve()
        .then((activationCompleted) => this.log("ACTIVATED"));
        event.waitUntil(activationCompleted);
});

self.addEventListener('fetch', event => {
    this.log("HTTP call intercepted - " + event.request.url);
        return event.respondWith(fetch(event.request.url));
    });
}

log(message) {
    console.log(message);
}

Также у меня есть вопрос по поводу кэширования ресурсов.В моем ngsw-config.json я использую следующую настройку:

  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**"
    ]
  }

, но когда я открываю первую страницу, в кэше не отображаются все изображения и папки из / assets.Не бывает половина из них.Это нормально, и он не должен показывать все изображения, которые кэшируются?Возможно ли, что проблема в том, что я использую ленивые загрузочные модули и сервисный работник начинает кэширование при загрузке каждого модуля?С другой стороны, когда я переключаю страницы, на вкладке Сеть отображается, что каждое изображение загружается из сервисного работника ... enter image description here

Спасибо

1 Ответ

1 голос
/ 09 мая 2019

Вы можете улучшить свое поведение служащего Angular, используя описанную здесь технику:

http://jakubcodes.pl/2018/06/13/enhancing-angular-ngsw/

Он в основном регистрирует промежуточный файл скрипта как файл JavaScript рабочего сервиса, и в этом случае скрипт Angular, помимо собственного кода, называется.

Редактировать

Процесс подробно:

  1. Создайте два файла js в папке src (например, «sw-master.js» и «sw-custom.js»). Последний может содержать ваш код работника таможенной службы.
  2. Добавьте эти две строки в ваш "sw-master.js":

    importScripts('./ngsw-worker.js');
    importScripts('./sw-custom.js');
    
  3. Зарегистрируйте два новых ресурса в файле angular.json вашего проекта:

    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/manifest.json",
      "src/sw-master.js",
      "src/sw-reminders.js"
    ],
    
  4. Зарегистрируйте мастер-сценарий вместо «ngsw-worker.js» в вашем «app.module.ts»:

    ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
    
...