Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Addy OsmaniВ последнее время было много желанных дискуссий о прогрессивных веб-приложениях . Это все еще относительно новая модель, но ее принципы могут в равной степени улучшить приложения, созданные с использованием ванильного JS, React, Polymer, Angular или любой другой платформы. В этом посте я суммирую некоторые варианты и справочные приложения, которые помогут вам начать работу с собственным прогрессивным веб-приложением уже сегодня.
Примечание. Прогрессивные веб-приложения используют современные веб-возможности для обеспечения взаимодействия с пользователем, аналогичного приложению. Они развиваются от страниц на вкладках браузера до иммерсивных приложений верхнего уровня, поддерживая низкий уровень помех в Интернете в любой момент.
Важно помнить, что прогрессивные веб-приложения работают везде, но в современных браузерах они перегружены. Прогрессивное улучшение является основой модели .
Аарон Густафсон сравнил прогрессивное улучшение с арахисовым M&M. Арахис — это ваш контент, шоколадная глазурь — ваш слой презентации, а ваш JavaScript — это твердая оболочка леденца. Этот слой может различаться по цвету, а его возможности могут различаться в зависимости от возможностей использующего его браузера.
Думайте о «конфетной оболочке» как о месте, где могут жить многие функции Progressive Web App. Это опыт, сочетающий в себе лучшее из Интернета и лучших приложений. Они полезны пользователям с самого первого посещения вкладки браузера, установка не требуется.
По мере того, как пользователь выстраивает отношения с этими приложениями посредством повторного использования, они делают конфетную оболочку еще приятнее - очень быстрая загрузка при медленных сетевых соединениях (спасибо сервисному работнику ), отправка соответствующих push-уведомлений и наличие первоклассного значка на домашней странице пользователя. экран, который может загружать их как полноэкранные приложения. Они также могут воспользоваться умными баннерами установки веб-приложений .
Прогрессивные веб-приложения также не являются уникальными для Chrome для Android. Ниже мы можем увидеть прогрессивное веб-приложение Pokedex , работающее в Firefox для Android (бета-версия), с ранним добавлением на главный экран и функциями кэширования сервисного работника, которые работают нормально.
Одним из приятных аспектов «прогрессивного» характера этой модели является то, что функции можно постепенно разблокировать по мере того, как поставщики браузеров предоставляют им лучшую поддержку. Прогрессивные веб-приложения, такие как Pokedex, конечно же, отлично работают и в Opera на Android, но с некоторыми заметными отличиями в реализации:
Чтобы глубже погрузиться в прогрессивные веб-приложения, прочитайте исходную публикацию в блоге Алекса Рассела, в которой они представлены. Пол Кинлан также запустил очень полезный тег Stack Overflow для прогрессивных веб-приложений, который стоит проверить.
Примечание. Манифест для веб-приложений — это простой файл JSON, который дает вам, как разработчику, возможность контролировать, как ваше приложение будет отображаться для пользователя в тех областях, где он ожидает увидеть приложения (например, на главном экране устройства), напрямую что пользователь может запустить и, что более важно, как он может это запустить
Манифест позволяет вашему веб-приложению выглядеть на главном экране пользователя более естественно. Он позволяет запускать приложение в полноэкранном режиме (без строки URL-адреса), обеспечивает контроль над ориентацией экрана, а в последних версиях Chrome на Android поддерживает определение заставки и цвета темы для адресной строки. Он также используется для определения набора значков по размеру и плотности, используемых для вышеупомянутого заставки и значка главного экрана.
Пример файла манифеста можно найти в Web Starter Kit и в примерах Google Chrome . Брюс Лоусон написал генератор манифестов , а Мунир Ламури также написал удобный валидатор веб-манифестов, который стоит попробовать.
В своих личных проектах я полагаюсь на Realfavicongenerator для создания значков правильного размера как для манифеста веб-приложения, так и для использования на iOS, настольных компьютерах и т. д. Модуль favicons Node также может обеспечить аналогичный результат в процессе сборки.
Браузеры на базе Chromium (Chrome, Opera и т. д.) сегодня поддерживают манифесты веб-приложений, при этом Firefox активно разрабатывает поддержку, а Edge перечисляет их как находящиеся на рассмотрении . WebKit/Safari еще не опубликовали публичных сообщений о своих намерениях реализовать эту функцию.
Chrome на Android уже некоторое время поддерживает добавление вашего сайта на главный экран, но последние версии также поддерживают упреждающие предложения по добавлению сайтов с использованием собственных баннеров установки веб-приложений .
Чтобы подсказки об установке приложения отображались, ваше приложение должно:
Доступен ряд образцов баннеров для установки приложений , охватывающих как базовые баннеры , так и более сложные варианты использования, такие как отображение связанных приложений .
Сервис-воркер — это скрипт, который работает в фоновом режиме отдельно от вашей веб-страницы. Он реагирует на события, включая сетевые запросы, сделанные со страниц, которые он обслуживает. У сервисного работника намеренно короткая жизнь.
Он просыпается, когда получает событие, и работает только до тех пор, пока ему необходимо его обработать. Service Worker позволяет использовать Cache API для кэширования ресурсов и может использоваться для предоставления пользователям автономной работы.
Сервис-воркеры являются мощными инструментами автономного кэширования, но они также обеспечивают значительный выигрыш в производительности за счет мгновенной загрузки при повторных посещениях вашего сайта или веб-приложения. Вы можете кэшировать оболочку своего приложения, чтобы оно работало в автономном режиме, и заполнять его содержимое с помощью JavaScript.
Полный набор образцов сервисных работников доступен в примерах Google Chrome. Офлайн-поваренная книга Джейка Арчибальда обязательна к прочтению, и я настоятельно рекомендую попробовать первое руководство по автономному веб-приложению Пола Кинлана, если вы новичок в сфере обслуживания.
Наша команда также поддерживает ряд вспомогательных утилит для сервисных работников и инструментов сборки, которые мы считаем полезными для сокращения накладных расходов при настройке сервисных работников. Они перечислены в библиотеках Service Worker . Двумя основными из них являются:
Джефф Посник написал краткое руководство по sw-precache под названием Offline-first, fast, с модулем sw-precache и кодовой лабораторией для того же инструмента, который может оказаться вам полезным.
Chrome, Opera и Firefox реализовали поддержку Service Worker, а Edge имеет положительные публичные сигналы об интересе к этой функции. Сафари кратко упомянул об интересе к нему в предложенном одним инженером пятилетнем плане .
Примечание. Push-уведомления позволяют вашим пользователям получать своевременные обновления с любимых ими сайтов, а вам позволяют эффективно повторно привлекать их персонализированным интересным контентом.
По сути, вы можете создавать веб-приложения, с которыми пользователи могут взаимодействовать за пределами вкладки. Браузер можно закрыть, и им даже не нужно активно использовать ваше веб-приложение, чтобы взаимодействовать с вами. Для этой функции требуется как Service Worker, так и манифест веб-приложения, основанный на некоторых функциях, описанных ранее.
Push API реализован в Chrome, находится в стадии разработки в Firefox и находится на рассмотрении в Edge. От Safari пока нет публичных сигналов о намерении реализовать эту функцию.
Push-уведомления в открытой сети — это подробное введение в настройку Push, написанное Мэттом Гонтом, а кодовая лаборатория push-уведомлений также доступна на сайте Web Fundamentals.
Майкл ван Оуверкерк из команды Chrome также предлагает 6-минутное введение в Push, если вы больше предпочитаете видео.
Помните, что ваш пользовательский опыт может быть разным в зависимости от браузера, который используется для просмотра вашего веб-приложения. Вы контролируете твердую оболочку леденца.
Дополнительные функции веб-платформы, такие как фоновая синхронизация (для синхронизации данных с сервером, даже когда ваше веб-приложение закрыто) и веб-Bluetooth (для общения с устройствами Bluetooth из вашего веб-приложения), также могут быть внедрены в ваше Progressive Web App в таким образом.
В Chrome включена одноразовая фоновая синхронизация, и у Джейка Арчибальда есть видео его автономного приложения в Википедии и статья , демонстрирующая его в действии. У Франсуа Бофорта также есть несколько образцов Web Bluetooth , если вы заинтересованы в опробовании этого API.
На самом деле ничто не мешает вам применить любой из вышеперечисленных принципов к существующему приложению или платформе, с помощью которой вы создаете. Несколько других принципов, которые стоит учитывать при создании прогрессивного веб-приложения, — это ориентированная на пользователя модель производительности RAIL и анимация на основе FLIP .
Я надеюсь, что в течение 2016 года мы увидим рост числа шаблонных и начальных проектов, органично внедряющихся в поддержку прогрессивных веб-приложений в качестве основной функции. До тех пор барьер для добавления этих функций в ваши собственные приложения не очень высок и, ИМХО, вполне стоит затраченных усилий.
Существуют разные уровни того, как «все включено» в модели прогрессивного веб-приложения, но один общий подход заключается в их архитектуре вокруг оболочки приложения. Это не жесткое требование, но оно дает несколько преимуществ.
Архитектура оболочки приложения поощряет кэширование оболочки приложения (пользовательский интерфейс), чтобы оно работало в автономном режиме и заполняло свое содержимое с помощью JavaScript. При повторных посещениях это позволяет вам очень быстро получать значимые пиксели на экране без сети, даже если ваш контент в конечном итоге поступает оттуда. Это дает значительный прирост производительности.
Джереми Кит недавно заметил , что в этом типе модели, возможно, рендеринг на стороне сервера не следует рассматривать как запасной вариант, а рендеринг на стороне клиента следует рассматривать как усовершенствование. Это справедливый отзыв.
В модели оболочки приложения следует максимально использовать рендеринг на стороне сервера, а прогрессивный рендеринг на стороне клиента следует использовать в качестве улучшения точно так же, как мы «улучшаем» работу при поддержке Service Worker. В конечном итоге к этому можно подойти множеством способов.
Я рекомендую прочитать нашу статью об архитектуре и оценить, как лучше всего применить подобные принципы к вашему собственному приложению и стеку.
Репозиторий app-shell содержит практически полную реализацию архитектуры Application Shell . У него есть серверная часть, написанная на Express.js , и интерфейсная часть, написанная на ES2015.
Учитывая, что он охватывает как клиентскую, так и серверную части модели и там происходит довольно много всего, потребуется некоторое время, чтобы ознакомиться с кодовой базой. В остальном это наша наиболее полная отправная точка для прогрессивных веб-приложений на данный момент. Документы будут нашим следующим направлением в этом проекте.
Официальная отправная точка для веб-приложений Polymer поддерживает следующие функции Progressive Web App:
В текущей версии PSK отсутствует поддержка некоторых более продвинутых шаблонов производительности (например, модели Application Shell, асинхронной загрузки), которые можно найти в некоторых веб-приложениях Progressive Polymer.
Мы намерены попробовать внедрить эти шаблоны в PSK в 2016 году, но ранние эксперименты в этом направлении можно найти в приложении Polymer Zuperkulblog Роба Додсона и в превосходном докладе Эрика Бидельмана о шаблонах Polymer Perf Patterns .
Наша убежденная отправная точка для новых ванильных проектов включает в себя следующие функции Progressive Web App:
Если вы предпочитаете работать с ванильным JS/ES2015 и не можете использовать Polymer, Web Starter Kit может оказаться полезным в качестве ориентира, из которого вы можете повторно использовать или украсть фрагменты кода.
Членами сообщества уже создан ряд прогрессивных веб-приложений с открытым исходным кодом как с библиотеками и фреймворками JS, так и без них. Если вы ищете вдохновение, приведенные ниже репозитории могут оказаться полезными в качестве справочного материала. Это также чертовски хорошие приложения.
Как уже упоминалось, прогрессивные веб-приложения все еще находятся в зачаточном состоянии, но сейчас интересное время, чтобы поиграть с лежащими в их основе методологиями и посмотреть, насколько хорошо они могут применяться к вашим собственным веб-приложениям.
Пол Кинлан в настоящее время планирует руководство по основам веб-технологий для прогрессивных веб-приложений, и если у вас есть предложения по областям, которые вы хотели бы видеть освещенными, не стесняйтесь комментировать ветку.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2015-12-15 UTC.
