Прогрессивные веб-приложения: Руководство по практическому применению

Прогрессивные веб-приложения: Руководство по практическому применению

От автора: есть много статей о PWA, в которых подробно рассказывается, что это такое и как его настроить. Тем не менее, вы не всегда можете понять их с первого раза. Моя цель — предоставить основную информацию на простом языке, которой вам будет достаточно, чтобы понять, что такое PWA. Затем я покажу вам реальный пример, чтобы закрепить полученные знания. Таким образом, возьмите свой ноутбук и следите за мной.

Прочитав эту статью, вы поймете:

Преимущества и недостатки PWA.

Основную концепцию.

Как настроить эту технологию на вашем сайте.

Как обновить кэш.

Преимущества и недостатки

Как и у любой технологии, у PWA есть свои преимущества и недостатки. Прежде чем рассказать о них, давайте разберемся, что такое PWA.

Технология PWA была анонсирована Google в 2015 году. Она позиционируется как дополнительная надстройка, позволяющее сделать сайт похожим на мобильное приложение. При этом интерфейс не меняется, не трансформируется, сайт остается прежним, трансформируется только браузер. Кроме того, вы должны знать, для какого типа бизнеса PWA является лучшим решением, чем мобильное приложение.

Что может PWA?

Отправка уведомлений, кэширование контента и установка ярлыка на рабочий стол;

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

Работа в автономном режиме, то есть без подключения к Интернету, благодаря кешированию контента.

Преимущества PWA

PWA прост в установке. Вам не нужно искать магазины приложений, скачивать что-либо или танцевать с бубном. Просто откройте сайт, нажав на ссылку, появится окно «Установить ярлык на рабочий стол», установите его, и все готово.

Работает на всех более-менее современных устройствах, вам нужен только браузер.

Это позволяет сайту быть более доступным из-за ярлыка на рабочем столе. Вы разблокировали свой телефон, нажали на ярлык, и сайт открылся. Это классно.

Занимает меньше памяти, меньше 1 МБ.

Настройка PWA требует меньше времени на разработку, чем создание мобильного приложения. Нет необходимости писать два одинаковых приложения на Android и IOS. Поэтому это будет намного дешевле для бизнеса.

Более высокая безопасность — все ресурсы передаются только через https.

Стабильная работа. Если есть проблемы с интернетом, контент будет компенсирован из кэша, поэтому сайт всегда будет доступен.

Недостатки PWA

Существует неверное представление о том, что PWA помогает улучшить производительность SEO. Я не согласен с этим!

И первая проблема, с которой вы сталкиваетесь — это SPA, где разметка HTML на странице визуализируется через javascript. До тех пор, пока скрипты не загрузятся (столько, сколько им нужно), макет не будет отображаться, а будет иметь только div с идентификатором «app». Вот как раз в тот момент, когда все становится плохо, происходит SEO-анализ, но страница, как вы понимаете, пуста. И даже если вы добавите +100500 PWA на сайт, они не будут ускорять рендеринг HTML-кода.

И чтобы быть более обоснованными, давайте убедимся в этом на реальном примере. Давайте возьмем сайт //madops.io, который является одностраничным приложением. Если вы посмотрите на него через view-source: //madops.io, вы увидите все, что я описал выше.

В других случаях, когда сервер отображает всю HTML-разметку одновременно, проблем не возникает, как, например, здесь view-source: //maddevs.io.

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

Есть еще некоторые браузеры, которые не поддерживают PWA. Например, push-уведомления на IOS.

Основная концепция

Прежде чем углубляться в настройку PWA, давайте разберемся с ее основными понятиями и компонентами.

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

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

manifest.json — файл настроек. Там мы указываем, какие иконки использовать, какой текст отображать в ярлыке, в каком формате открывать окно браузера и т. д. Давайте поговорим об этом более подробно ниже.

Application Shell — это название оболочки для PWA. В частности, это браузер, который немного трансформирован, чтобы дать больше возможностей разработчику.

HTTPS. Одним из основных требований PWA является передача данных по протоколу https, который является более безопасным. Вы можете использовать для разработки localhost.

