Angular 2
Сервисный рабочий

Вступление

Добавить Service Worker в наше приложение

Во-первых, если вы консультируетесь с mobile.angular.io, флаг -mobile больше не работает.

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

ng new serviceWorking-example
cd serviceWorking-example

Теперь важно, чтобы сказать угловатому кли, что мы хотим использовать сервисного работника, нам нужно сделать:

ng set apps.0.serviceWorker = true

Если по какой-либо причине у вас нет установленного @ angular / service-worker, вы увидите сообщение:

В вашем проекте настроено serviceWorker = true, но @ angular / service-worker не установлен. Запустите npm install --save-dev @angular/service-worker и повторите попытку или запустите ng set apps.0.serviceWorker=false в вашем .angular-cli.json.

Проверьте .angular-cli.json, и теперь вы должны увидеть это: «serviceWorker»: true

Когда этот флаг верен, производственные сборки будут настроены вместе с работником службы.

Файл ngsw-manifest.json будет сгенерирован (или добавлен в случае, если мы создадим ngsw-manifest.json в корне проекта, как правило, это делается для указания маршрутизации, в будущем это, вероятно, будет сделано автоматически) в dist / root, и там будет скопирован сценарий рабочего лица. Короткий скрипт будет добавлен в index.html для регистрации рабочего.

Теперь, если мы создадим приложение в режиме производства ng build --prod

И проверьте dist / folder.

Там вы увидите три новых файла:

• работник-basic.min.js
• SW-register.HASH.bundle.js
• ngsw-manifest.json

Кроме того, index.html теперь включает этот скрипт sw-register, который регистрирует для нас Угловой Службу Сервиса (ASW).

Обновите страницу в своем браузере (обслуживается веб-сервером для Chrome)

Откройте Инструменты разработчика. Перейдите в приложение -> Служащие службы

Хорошо, теперь рабочий службы работает!

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

Теперь, если вы включите автономный режим на консоли Chrome, вы увидите, что наше приложение в http: // localhost: 4200 / index.html работает без подключения к Интернету.

Но в http: // localhost: 4200 / у нас есть проблема, и она не загружается, это связано с тем, что кэш статического содержимого поддерживает только файлы, перечисленные в манифесте.

Например, если манифест объявляет URL-адрес /index.html, запросы к /index.html будут отвечать на кеш, но запрос на / или / some / route будет отправлен в сеть.

Именно там входит плагин перенаправления маршрута. Он считывает конфигурацию маршрутизации из манифеста и перенаправляет настроенные маршруты на указанный маршрут индекса.

В настоящее время этот раздел конфигурации должен быть написан вручную (19-7-2017). В конце концов, он будет создан из конфигурации маршрута, присутствующей в источнике приложения.

Итак, если теперь мы создаем или ngsw-manifest.json в корне проекта

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

И мы снова создаем наше приложение, теперь, когда мы идем к http: // localhost: 4200 / , мы должны перенаправляться на http: // localhost: 4200 / index.html .

Для получения дополнительной информации о маршрутизации прочтите официальную документацию здесь

Здесь вы можете найти дополнительную документацию об обслуживающих рабочих:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

И здесь вы можете увидеть альтернативный способ реализации службы, работающей с использованием библиотеки SW precache:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers