Реализация прогрессивного веб-приложения с помощью JavaScript

PWA – это сокращение от Progressive Web App. Прогрессивное веб-приложение — это веб-приложение, обладающее характеристиками нативного приложения. PWA поддерживаются всеми основными веб-браузерами (например, Chrome, Firefox или Safari). Это приводит к большому преимуществу независимости от платформы. PWA работают на всех платформах, поскольку являются веб-приложениями. Таким образом, вы можете сказать «Интернет — это платформа».

В статье показано, как реализовать PWA с помощью JavaScript. Мы не используем фреймворки, такие как Vue, React или Angular. Сначала мы представим основные функции PWA. Затем мы покажем, как отдельные функции PWA могут быть реализованы с нуля. В этой статье мы сосредоточимся на реализации Service Worker (SW). В другой статье мы рассмотрим автономные возможности PWA. Будьте любопытны!

Шаги следующие:

  1. Что такое PWA?
  2. Манифест веб-приложения
  3. Сотрудник службы
  4. Оболочка приложения
  5. Заключение

📱 Что такое PWA?

PWA имеет следующие функции:

  • Прогрессивный (логический): независимость от веб-браузера.
  • Адаптивный: масштабируется на любой экран (рабочий стол, смартфон или планшет).
  • Офлайн-поддержка: возможно автономное использование.
  • Обновление: никаких ручных обновлений.
  • Безопасность: использование HTTPS.
  • Находимость: SEO-оптимизация.
  • Лояльность клиентов: поддержка push-уведомлений.
  • Устанавливаемый: добавление на главный экран.
  • Связать: возможно распространение через URL-адреса.

Далее мы рассмотрим манифест веб-приложения.

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

Манифест определяет внешний вид приложения на главном экране и в переключателе приложений. Кроме того, файл JSON определяет манифест. Вы можете включить манифест в заголовок HTML-документа со следующим HTML-кодом:

<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">

Тег ссылки href гарантирует, что браузер сможет загрузить файл JSON. В следующем коде показан пример манифеста веб-приложения:

