Прогрессивное веб-приложение — это веб-приложение, которое предоставляет пользователям возможности, подобные приложениям, с использованием современных веб-возможностей. В конце концов, это просто ваш обычный веб-сайт, который работает в браузере с некоторыми улучшениями. Это дает вам возможность:

  • Чтобы установить его на домашнем экране мобильного устройства
  • Чтобы получить к нему доступ в автономном режиме
  • Доступ к камере
  • Чтобы получать 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 и провести их аудит: