Благодарим за настройку Google I/O! Смотрите контент по запросу .

Эта страница переведена с помощью Cloud Translation API.

Санта-Трекер как PWA

Краткое содержание

К праздникам 2016 года Santa Tracker был быстро преобразован в автономное прогрессивное веб-приложение, отчасти благодаря нашему существующему дизайну сцен.

Результаты

Santa — это прогрессивное веб-приложение (PWA), поддерживающее добавление на главный экран (ATHS) и в автономном режиме.
10 % соответствующих критериям сеансов начинались с помощью значка ATHS.
75% пользователей изначально поддерживают пользовательские элементы и теневой DOM, две основные части веб-компонентов.
Маяк: 81 балл.
Автономный режим через API Service Worker связан с ленивой загрузкой, чтобы кэшировать только посещенные сцены и автоматически обновлять их в новых выпусках.

Фон

Santa Tracker — это праздничная традиция в Google. Каждый год вы можете отмечать сезон играми и образовательными мероприятиями в течение декабря. И пока Санта берет заслуженный перерыв, эльфы работают над выпуском Santa Tracker с открытым исходным кодом как в Интернете , так и для Android .

В сети Santa Tracker представляет собой большой интерактивный сайт со множеством уникальных «сцен», написанных с использованием Polymer и поддерживающих большинство современных браузеров. Оценка того, является ли браузер пользователя «современным», определяется посредством обнаружения функций: Санта требует, среди прочего, Set и Web Performance API .

В 2016 году мы обновили движок Santa Tracker, чтобы обеспечить поддержку большинства сцен в автономном режиме. Сюда не входят сцены, основанные на видеороликах YouTube, или те, которые связаны с живым местоположением Санты, которое, конечно, доступно только при прямом подключении к Северному полюсу! 📶☃️

Проблемы

Santa имеет адаптивный дизайн, который хорошо работает на телефонах, планшетах и настольных компьютерах. Сайт восхищает отличными мультимедиа, включая стилизованные визуальные эффекты и праздничное аудио. Однако обычная сборка Санта-Трекера занимает несколько сотен мегабайт! Это происходит по нескольким причинам:

Santa поддерживается более чем на 35 языках, поэтому многие ресурсы необходимо дублировать.
Разные платформы имеют разную поддержку мультимедиа (например, mp3 или ogg).
Мультимедийные файлы иногда предоставляются в разных размерах и разрешениях.

Эльфы Санты также усердно работают в течение декабря, часто выпуская новые важные обновления в течение месяца. Это означает, что ресурсы, уже кэшированные браузером пользователя, возможно, придется обновлять при повторных посещениях.

Эти проблемы:

Большие мультимедийные ресурсы для разных «сцен».
Изменения, публикуемые в течение месяца

…приведут к непригодности наивной офлайн-стратегии.

Санта, построенный из полимера

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

Santa — это одностраничное приложение, изначально написанное на Polymer 0.5, а теперь обновленное до Polymer 1.7. Санта состоит из общего набора кода — маршрутизатора, общих навигационных ресурсов и т. д. Он также имеет множество уникальных «сцен».

Каждая сцена доступна через отдельный URL-адрес — /village.html , /codelab.html и /boatload.html — и представляет собой отдельный веб-компонент. Когда пользователь открывает сцену, мы предварительно загружаем весь необходимый HTML и ресурсы (изображения, аудио, CSS, JS), которые существуют в папке /scenes/[[sceneName]] в репозитории Santa Tracker. Пока это происходит, пользователи видят дружественный предварительный загрузчик, который показывает прогресс.

Такой подход означает, что нам не нужно загружать ненужные ресурсы для сцен, которые пользователь не видит (а это большой объем данных). Это также означает, что нам необходимо хранить внутренний «манифест кэша» всех ресурсов, необходимых для каждой сцены. Манифест кэша представляет собой файл JSON, в котором хранится сопоставление имени файла с хешем MD5 его содержимого.

Загрузите то, что вы используете

Эта модель экономит пропускную способность, предоставляя только ресурсы, необходимые для сцен, которые посещает пользователь, а не предварительную загрузку всего сайта сразу. Santa Tracker использует способность Polymer обновлять пользовательские элементы во время выполнения, а не во время загрузки. Рассмотрим следующий фрагмент:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Santa Tracker выполняет следующие шаги для загрузки сцены, например, boatload-scene :

Все элементы сцены (включая <boatload-scene> ) изначально неизвестны и обрабатываются как HTMLUnknownElement с некоторыми дополнительными атрибутами.
При изменении выбранной сцены элемент <lazy-pages> уведомляется.
Элемент <lazy-pages> разрешает атрибут элемента и path сцены, загружая HTML-файл import scenes/boatload/boatload-scene_en.html . Он содержит элемент Polymer и его зависимые элементы.
Показан дружественный прелоадер.
После загрузки и выполнения импорта HTML <boatload-scene> прозрачно преобразуется в настоящий элемент Polymer, полный праздничного настроения. 🎄🎉

