Прогрессивное веб-приложение — это веб-приложение, которое предоставляет пользователям возможности, подобные приложениям, с использованием современных веб-возможностей. В конце концов, это просто ваш обычный веб-сайт, который работает в браузере с некоторыми улучшениями. Это дает вам возможность:
- Чтобы установить его на домашнем экране мобильного устройства
- Чтобы получить к нему доступ в автономном режиме
- Доступ к камере
- Чтобы получать push-уведомления
- Для фоновой синхронизации
и многое другое…
Хотя прогрессивные веб-приложения приносят в Интернет много преимуществ и функциональности, они не требуют переписывания всего приложения. Любое приложение можно преобразовать в PWA, добавив в него несколько дополнительных слоев.
Шаги для создания PWA
- Создайте простое приложение. Как уже говорилось, любое приложение можно преобразовать в PWA, поэтому вам нужно базовое приложение, которое можно будет запускать в браузере, а затем установить локально.
- Добавить файл Manifest.json
- Создать сервис-воркер
- Зарегистрируйте сервис-воркер
Пишем Manifest.json
Это простой файл JSON, который информирует браузер о вашем веб-приложении. В этом файле указаны некоторые важные свойства вашего приложения для отображения в PWA. Чтобы ваше приложение можно было установить, вам необходимо включить файл manifest.json в корневой каталог приложения.
Также есть некоторая конфигурация того, как ваше приложение отображается при запуске с домашнего экрана пользователя: хотите ли вы показывать адресную строку в браузере или нет? Какого цвета должна быть строка состояния? И так далее. Обратите внимание, что правильный manifest.json должен включать полный спектр размеров значков для различных устройств. Приведенный ниже код является предварительным просмотром некоторых свойств, которые может включать ваш манифест.
{ "name": "param373r's PWA", "short_name": "ParamWA", "start_url": "index.html", "display": "standalone", "background_color": "#fdfdfd", "theme_color": "#db4938", "orientation": "portrait-primary", "icons": [ { "src": "/images/icons/favicon-72x72.png", "type": "image/png", "sizes": "72x72" }, { "src": "/images/icons/favicon-96x96.png", "type": "image/png", "sizes": "96x96" } ] }
Сервисные работники
Service Worker может перехватывать и обрабатывать сетевые запросы, управлять кешем, чтобы включить автономную поддержку или отправлять push-уведомления вашим пользователям. Service Worker не имеет доступа к DOM и не блокирует. Он разработан, чтобы быть полностью асинхронным; поэтому такие API, как синхронный XHR и Web Storage, нельзя использовать внутри сервис-воркера.
Обратите внимание: сервисные работники работают только через HTTPS из соображений безопасности.
Пример скрипта сервис-воркера выглядит примерно так…
<script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('service-worker.js').then(function(registration) { // Registration was successful console.log('Registered!'); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }).catch(function(err) { console.log(err); }); }); } else { console.log('service worker is not supported'); } </script> // service-worker.js self.addEventListener('install', function() { console.log('Install!'); }); self.addEventListener("activate", event => { console.log('Activate!'); }); self.addEventListener('fetch', function(event) { console.log('Fetch!', event.request); });
Обратите внимание еще на одну вещь: в момент, когда сервис-воркер загружается браузером (загрузка на сайте), сервис-воркеру доступны следующие параметры:
install
иactivate
. Не вдаваясь слишком глубоко, но это события, которые запускаются при установке и активации самого PWA, и помогают нам настраивать события.
Регистрация сервис-воркера
Чтобы зарегистрировать сервис-воркер, просто добавьте сценарий загрузки в index.html
, чтобы сервис-воркер загружался сразу после загрузки окна.
<script> window.addEventListener('load', () => { registerSW(); }); // Register the Service Worker async function registerSW() { if ('serviceWorker' in navigator) { try { await navigator .serviceWorker .register('serviceworker.js'); } catch (e) { console.log('SW registration failed'); } } } </script>
Установите критерии для PWA (необязательно)
Отличная работа!!
Вы только что создали свое самое первое PWA, которое ваши пользователи могут легко установить на свои локальные устройства, такие как настольные компьютеры и мобильные устройства. Теперь, когда вы это сделали, всегда рекомендуется оптимизировать код для лучшей работы с устанавливаемыми PWA. Ниже приведены некоторые ресурсы, которые вы можете просмотреть, чтобы лучше понять PWA и провести их аудит:
- Модель RAIL: https://web.dev/rail/
- Аудит PWA с помощью Google Lighthouse: https://web.dev/lighthouse-pwa/
- Контрольный список PWA: https://web.dev/pwa-checklist/