Push-уведомления — технология отправки push-уведомлений.

Настройка PWA

PWA очень прост в настройке. Итак, начнем прямо с написания кода! Нет, подождите. Вот ссылка на готовый код //github.com/denisoed/PWA-example. Там вы можете скачать картинки, которые потребуются в дальнейшем.

Во-первых, вам нужно создать папку в проекте и назвать ее, например, PWA. Затем добавьте его в эту папку index.html, которая будет содержать следующий код:

Я уже подготовил макет, но без стилей он выглядит плохо, поэтому мы добавим и их. Создаем папку CSS, куда мы добавляем файл styles.css и вставляем в файл следующий код:

Затем подключите этот файл к index.html в теге head.

Давайте сразу подключим необходимые изображения, которые можно скачать здесь. Нажмите на ссылку, там будет кнопка Clone or download, нажмите ее, затем выберите Download ZIP. Архив будет загружен, и в папке изображений вы найдете изображения. Фу, кажется, я объяснил это довольно понятно:

Прогрессивные веб-приложения: Руководство по практическому применению

Вы открываете проект, создаете там каталог с изображениями, куда вставляете все изображения. Затем откройте index.html и вставьте метаинформацию в тег head.

В результате в файле index.html должна быть такая структура:

Теперь осталось посмотреть, что случилось. Я нашел очень удобное расширение Web Server для Chrome, которое запускает локальный сервер, вам нужно его установить, оно нам понадобится дальше. В этом нет ничего сложного, просто укажите папку с проектом, где находится index.html, оно сделает все само. Скопируйте ссылку и вставьте ее в браузер.

Прогрессивные веб-приложения: Руководство по практическому применению

Настройка и запуск веб-сервера

И вот что мы получили. Я бы не сказал, что это уже хорошо, но как по мне на данный момент нормально!

Прогрессивные веб-приложения: Руководство по практическому применению

Ну, самое сложное, считайте, что сделано, теперь посмотрим, что думает Google о нашей работе. Для этого нажмите клавишу F12 и перейдите на вкладку Lighthouse (до обновления Google эта вкладка называлась Аудит), там будет синяя кнопка Создать отчет, нажмите ее.

Прогрессивные веб-приложения: Руководство по практическому применению

После завершения процесса проверки мы увидим следующую картину: элемент, отвечающий за PWA, будет серым. Это означает, что у нас нет никаких настроек.

Прогрессивные веб-приложения: Руководство по практическому применению

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

Прогрессивные веб-приложения: Руководство по практическому применению

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

name — полное имя. Используется в ярлыке приложения;

short_name — сокращенное имя будет использоваться там, где полное имя не подходит;

icons — список иконок, которые будут отображаться в ярлыке установленного приложения;

lang — язык по умолчанию;

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

display — указывает, в каком формате открывать окно браузера;

background_color — это свойство используется на заставке при первом запуске приложения на мобильном устройстве;

theme_color — устанавливает цвет панели инструментов и может отображаться в окне предварительного просмотра приложения в переключателях задач. theme_color должен соответствовать цвету мета-темы, указанному в заголовке документа. В нашем случае <meta name=»theme-color» content=»black» />.

Этого пока достаточно. Вот описание всех свойств этого файла, когда будет время, прочитайте обязательно. Подключение модуля manifest.json в index.html в теге head.

Давайте начнем писать скрипты. Создаем папку с именем js, куда добавляем файл main.js с этим кодом:

Несколько слов о том, что здесь происходит:

Как только страница загружается, мы проверяем, поддерживает ли браузер service Worker, и в случае успеха идем дальше.

Затем регистрируем файл sw.js (который еще не настроен). Ничего необычного в этом нет.

Включаем скрипты в index.html, но уже не в теге head, а перед закрывающим тегом body.

Что ж, теперь давайте создадим сам файл sw.js. Он будет хранить всю логику для Service Worker. Создайте его в корне проекта и добавьте имя кэша в качестве первой строки.