{
    "dir": "ltr",
    "lang": "de-DE",
    "name": "App Name",
    "short_name": "Short App Name",
    "description": "An example web app manifest for a PWA.",
    "scope": "/",
    "start_url": ".",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "white",
    "theme_color": "#FFFFFF",
    "icons": [
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "author": {
      "name": "Your Name"
    }
  }

В листинге выше показано:

  • (необязательно) "dir": Указание направления написания содержимого ("ltr" -> слева направо)
  • (необязательно) "lang": Аббревиатура языка
  • "name": Имя приложения
  • "short_name": Краткое название приложения
  • "description": Описание приложения
  • "scope": Это свойство определяет область навигации. Это URL-адрес, который указывает разрешенные URL-адреса. Если вы установите https://example/foo/ в качестве области действия, PWA сможет использовать только URL-адреса ниже этого URL-адреса. URL-адрес https://example/ не используется.
  • "start_url": это свойство указывает начальный URL-адрес, который должен загрузить браузер.
  • "display": Эта запись определяет режим отображения. Режим отображения "standalone" делает PWA похожим на родное приложение на настольном компьютере или смартфоне. Веб-приложение наконец-то работает без элементов браузера на десктопе и смартфоне.
  • "orientation": Эта запись определяет ориентацию экрана. Значение "portrait" указывает, что мы используем портретный режим.
  • "background_color": Определение цвета фона
  • "theme_color": Браузер может использовать это свойство для окрашивания частей пользовательского интерфейса в соответствии со значением цвета.
  • "icons": В этой записи вы можете определить значки. Ресурс изображения состоит из спецификаций "src", "sizes" и "type". Запись "src" указывает URL-адрес файла изображения. Запись "sizes" определяет размеры файла изображения. Кроме того, вы можете указать MIME-тип ресурса изображения через "type". RealFaviconGenerator — отличный генератор для создания иконок разных размеров.
  • "author": Указание авторов

Подробнее о манифесте веб-приложения вы можете узнать на странице Добавить манифест веб-приложения.

Заставка

Некоторые веб-браузеры позволяют сократить время загрузки при запуске PWA, отображая экран-заставку, что делает приложение более естественным. Однако это отображение не является функцией манифеста веб-приложения. Некоторые браузеры реализуют это с помощью свойств манифеста. Не каждый браузер, поддерживающий манифест, отображает заставку.

Chrome Android:
Google рекомендует следующее для поддержки экрана-заставки:

  • Вы должны установить свойство "name" в манифесте.
  • Вы должны установить для свойства "background-color" допустимое значение цвета в манифесте.
  • Массив icons должен содержать хотя бы одну иконку размером 512x512. Кроме того, этот значок должен быть в формате png.

Safari iOS:
В iOS отображение заставок поддерживается не (только) через манифест веб-приложения, а с помощью проприетарных средств. В этом контексте вы должны вставить некоторые элементы в html-заголовок html-документа. В следующем листинге показан фрагмент реализации:

<meta name="apple-mobile-web-app-capable" content="yes">     
<link href="splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />   
<link href="splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />   
<link href="splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />    
<link href="splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />   
<link href="splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Вы можете создавать заставки для iOS с помощью iOS Splash Screen Generator.

Установка PWA

Прогрессивные веб-приложения могут отображать баннер для установки пользователю. Однако это не классическая установка, а просто запись в списке программ. Вы можете добавить PWA в список программ с помощью кнопки «Добавить на стартовый экран». Для этого вам необходимо активировать флаг в браузере Google Chrome для Mac и Linux в разделе chrome://flags/#enable-desktop-pwas. Вы также можете удалить PWA из списка программ. В Google Chrome вам нужно ввести chrome://apps в адресную строку, и вы получите обзор всех установленных приложений. Вы можете удалить приложение, щелкнув его правой кнопкой мыши.

В следующем листинге кода показана процедура установки:

// javascript button for add to homescreen
const installButton = document.getElementById('install');
let deferredPrompt;

// prompt install banner
window.addEventListener('beforeinstallprompt', evt => {
    event.preventDefault();
    deferredPrompt = evt;
    installButton.style.display = 'block';
});

// wait for click event
installButton.addEventListener('click', async () => {
    await deferredPrompt.prompt();
    const choiceResult = await deferredPrompt.userChoice;
    console.log(choiceResult.outcome);
});

Веб-приложения могут использовать событие beforeinstallprompt, чтобы узнать, существуют ли требования для установки веб-страницы. Переменная deferredPrompt хранит запрос на установку, а метод window.addEventListener('beforeinstallprompt') регистрирует событие beforeinstallprompt. Вызов event.preventDefault() предотвращает автоматический вызов баннера браузером. Строка installButton.style.display='block' делает кнопку видимой.

Метод installButton.addEventListener('click'...) регистрирует событие нажатия кнопки. Строка await deferredPrompt.prompt() активирует уведомление об установке (баннер) при нажатии на кнопку. Аргумент await deferredPrompt.userChoice оценивает выбор пользователя.

Вы можете узнать больше об установке PWA на странице Как предоставить собственный опыт установки в приложении.

🖥️ Сервисный работник

Общий

Service Worker (SW) используется для реализации автономной функциональности и обработки push-уведомлений. Кроме того, ПО работает в своем собственном потоке и не может получить доступ к объектной модели документа (DOM). Он имеет собственный кеш и может подключаться к любому исходящему сетевому трафику. При наличии сетевого запроса ПО решает, следует ли извлечь данные из своего кэша или направить запрос в сеть. ПО не зависит от вкладки или окна. Веб-браузер может вызывать ПО при наличии сетевого запроса. Таким образом, SW служит фоновой службой и является мощным. Вот почему вы можете установить его только через HTTPS. Единственным исключением является локальный хост для целей разработки.

Регистрация ПО

Сначала регистрируем ПО:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
            .then(reg => console.log(reg))
            .catch(err => console.log(err));
}

Код JavaScript, показанный выше, запрашивает, поддерживает ли браузер SW или нет. Если браузер поддерживает ПО, оно регистрируется. Файл JavaScript sw.js реализует ПО.

Мы можем разделить жизненный цикл ПО на следующие:

  • Установить
  • Активировать
  • Принести

Установка ПО

Следующий код устанавливает ПО при первом посещении PWA.

self.addEventListener('install', function(event) {
    console.log('[Service Worker] Installing...');
    event.waitUntil(
        // open the cache
        caches.open(cacheName).then(function(cache) {
            // add files to the cache
            return cache.addAll(filesToCache);
        })
    );
});

