Прогрессивные веб-приложения — это новый стандарт веб-разработки. использование веб-приложений Html , Css и JavaScript может ощущаться как нативное приложение, а с такими фреймворками, как Angular, Vue и React, создание прогрессивного веб-приложения никогда не было лучше.

В этой статье основное внимание уделяется пониманию файлов PWA, которые генерирует angular, и их конфигураций. Теперь вам может быть интересно, каковы преимущества создания PWA:

  • Приложение, подобное пользовательскому опыту, в мобильном Интернете.
  • Вы можете установить его прямо из браузера на вашем телефоне.
  • Не требует магазина платформы (Playstore, Applestore).
  • Автономный режим и push-уведомления через сервис-воркеров.

Отношения Angular 6 с PWA.

Команда angular упростила использование pwa в вашем приложении. с помощью ng add вы можете запустить следующую команду, чтобы превратить ваше приложение в прогрессивное веб-приложение:

ng add @angular/pwa --project app_name

Обратите внимание, что имя проекта обязательно, потому что Angular CLI 6+ теперь поддерживает несколько проектов в одной папке.

Эта команда генерирует довольно много файлов, которые мы объясним (очевидно, в этом и смысл этой статьи).

Эта команда создает следующие файлы, которые в основном составляют ваш PWA:

ngsw-config.json

Файл ngsw-config.json указывает, какие файлы и URL-адреса данных сервис-воркер Angular должен кэшировать и как он должен обновлять кэшированные файлы и данные.

{
  "index": "/index.html",
  "assetGroups": [{
     "name": "app",
     "installMode": "prefetch",
     "resources": {
     "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
 ]}
}, {
   "name": "assets",
   "installMode": "lazy",
   "updateMode": "prefetch",
   "resources": {
   "files": [
   "/assets/**"
  ]}
 }]
}

Объяснение каждого из ключей в файле конфигурации:

  • index : указывает файл, который служит индексной страницей для удовлетворения запросов навигации. Обычно это /index.html. Это корневая страница из угловых приложений по умолчанию.
  • assetGroups: Согласно документации angular (да, мы идем по книге). Ресурсы — это ресурсы, являющиеся частью версии приложения, которые обновляются вместе с приложением. в основном ваши CDN и внешние URL-адреса. Это поле содержит массив групп ресурсов, каждая из которых определяет набор ресурсов ресурсов и политику их кэширования.
    name : обязательно. Он идентифицирует эту конкретную группу ресурсов между версиями конфигурации.
    installMode : может быть либо prefetch, либо lazy. Это определяет, как эти ресурсы изначально кэшируются.
    - prefetch указывает сервисному работнику Angular получать каждый единственный указанный ресурс, пока он кэширует текущую версию приложения. Для этого требуется много данных, возможно, вы захотите учитывать своих пользователей, особенно если ваше приложение тяжелое, но это гарантирует, что ресурсы будут доступны, когда они запрашиваются, даже если браузер в данный момент отключен.
    - lazy не кэширует любые ресурсы заранее. Вместо этого сервисный работник Angular кэширует только те ресурсы, для которых он получает запросы. Это режим кэширования по запросу. Ресурсы, которые никогда не запрашивались, не будут кэшироваться. Это полезно для таких вещей, как изображения с разным разрешением, поэтому сервис-воркер кэширует только правильные ресурсы для определенного экрана и ориентации.
    updateMode : также может быть либо prefetch, либо lazy . Это просто обновляет кешированные ресурсы, если есть изменение в версии приложения.
    - prefetch : указывает сервисному работнику немедленно загрузить и кэшировать измененные ресурсы.
    - lazy : говорит сервисному работнику не кэшировать эти ресурсы. Вместо этого он обрабатывает их как незапрошенные и ждет, пока они не будут запрошены снова, прежде чем обновлять их. updateMode из lazy допустимо только в том случае, если installMode равно lazy.
    resources : в этом разделе описываются ресурсы для кэширования.
    - files : перечислены шаблоны, соответствующие файлам в каталоге распространения. Это могут быть отдельные файлы или шаблоны в виде глобусов, которые соответствуют нескольким файлам.
    - urls : включает как URL-адреса, так и шаблоны URL-адресов, которые будут сопоставляться во время выполнения. Эти ресурсы не извлекаются напрямую и не имеют хэшей содержимого, но они будут кэшироваться в соответствии с их HTTP-заголовками. Это наиболее полезно для CDN, таких как служба Google Fonts.

manifest.json

{
"name": "app_name",
"short_name": "app_short_name",
"theme_color": "app theme color",
"description": "app description",
"background_color": "background color",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
 {
 "src": "assets/icons/icon-72x72.png",
 "sizes": "72x72",
 "type": "image/png"
 }
...
]}
  • name : Имя приложения, которое вы хотите отобразить под значком приложения.
  • short_name : Краткое название приложения. Это предназначено для случаев, когда недостаточно места для отображения полного имени веб-приложения, например домашних экранов устройств.
  • theme-color : определяет цвет темы по умолчанию для приложения. Это иногда влияет на то, как ОС отображает сайт (например, в переключателе задач Android цвет темы окружает сайт).
  • description : определяет описание приложения закрепленного веб-сайта.
  • background-color : определяет ожидаемый «фоновый цвет» веб-сайта. Это значение повторяет то, что уже доступно в CSS сайта, но может использоваться браузерами для рисования цвета фона ярлыка, когда манифест доступен до загрузки таблицы стилей.
  • display : определяет режим отображения приложения. Существуют разные типы, и каждый из них имеет резервный дисплей на случай, если выбранный не применяется или не работает с устройством.
    - fullscreen : используется вся доступная область дисплея, и хромированный пользовательский интерфейс не отображается. Резервное отображение standalone.
    - standalone : приложение будет выглядеть как отдельное приложение. Это может включать в себя приложение, имеющее другое окно, собственный значок в панели запуска приложений и строке состояния. Этот дисплей выглядит более родным. Резервное отображение minimal-ui.
    - minimal-ui : приложение будет выглядеть как отдельное приложение, но будет иметь ограниченный пользовательский интерфейс (возможно, навигация и панель навигации для чтения). Резервное отображение browser.
    - browser : это стандартный внешний вид браузера.
  • scope : определяет область навигации PWA. Это ограничивает просмотр веб-страниц во время применения манифеста.
  • start_url: это URL-адрес, который загружается при открытии приложения. в приложении Angular это в основном файл index.html или ваш корневой компонент.

Папка src/assets/icons содержит некоторые сгенерированные angular значки с другим размером для значка вашего приложения при установке из браузера. https://tomitm.github.io/appmanifest/ и https://app-manifest.firebaseapp.com/ — отличный способ сгенерировать эти иконки и манифест.

Заключение

Я почти уверен, что у вас есть… о! Я вижу моменты сейчас. Теперь вы должны понять, для чего нужны ваши файлы manifest.json и ngsw-config и для чего в них конфигурация. Спасибо за чтение. Загляните на мой GitHub. Вы можете связаться со мной по этой ссылке.

Полезные ссылки

✉️ Подпишитесь наCodeBurstраз в неделю Email Blast,🐦 Подпишитесь наCodeBurstв Twitter, просмотрите🗺️ Дорожную карту веб-разработчиков на 2018 год и🕸️ Изучите комплексную веб-разработку .