В следующей строке добавьте переменную includeToCache. В ней мы указываем файлы для кэширования. Да, я понимаю, что это не удобно, мне приходится регистрировать все файлы руками, но мы имеем то, что имеем. Однако мы всегда будем уверены, что ничего лишнего не кэшируется. Экономия трафика и стабильность.

Дальше переходим к событиям. Service Worker запускает под капотом несколько событий, также называемых жизненным циклом. И первым из них является install. Оно запускается только один раз при записи в кэш.

Событие Fetch. Это событие сканирует все запросы и, если что-то совпадает с тем, что находится в кэше, возвращает совпадение из кеша. В противном случае оно возвращает то, что поступает с сервера. Метод responseWith отвечает за извлечение данных из кэша или данных, возвращаемых сервером. И если сервер ничего не возвращал, мы берем это из кэша.

Этого кода пока достаточно. Теперь давайте удостоверимся, что файл sw.js зарегистрирован и кэш записан. Перейдите в консоль разработчика, откройте вкладку Приложение и перейдите в настройки Service Workers. Здесь мы видим, что файл sw.js успешно зарегистрирован, это подтверждается зеленым светом.

Прогрессивные веб-приложения: Руководство по практическому применению

Мы продолжаем двигаться по боковой панели навигации, находим выпадающий список с именем Cache Storage, где фактически хранится наш кэш. Если вы нажмете на нее, вы увидите, какие файлы и контент были кэшированы.

Прогрессивные веб-приложения: Руководство по практическому применению

Теперь, если вы отключите интернет и перезагрузите страницу, сайт будет работать.

Подводя итог. Чтобы сайт работал, когда нет Интернета, вам не нужно устанавливать какие-либо фреймворки, добавлять библиотеки и так далее. Достаточно нескольких строк кода и общего понимания этой технологии.

Как обновить кэш?

Первой проблемой, с которой я столкнулся при работе с PWA, было обновление старого кэша. Но, как оказалось, это очень легко решить.

Давайте изменим пару стилей, чтобы вы могли видеть, что что-то изменилось. Затем обновите страницу и убедитесь, что стили на странице изменились. Мы отключаем интернет и снова загружаем страницу, но по какой-то причине кэш не обновился, и мы видим старую версию сайта.

Решение состоит в том, чтобы добавить в файл sw.js событие activate, при его вызове мы проверим имя старого и нового кэша, а если имена различаются, то удалим старый и добавим новый кэш. Да, для обновления кэша нам нужно менять его имя при каждом обновлении кода.

Сначала я нигде не указывал суффикс *_v1 в имени кеша, это будет его версия. Неважно, как вы это называете, главное, чтобы имена были разные.

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

Несколько слов о события activate. Это событие срабатывает после того, как worker был зарегистрирован и готов к работе. Но для того, чтобы он был готов, вам нужно подождать, пока старый кэш больше не будет использоваться сайтом, и это займет некоторое время. И чтобы избавиться от этого ожидания, вы можете добавить следующий метод.

Теперь кеш будет обновляться сразу после регистрации нового worker. Добавление его в событие install.

А в файле main.js добавлена функция update, которая будет запускать обновление кэша при каждой перезагрузке страницы.

Добавьте метод console.log(). На самом деле, это не имеет значения, главное, что в обратном вызове есть .then().

Вот и все, перезагрузите страницу. Снова откройте инструменты разработчика, перейдите в автономный режим на вкладке Service Workers в боковой панели, снова перезагрузите страницу и просмотрите вкладку Cache Storage. Здесь вы можете увидеть, что старый кеш будет заменен новым.

Установка нового Workers занимает ~ 2 минуты, поэтому может потребоваться перезагрузить страницу несколько раз.

Прогрессивные веб-приложения: Руководство по практическому применению

Мы видим наши новые стили и обновленный кэш. Ура!

Прогрессивные веб-приложения: Руководство по практическому применению

Заключение

В этой статье мы узнали основную информацию о том, как создать и настроить технологию PWA на реальном примере.

Автор: Denis Grushkin

Источник: //blog.maddevs.io

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: