Site icon 8HOST.COM

Введение в прогрессивные приложения JavaScript

Amber

Благодаря сервис-воркерам сегодня сайты могут вести себя почти как нативные приложения (в браузерах, которые поддерживают эту технологию). Подобные сайты называются прогрессивными веб-приложениями (или PWA, progressive web app).

Прогрессивные веб-приложения позволяют выполнять такие действия, как установка на главный экран и доступ в офлайн режиме. Попробуйте отключить Wi-Fi и перезагрузить страницу прогрессивного приложения (если вы используете Chrome или Firefox). Вы увидите, что страница загружается нормально, потому что она была кэширована, а кэшированная версия обслуживается через service worker.

Читайте также: От сайта Gatsby к прогрессивному приложению

Контрольный список для прогрессивных веб-приложений

Чтобы веб-приложение считалось прогрессивным, необходимо выполнить несколько условий. Наиболее важными для работы базового прогрессивного веб-приложения являются следующие три параметра:

Удовлетворив эти три условия, вы получите базовое прогрессивное веб-приложение, которое может быть доступно офлайн и загружает статические ресурсы из кэша. Вы можете использовать расширение Chrome под названием Lighthouse, чтобы провести аудит и посмотреть, какое место занимает ваше приложение в спектре:

Манифест веб-приложения

Манифест веб-приложения — это JSON файл, содержащий метаданные о приложении. Манифест очень важен, так как именно этот файл позволяет браузерам на телефонах Android устанавливать веб-приложения на домашнем экране.

Этот генератор манифестов веб-приложений упрощает создание файла manifest.json. Он даже поможет вам сгенерировать значки всех размеров из одного значка 512×512.

Получив файл manifest.json, включите его в код приложения:

<link rel="manifest" href="/path/to/manifest.json">

Содержание манифеста веб-приложения может, к примеру, выглядеть так:

{
  "name": "Alligator.io",
  "short_name": "Alligator",
  "theme_color": "#138e69",
  "background_color": "#f8ea48",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Сервис-воркеры

Сервис-воркеры (Service Worker) — это новая технология, доступная в некоторых современных браузерах. Она позволяет контролировать сетевые запросы. Сервис-воркеры позволяют кэшировать контент и контролировать работу, когда нет доступа к сети или интернет очень медленный. В случае веб-приложений сервис-воркер может кэшировать активы для оболочки, благодаря чему они всегда будут доступны офлайн (или при медленном интернете).

Регистрация сервис-воркера

Первым шагом в создании сервис-воркера является его регистрация.

Вот пример сценария, который вы можете использовать для регистрации сервис-воркера. Обратите внимание, сначала скрипт проверяет, поддерживаются ли сервис-воркеры:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('ServiceWorker registration successful!');
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}

Как видите, сервис-воркер находится в корневой папке. Это означает, что его действие будет распространяться на все веб-приложение. Если бы он находился во вложенной папке, по умолчанию его работа была бы ограничена только этой вложенной папкой.

Создание сервис-воркера

Что касается создания самого сервис-воркера, это довольно сложный процесс. Инструмент SW-Toolbox поможет вам сократить шаблонный код сервис-воркера. Кодирование сервис-воркера вручную включает в себя настройку прослушивателей для событий установки, активации и извлечения. К счастью, SW-Toolbox позаботится об этом самостоятельно.

Установить SW-Toolbox можно через npm:

$ npm install --save sw-toolbox

Затем в зарегистрированном ранее сервис-воркере (например, service-worker.js) импортируйте SW-Toolbox с помощью self.importScripts():

self.importScripts('node_modules/sw-toolbox/sw-toolbox.js');

Например, воркер может выглядеть так:

self.toolbox.precache(['/images/logo-small.svg', '/images/web-icons/webicon-twitter.svg', '/images/web-icons/webicon-facebook.svg']);
self.toolbox.router.get('/*', toolbox.networkFirst);

Этот воркер предварительно кэширует несколько ресурсов, а затем кэширует все остальное. Прежде чем использовать кэшированную версию по умолчанию, он сначала пытается получить свежие данные из сети.

Такой вариант хорошо подходит для статического веб-сайта (например, для нашего информатория), но кэширование всего контента не будет работать в контексте реального веб-приложения, которое использует динамические данные.

Примечание: Подробнее узнать, что еще умеет SW-Toolbox, можно в этом руководстве.

Если вы хотите покопаться в сервис-воркерах, Mozilla составила отличный ресурс для изучения сервис-воркеров с примерами кода для различных функций.

Тестирование

Когда все будет готово, вы можете проверить манифест веб-приложения и сервис-воркер во вкладке Application в Chrome DevTools.

Рекомендуем поиграть с параметром Offline, чтобы проверить, как ваше приложение будет реагировать на офлайн режим. Экспериментируя с различными конфигурациями сервис-воркеров, подумайте о возможности отменить регистрацию текущего воркера, чтобы вместо него зарегистрировать новую версию.

Заключение

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