У этого подхода есть свои проблемы. Например, мы не хотим включать повторяющиеся веб-компоненты. Если в двух сценах используется общий элемент, например paper-button , мы удаляем его как часть процесса сборки и вместо этого включаем в общий код Санты.

Оффлайн дизайн

Santa Tracker уже аккуратно сегментирован на сцены благодаря Polymer и lazy-pages ; плюс каждая сцена имеет свой собственный каталог. Мы разработали сервис-воркер Santa Tracker, основной компонент, который позволяет работать в автономном режиме в браузере пользователя и учитывать разницу между общим кодом и «сценой».

Какова теория Service Worker? Когда пользователь в поддерживаемом браузере загружает ваш сайт, HTML-интерфейс внешнего интерфейса может запросить установку Service Worker. В Santa Tracker сервис-воркер находится в /sw.js . Это запускает событие install , которое предварительно кэширует весь общий код Санты, поэтому во время выполнения ничего не нужно извлекать.

После установки Service Worker может перехватывать все HTTP-запросы. Для Santa Tracker упрощенный процесс принятия решений выглядит так:

Запрос уже кэширован?
- Большой! Верните кэшированный ответ.
Соответствует ли запрос каталогу сцены, например «scenes/boatload/boatload-scene_en.html»?
- Выполните сетевой запрос и сохраните результат в кеше, прежде чем вернуть его пользователю.
В противном случае выполните обычный сетевой запрос.

Наше событие потока и install позволяет Santa Tracker загружаться, даже когда пользователь находится в автономном режиме. Однако будут доступны только сцены, ранее загруженные пользователем. Это идеально подходит для того, чтобы переиграть игру и побить свой рекорд.

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

Мы сделаем это вживую

Как мы уже упоминали, эльфы Санты усердно работают весь декабрь, и им часто приходится выпускать новые обновления в течение месяца. При создании выпуска Santa Tracker ему присваивается уникальная метка, например v20161204112055 , временная метка выпуска (11:20:55 4 декабря 2016 г.).

Для этого помеченного выпуска мы генерируем MD5-хэш каждого файла и сохраняем его в нашем «манифесте кэша». На современном твердотельном диске это лишь добавляет к процессу сборки несколько секунд.

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

Мы также развертываем новую версию того, что мы называем «продуктовыми» ресурсами — HTML-индексом Санта-Клауса и сервис-воркером, — которые находятся на https://santatracker.google.com/ . Это перезапишет старую версию.

Всякий раз, когда Santa Tracker загружается, браузер проверяет наличие обновленного сервис-воркера и извлекает его, если он доступен. В нашем случае каждый релиз генерирует разный по байту код. Браузер воспринимает это как обновление и выполняет новое событие install .

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

В Santa Tracker обновление сервис-воркера приводит к немедленной перезагрузке браузера пользователя.

Опыт автономного просмотра

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

Небольшой баннер сообщит вам, когда вы просматриваете страницы в автономном режиме. Все сцены, которые не кэшируются, «заморожены» и недоступны для кликов. Таким образом, пользователи не смогут получить доступ к контенту, который недоступен.

Santa Tracker регулярно отправляет запросы к API Санты. Если эти запросы завершаются неудачей или истекает время ожидания, мы предполагаем, что пользователь находится в автономном режиме. Мы используем этот API, а не встроенное в браузер свойство navigator.onLine : оно сообщит нам только о том, находится ли пользователь в сети. (Это также известно как Lie-Fi).

Международная связь

Хотя большинство наших пользователей говорят на английском языке (за ним следуют японский, португальский, испанский и французский), Santa создан и выпущен более чем на 35 различных языках.

Когда пользователь загружает Santa Tracker, мы используем язык браузера и другие подсказки, чтобы выбрать язык для обслуживания. Большинство пользователей никогда не перезаписывают этот язык. Однако если пользователь выбирает новый язык с помощью нашего средства выбора, мы рассматриваем это так, как будто доступно обновление — так же, как в приведенном выше случае, когда доступна новая версия Santa Tracker.

Другими словами, текущая версия Santa Tracker для сервис-воркера на самом деле представляет собой кортеж (build,language) .

Добавить на главный экран

Поскольку Санта работает в автономном режиме и предоставляет сервисного работника, подходящим пользователям предлагается установить его на свой главный экран. В 2016 году около 10 % подходящих загрузок осуществлялось с помощью значка на главном экране.

Заключение

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

Хотя Santa — это в основном специально разработанное решение, многие его принципы можно найти в App Toolbox проекта Polymer Project. Мы предлагаем вам проверить это, если вы создаете новый PWA с нуля, или, если вы ищете подход, не зависящий от платформы, попробуйте Workbox Library .