Как отредактировать ваш рабочий файл для проекта Angular CLI - PullRequest
Новая
       53

Как отредактировать ваш рабочий файл для проекта Angular CLI

0 голосов
/ 16 октября 2019

Я добавил пакет @angular/pwa в свой проект Angular CLI с помощью команды ng add @angular/pwa --project *project-name*, чтобы он стал прогрессивным веб-приложением, и это добавляет работника службы, которого я знаю. Я хочу отредактировать этого сервисного работника по умолчанию, чтобы он поддерживал, например, обработку ссылок Shared Targets . Я вижу, что рабочий-сервис зарегистрирован в файле с именем ngsw-worker.js с помощью параметра «Проверка» в Google Chrome. Как я могу отредактировать этого сервисного работника ( ngsw-worker.js ), созданного Angular CLI при компиляции с ng build --prod? Какой самый лучший способ?

1 Ответ

0 голосов
/ 16 октября 2019

Получить текущий Сервисный работник :

  1. Есть два способа сделать это. Получите ngsw-worker.js из папки node_modules или получите его в выходной папке после создания приложения с помощью ng build --prod.

  2. Скопируйтесодержимое ngsw-worker.js в новый файл JavaScript, например: *MyProject*/src/service-worker.js.

Включите в Angular CLI ваш файл при компиляции:

Войдите в *MyProject*/src/angular.json. Найдите ключ "assets" . Там должно быть два. Внизу массива для каждого ключа добавьте свой рабочий файл пользовательского сервиса;Например: src/service-worker.js, так что его будет включать в Angular.

Редактировать Сервисный работник :

Теперь вы можете редактировать свой файл рабочего сервиса, как хотите. Например: добавьте self.addEventLister('fetch', event => { ... }) вверху. Этот код добавляет новое событие (может быть несколько одинаковых), поэтому оно ничего не перезаписывает ... Это может помешать чему-либо другому из скопированного содержимого ngsw-worker.js .

Заключительный шаг - Добавить Сервисный работник :

Сначала соберите приложение с помощью ng build --prod.

Теперь найдите местоположение выходной папки ( "outputPath" в angular.json),В этом примере это будет "../ public" .

Откройте терминал для редактирования файла. Мне нравится использовать VS Code;там есть терминал относительно папки моего проекта, установленный через расширение.

Перезаписать свой файл с помощью этой команды: cp public/service-worker.js public/ngsw-worker.js.

Вот и все!

Документы, чтобы узнать больше:

Примечание: Вы должны рассмотреть возможность использования готового сервисного работника, предоставленного вам @angular/service-worker, с вашим пользовательским кодом сверху, который будет автоматически установлен при добавлении @angular/pwa в ваш проект и скомпилирован сng build --prod.

...