В последнее время много говорят о прогрессивных веб-приложениях. Это относительно новая модель, но ее принципы можно использовать для улучшения приложений, созданных с помощью vanilla JS, React, Polymer, Angular или любого другого фреймворка. В этой статье я расскажу о некоторых вариантах и приложениях, которые помогут вам начать работу с собственным прогрессивным веб-приложением.
Что такое прогрессивное веб-приложение?
Важно помнить, что прогрессивные веб-приложения работают везде, но в современных браузерах они работают лучше. Прогрессивное улучшение – это основа модели.
Аарон Густафсон (Aaron Gustafson) сравнил прогрессивное улучшение с драже M&M’s с арахисом. Арахис – это ваш контент, шоколадная глазурь – уровень представления, а JavaScript – твердая оболочка. Цвет этого слоя может быть разным, а его вид зависит от возможностей браузера.
Оболочка – это место, где могут находиться многие функции прогрессивного веб-приложения. Они сочетают в себе лучшие качества сайтов и приложений. Они полезны пользователям с первого посещения вкладки браузера, и их не нужно устанавливать.
По мере того, как пользователь взаимодействует с этими приложениями, они становятся ещё удобнее: быстро загружаются даже при медленном подключении к сети (благодаря сервис-воркеру), отправляют релевантные push-уведомления и имеют значок на главном экране пользователя, который позволяет загружать их в полноэкранном режиме. Они также могут использовать умные баннеры для установки веб-приложений.
Прогрессивные веб-приложения – это
- Прогрессивность. Приложения работают в любом браузере, поскольку созданы на основе принципа прогрессивного улучшения.
- Адаптивность. Приложение должно подстраиваться под любой форм-фактор, будь то компьютер, мобильное устройство, планшет или что-то ещё.
- Независимость от подключения. Благодаря сервис-воркерам приложение может работать офлайн или при низкой скорости интернета.
- Похоже на приложение. Используйте модель оболочки приложения, чтобы обеспечить навигацию и взаимодействие в стиле приложения.
- Актуальность. Благодаря процессу обновления сервис-воркера приложение всегда содержит актуальные данные.
- Безопасность. Контент передается по протоколу TLS, что позволяет предотвратить его перехват и гарантировать, что он не был изменен.
- Видимость. Благодаря манифестам W3C и области регистрации service worker поисковые системы могут идентифицировать такие сайты как приложения.
- Повторное вовлечение. Упростите повторное вовлечение с помощью таких функций, как push-уведомления.
- Устанавливаемость. Пользователи могут добавлять на главный экран приложения, которые им нравятся, не заходя в магазин приложений.
- Возможность делиться ссылками. Веб-приложениями легко делиться с помощью URL, и они не требуют сложной установки.
Прогрессивные веб-приложения также не являются уникальными для Chrome для Android. Ниже показано, как прогрессивное веб-приложение Pokedex работает в Firefox для Android (бета-версия) с ранними функциями добавления на главный экран и кеширования сервисного работника.
Одно из преимуществ прогрессивной модели заключается в том, что функции можно разблокировать постепенно, по мере того как разработчики браузеров улучшают их поддержку. Прогрессивные веб-приложения, такие как Pokedex, также отлично работают в Opera на Android, но с некоторыми заметными отличиями в реализации:
Чтобы узнать больше о прогрессивных веб-приложениях, прочитайте запись в блоге Алекса Рассела, в которой он впервые рассказал о них. Пол Кинлан (Paul Kinlan) также создал очень полезный тег Stack Overflow для прогрессивных веб-приложений, который стоит посмотреть.
Принципы
Манифест веб-приложения
Благодаря манифесту веб-приложение на главном экране пользователя выглядит как нативное. Он позволяет запускать приложение в полноэкранном режиме (без адресной строки), управлять ориентацией экрана, а в последних версиях Chrome для Android – задавать заставку и цвет темы для адресной строки. Он также используется для определения набора значков по размеру и плотности, используемых для вышеупомянутой заставки и значка главного экрана.
Пример файла манифеста можно найти в Web Starter Kit и в примерах Google Chrome. Брюс Лоусон (Bruce Lawson) создал генератор манифестов, а Мунир Ламури (Mounir Lamouri) – удобный инструмент проверки манифестов.
В своих личных проектах я использую realfavicongenerator, чтобы создавать значки нужного размера для манифеста веб-приложения, а также для iOS, компьютеров и т. д. Модуль Node favicons также позволяет получить аналогичный результат в процессе сборки.
Браузеры на основе Chromium (Chrome, Opera и т. д.) уже поддерживают манифесты веб-приложений. В Firefox поддержка находится в активной разработке, а в Edge – на рассмотрении. Разработчики WebKit/Safari пока не заявляли о намерении реализовать эту функцию.
Подробную информацию вы найдете в статье Устанавливаемые веб-приложения с манифестом приложения в Chrome для Android на Основах веб-дизайна.
Баннер "Добавить на главный экран"
В Chrome для Android уже давно можно добавлять сайты на главный экран, а в последних версиях браузера также поддерживаются умные подсказки для установки веб-приложений.
Чтобы показывались подсказки по установке приложения, оно должно:
- иметь действительный манифест веб-приложения;
- Передаваться по протоколу HTTPS (бесплатный сертификат можно получить на сайте letsencrypt).
- Зарегистрирован действительный сервис-воркер.
- Посещалась дважды с интервалом не менее пяти минут.
Доступно несколько примеров баннеров установки приложения, от базовых до более сложных, например для показа связанных приложений.
Сервисный worker для офлайн-кеширования
Сервис-воркер – это скрипт, который выполняется в фоновом режиме отдельно от веб-страницы. Он реагирует на события, в том числе на сетевые запросы со страниц, которые он обслуживает. Сервис-воркеры намеренно имеют короткий срок службы.
Она активируется при получении события и работает только до тех пор, пока не обработает его. Сервис-воркер позволяет использовать Cache API для кеширования ресурсов и может использоваться для предоставления пользователям возможности работы в офлайн-режиме.
Сервис-воркеры не только обеспечивают офлайн-кеширование, но и значительно повышают производительность, мгновенно загружая сайт или веб-приложение при повторных посещениях. Вы можете кешировать оболочку приложения, чтобы оно работало офлайн, и заполнять его контент с помощью JavaScript.
Полный набор примеров сервисных скриптов доступен в примерах Google Chrome. Если вы только начинаете работать с service worker, рекомендуем ознакомиться с руководством по созданию офлайн-приложений Джейка Арчибальда и пошаговыми инструкциями по созданию первого офлайн-веб-приложения Пола Кинлана.
Наша команда также поддерживает ряд вспомогательных утилит сервисного работника и инструментов сборки, которые мы считаем полезными для снижения накладных расходов при настройке сервисного работника. Они перечислены в разделе Библиотеки Service Worker. Вот два основных:
- sw-precache – инструмент, который генерирует скрипт service worker, полезный для предварительного кеширования оболочки веб-приложения.
- sw-toolbox – библиотека, которая обеспечивает кеширование редко используемых ресурсов во время выполнения.
Джефф Посник (Jeff Posnick) написал краткое руководство по sw-precache под названием Offline-first, fast, with the sw-precache module (Быстрая работа в офлайн-режиме с модулем sw-precache) и практическую работу по тому же инструменту, которые могут быть вам полезны.
Поддержка сервисных скриптов уже реализована в Chrome, Opera и Firefox, а разработчики Edge выразили заинтересованность в этой функции. Разработчики Safari упомянули о своем интересе к этой технологии в пятилетнем плане.
Push-уведомления для повторного вовлечения
По сути, вы можете создавать веб-приложения, с которыми пользователи могут взаимодействовать за пределами вкладки. При этом браузер может быть закрыт, а веб-приложение – неактивно. Для работы этой функции требуется как сервис-воркер, так и манифест веб-приложения, основанный на некоторых функциях, описанных ранее.
Push API реализован в Chrome, находится в разработке в Firefox и рассматривается в Edge. Пока нет никаких публичных сигналов от Safari о намерении реализовать эту функцию.
В статье Push Notifications on the Open Web (Push-уведомления в интернете) Мэтт Гонт (Matt Gaunt) подробно рассказывает о том, как настроить push-уведомления. Также рекомендуем ознакомиться с практической работой по push-уведомлениям в разделе "Основы веб-дизайна".
Если вы предпочитаете видео, посмотрите 6-минутное введение в Push-уведомления от Майкла ван Оуверкерка (Michael van Ouwerkerk) из команды Chrome.
Добавление расширенных функций
Помните, что удобство использования вашего веб-приложения может зависеть от браузера, в котором оно открыто. Вы сами решаете, какой будет карамельная оболочка.
Дополнительные функции, которые появятся на веб-платформе, такие как фоновая синхронизация (для синхронизации данных с сервером, даже когда веб-приложение закрыто) и Web Bluetooth (для связи с устройствами Bluetooth из веб-приложения), также могут быть добавлены в ваше прогрессивное веб-приложение таким же образом.
В Chrome включена однократная фоновая синхронизация. Джейк Арчибальд (Jake Archibald) записал видео о своем офлайн-приложении Википедии и написал статью, в которой показал, как работает эта функция. Если вы хотите попробовать Web Bluetooth API, ознакомьтесь с примерами, которые подготовил Франсуа Бофор (François Beaufort).
Поддержка фреймворков
Ничто не мешает вам применить любой из вышеперечисленных принципов к существующему приложению или фреймворку, с которым вы работаете. При создании прогрессивного веб-приложения также стоит учитывать модель производительности RAIL и анимацию FLIP.
Я надеюсь, что в 2016 году мы увидим все большее количество шаблонов и начальных проектов, органично поддерживающих прогрессивные веб-приложения в качестве основной функции. А пока добавить эти функции в приложение не так уж сложно, и, по моему скромному мнению, это стоит сделать.
Архитектура
Существуют разные уровни интеграции прогрессивных веб-приложений, но наиболее распространенный подход – это создание оболочки приложения. Это не обязательное требование, но у такого подхода есть несколько преимуществ.
Архитектура оболочки приложения позволяет кешировать оболочку приложения (пользовательский интерфейс), чтобы оно работало офлайн и заполняло контент с помощью JavaScript. При повторных посещениях это позволяет вам очень быстро получать значимые пиксели на экране без сети, даже если ваш контент в конечном итоге поступает оттуда. Это позволяет значительно повысить эффективность.
Джереми Кит недавно отметил, что в такой модели обработку на стороне сервера следует рассматривать не как резервный вариант, а как улучшение обработки на стороне клиента. Это справедливый отзыв.
В модели оболочки приложения следует по возможности использовать серверную отрисовку, а клиентскую прогрессивную отрисовку – как улучшение, аналогично тому, как мы улучшаем работу приложения при поддержке service worker. Существует множество способов решения этой проблемы.
Рекомендую прочитать наше описание архитектуры и подумать, как похожие принципы можно применить к вашему приложению и стеку.
Шаблоны для начала работы
Оболочка приложения
Репозиторий app-shell содержит почти полную реализацию архитектуры оболочки приложения. Бэкенд написан на Express.js, а фронтенд – на ES2015.
Поскольку она охватывает как клиентскую, так и серверную части модели, а также содержит много других элементов, вам потребуется некоторое время, чтобы ознакомиться с базой кода. В остальном это наиболее полная отправная точка для создания прогрессивного веб-приложения. Следующим этапом проекта станет работа с Документами.
Стартовый набор Polymer
Официальный стартовый шаблон для веб-приложений Polymer поддерживает следующие функции прогрессивных веб-приложений:
- Манифест веб-приложения
- Заставка Chrome для Android
- Офлайн-кеширование service worker с помощью элементов Platinum SW.
- Push-уведомления (требуется ручная настройка) с элементами Platinum Push.
В текущей версии PSK отсутствует поддержка некоторых более продвинутых шаблонов производительности (например, модели оболочки приложения, асинхронной загрузки), которые вы найдете в некоторых веб-приложениях Progressive Polymer.
Мы планируем внедрить эти шаблоны в PSK в 2016 году, но ранние эксперименты в этой области можно найти в приложении Polymer Zuperkulblog Роба Додсона и в превосходном докладе Эрика Бидельмана Polymer Perf Patterns.
Web Starter Kit
Наша отправная точка для новых ванильных проектов включает в себя следующие функции прогрессивного веб-приложения:
- Манифест веб-приложения
- Заставка Chrome для Android
- Предварительное кеширование service worker с помощью sw-precache.
Если вы предпочитаете работать с vanilla JS/ES2015 и не можете использовать Polymer, Web Starter Kit может оказаться полезным в качестве ориентира, который вы можете повторно использовать или украсть фрагменты кода.
Прогрессивные веб-приложения с фреймворками и без них
Участники сообщества уже создали ряд прогрессивных веб-приложений с открытым исходным кодом, как с использованием библиотек и фреймворков JS, так и без них. Если вы ищете вдохновение, вам могут пригодиться репозитории ниже. Кроме того, это просто отличные приложения.
Vanilla JavaScript
- Voice Memos Пола Льюиса (Paul Lewis) – приложение, созданное с использованием архитектуры, аналогичной
app-shell(описание). - Offline Wikipedia, Джейк Арчибальд (Jake Archibald) (видео)
- Air Horner (автор – Пол Кинлан)
- Guitar Tuner, автор – Пол Льюис (Paul Lewis) (описание)
Polymer
- Zuperkulblog, Роб Додсон (Rob Dodson) (слайды)
Добавить отклик
Virtual-DOM
- Pokedex от Нолана Лоусона – отличное прогрессивное веб-приложение, в котором используется подход "делай все в веб-воркере", чтобы помочь с прогрессивным рендерингом. (описание)
Angular.js
- Timey.in (автор – Кеннет Аухенберг (Kenneth Auchenberg)) – также использует
sw-precacheдля предварительного кеширования ресурсов.
Заключительные замечания
Как уже говорилось, прогрессивные веб-приложения пока находятся на начальном этапе развития, но уже сейчас вы можете экспериментировать с ними и применять их возможности в своих веб-приложениях.
Пол Кинлан (Paul Kinlan) сейчас планирует руководство по прогрессивным веб-приложениям для раздела "Основы веб-дизайна". Если вы хотите, чтобы в нем были затронуты определенные темы, оставьте комментарий в цепочке.
Дополнительные сведения
- Прогрессивные веб-приложения: как выйти за рамки вкладок, не потеряв сути
- Почему за прогрессивными веб-приложениями будущее веб-разработки
- Прогрессивные веб-приложения: готовы к выходу на сцену
- Создание современного веб-приложения с помощью ServiceWorker
- Будущее за прогрессивными веб-приложениями
- Прогрессивные веб-приложения: новый подход к мобильным устройствам
- Pokedex.org – современное веб-приложение для поклонников покемонов
- Итоги саммита разработчиков Chrome: прогрессивные веб-приложения