Установка ПО происходит при регистрации. Событие install инициируется в скрипте sw.js. В примере показано, как разработчик может зарегистрироваться на это событие, используя метод addEventListener(). Метод addEventListener() вызывается в глобальной области ПО self. Кроме того, метод waitUntil() гарантирует, что ПО останется на этапе установки до тех пор, пока не будут выполнены необходимые шаги в рамках функции. На этапе установки ПО может подготовить свой кеш, загрузив в него некоторые ресурсы.

Переменная filesToCache содержит массив со всеми файлами для кэширования.
Переменная cacheName обозначает имя кэша. В браузере Chrome вы можете отобразить установленные ПО по ссылке chrome://serviceworker-internals.

Активация программного обеспечения

Для активации ПО см. следующий код:

self.addEventListener('activate', function(event) {
    /* e.g. open a database, delete the cache or do something else */  
    console.log('[Service Worker] Activating...');
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(key) {
                if( key !== cacheName) {
                    console.log('[Service Worker] Removing old cache', key);
                    return caches.delete(key);
                }
            }));
        })
    );
    return self.clients.claim();
});

Во-первых, разработчик должен зарегистрироваться на событие activate с помощью метода addEventListener(). В этом случае вы можете открыть базу данных, например. IndexedDB (см. следующую статью об автономном хранилище) или удалите кеш SW. Пока этот скрипт работает, ПО обновляет свой кеш. Метод self.clients.claim() гарантирует, что ПО немедленно получит контроль над веб-приложением.

SW Fetch

Следующий код запускается при исходящем сетевом запросе:

self.addEventListener('fetch', function(event) {
    console.log('[Service Worker] Fetch', event.request.url);
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

Событие fetch является функциональным событием, т.е. это событие выполняется только тогда, когда ПО уже установлено и активировано.

Сначала ПО регистрируется на событие fetch, чтобы иметь возможность перехватить сетевой запрос. Сначала ПО ищет ответ в своем кэше. Если ПО находит ответ, то ПО отвечает ему соответствующим образом. Если ПО не находит ответа в кэше, то ПО выдает сетевой запрос. Это прозрачно для кода приложения.

Свойство request доступно для аргумента event. Это свойство разрешает доступ к сетевому запросу. ПО может вернуть ответ HTTP, используя метод respondWith().

Вы можете узнать больше о Service Workers на странице Progressive Web Apps: Go Offline.

🤔 Оболочка приложения

Оболочка приложения (App Shell) представляет собой пользовательский интерфейс. Это включает в себя меню, заголовок и строку состояния PWA. Исходные файлы оболочки приложения всегда должны храниться в автономном режиме, чтобы PWA действовало как собственное приложение. Таким образом, базовая структура PWA может быть загружена сразу при запуске приложения, даже если нет подключения к Интернету. Кроме того, пользователь PWA экономит объем данных, поскольку базовая структура всегда доступна в автономном режиме. Кроме того, в App Shell реализованы элементы навигации, которые соединяют разные уровни PWA. PWA более надежен и нативен благодаря оболочке приложения с поддержкой автономного режима.

Подробнее о App Shell вы можете узнать на странице Архитектура.

🎬 Заключение

В этой статье мы узнали, как определить манифест веб-приложения. Мы также обсудили исходный код того, как установить PWA. Затем мы рассмотрели жизненный цикл ПО. Это состоит из установки, активации и извлечения. Наконец, мы представили Application Shell как концепцию. Мы предоставили ссылки на каждый раздел, по которым вы можете ознакомиться для более подробной информации.

Вам понравилась статья? Станьте участником Medium, чтобы продолжать обучение без ограничений. Мы получим небольшую часть вашего членского взноса, когда вы воспользуетесь ссылкой. Никаких дополнительных затрат для вас нет.

Не пропустите наши новые новости:



Получайте уведомления по электронной почте при каждой публикации Tinz Twins.
Получайте электронную почту при каждой публикации Tinz Twins. Зарегистрировавшись, вы создадите учетную запись Medium, если у вас ее еще нет…tinztwins.medium.com



Спасибо за прочтение. Если вам понравилась эта статья, не стесняйтесь поделиться ею. Следуйте за нами для получения дополнительной информации. Хорошего дня!

(*) Раскрытие информации: Ссылки являются партнерскими ссылками, что означает, что мы будем получать комиссию, если вы совершаете покупку по этим ссылкам. Никаких дополнительных расходов для вас не требуется.

🔍 Дополнительные ссылки

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу