В настоящее время возможность работы в автономном режиме является новой большой вещью на рынке. Все больше и больше разработчиков работают над приложениями, чтобы предоставить пользователям автономные возможности. Благодаря Angular Service Worker и встроенной поддержке PWA в Angular CLI теперь проще, чем когда-либо, сделать наше веб-приложение загружаемым и устанавливаемым, как родное мобильное приложение.
Что такое PWA
Прогрессивное веб-приложение (PWA) — это тип прикладного программного обеспечения, доставляемого через Интернет и созданного с использованием HTML, CSS и JavaScript. Он предназначен для работы на любой платформе, использующей браузер, соответствующий стандартам.
Внутри PWA использует API браузера Service Worker для предоставления доступа к некоторым собственным функциям. Кроме того, это дает вам ощущение приложения. Хранилище кеша — действительно отличная функция, которая помогает значительно сократить время загрузки страницы.
Что такое сервис-воркер
Сервисный работник — это скрипт, который ваш браузер запускает в фоновом режиме отдельно от веб-страницы, открывая доступ к функциям, которым не требуется веб-страница или взаимодействие с пользователем. Сегодня они уже включают в себя такие функции, как push-уведомления и фоновая синхронизация. Основная функция — возможность перехватывать и обрабатывать сетевые запросы, включая программное управление кешем ответов.
Предпосылки
Чтобы использовать все функции сервисного работника Angular, используйте последние версии Angular и Angular CLI.
Чтобы сервис-воркеры могли быть зарегистрированы, доступ к приложению должен осуществляться по протоколу HTTPS, а не HTTP. Браузеры игнорируют сервис-воркеры на страницах, которые обслуживаются через небезопасное соединение. Причина в том, что сервис-воркеры довольно мощны, поэтому необходимо проявлять особую осторожность, чтобы гарантировать, что сценарий сервис-воркера не был подделан.
Из этого правила есть одно исключение: чтобы облегчить локальную разработку, браузеры не требуют безопасного подключения при доступе к приложению на localhost.
Приступим к реализации Service worker и PWA в нашем угловом приложении.
ШАГ 1. Создайте приложение Angular
вы можете пропустить этот шаг, если реализуете существующее угловое приложение. мы будем использовать Angular CLI.
ng new angular-pwa
Приведенная выше команда создаст угловое приложение scaffold внутри папки angular-pwa. Давайте перейдем к папке angular-pwa
ШАГ 2. Добавьте пакет PWA
Команда запускает схемы, которые добавляют и изменяют несколько файлов. Он позаботится о настройке вашего приложения для использования сервис-воркеров, добавив пакет service-worker вместе с настройкой необходимых файлов поддержки.
ng add @angular/pwa
Приведенная выше команда выполняет следующие действия:
- Добавляет пакет
@angular/service-workerв ваш проект. - Включает поддержку сборки сервис-воркеров в CLI.
- Импортирует и регистрирует работника службы в модуле приложения.
- Устанавливает файлы значков для поддержки установленного Progressive Web App (PWA).
- Создает файл конфигурации сервис-воркера с именем
ngsw-config.json, который определяет поведение кэширования и другие параметры. - Обновляет файл
index.html:
- Включает ссылку для добавления файла
manifest.webmanifest. - Добавляет метатеги для
theme-color.
ШАГ 3. Создайте сборку
Это займет некоторое время, но через некоторое время наша сборка приложения будет доступна в папке dist.
ng build --prodДавайте посмотрим, что у нас есть в папке сборки, вот почти все сгенерированные файлы:
ШАГ 4. Запустите угловое приложение PWA
Поскольку ng serve не работает с сервисными работниками, вы должны использовать отдельный HTTP-сервер для локального запуска PWA в вашем проекте. Вы можете использовать любой HTTP-сервер. В приведенном ниже примере используется пакет http-server из npm.
Установить http-сервер глобально (Ссылка)
npm install -g http-serverЧтобы обслуживать каталог, содержащий ваши веб-файлы, с помощью http-server, выполните следующую команду:
http-server -p 8080 -c-1 dist/angular-pwa
Параметр -c-1 отключит кэширование сервера, и сервер будет работать на порту 8080, обслуживающем производственную версию приложения. если порт 8080 занят, вы можете изменить его на любой номер порта.
ШАГ 5. Протестируйте приложение angular PWA
Когда сервер запущен, вы можете указать в браузере http://localhost:8080/. Ваше приложение должно загружаться нормально.
Совет: при тестировании сервис-воркеров Angular рекомендуется использовать режим инкогнито или приватное окно в браузере, чтобы убедиться, что сервис-воркер не читает данные из предыдущего остаточного состояния, что может привести к неожиданному поведению.
Теперь в инструменте разработчика вашего браузера должен быть установлен сервис-воркер.
изменить настройки сети на автономный режим
Теперь обновите приложение, приложение снова загрузится без подключения к сети.
Заключение
Теперь мы научились создавать автономные возможности и возможности PWA в любом приложении angular. Спасибо за прочтение :)
Если вам понравилась эта статья, нажмите 👏 кнопку хлопка 1000 раз или столько раз, сколько хотите. Не стесняйтесь задавать вопросы, если они у вас есть. Большое спасибо за чтение!
Прежде чем ты уйдешь
Спасибо за прочтение! Если вы хотите связаться со мной, не стесняйтесь обращаться ко мне по адресу [email protected] или в мой профиль LinkedIn. Кроме того, не стесняйтесь просматривать мой профиль и читать разные статьи.
