Содержание

Реализация офлайн-доступа и повышение производительности

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

Помните: сервис-воркер не может взаимодействовать с вашей страницей, полученной из AMP-кеша. Используйте его на последующих этапах, — когда пользователь перейдет на страницы, размещенные на вашем домене.

Установка сервис-воркера

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

ПРИМЕЧАНИЕ. Если вы раньше не встречали понятие «сервис-воркер», ознакомьтесь с вводным материалом на WebFundamentals.

Страница должна зарегистрировать сервис-воркер, чтобы браузер смог найти или запустить его. Обычно для регистрации используется код JavaScript, но на AMP-страницах для этой цели используется компонент amp-install-serviceworker.

Для начала добавьте в раздел вашей страницы тег script для загрузки компонента amp-install-serviceworker:

<script async custom-element="amp-install-serviceworker"
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

Затем добавьте следующую строку где угодно внутри тега <body> (измените, как необходимо, чтобы указать на ваш Service Worker):

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay">
</amp-install-serviceworker>

Как только пользователь попадает на AMP-страницу на вашем домене (помните о том, что первой посещаемой пользователем страницей обычно является страница из AMP-кеша), сервис-воркер активизируется, позволяя вам делать множество интересных вещей.

AMP Service Worker

Читатели этой статьи с большой долей вероятности занимаются созданием AMP-страниц. Команда AMP ставит удобство пользователей превыше всего и заботится о том, чтобы посещение сайтов было для них максимально комфортным. Чтобы согласованно достигать этих целей, команда AMP разработала сервис-воркер специально для AMP!

СОВЕТ. Пройдите обучение, чтобы узнать, как использовать AMP Service Worker в своем приложении PWA.

Установка сервис-воркера AMP

Установка AMP Service Worker выполняется всего за пару действий:

Импортируйте код AMP Service Worker в свой файл сервис-воркера.

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');

Установите сервис-воркер при помощи следующего кода.

AMP_SW.init();

И это все.

Автоматическое кеширование

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

Если приложению требуется определенное поведение кеширования документов, AMP Service Worker позволяет его настроить. Например, можно указать список документов, которые должны всегда загружаться из сети. В примере ниже замените Array<RegExp> массивом регулярных выражений, определяющих URL-адреса документов, которые не следует кешировать.

AMP_SW.init(
documentCachingOptions: {
denyList?: Array<RegExp>;
}
);

Подробнее о настройке кеширования документов см. здесь.

Оптимизация AMP Service Worker

Для того чтобы использовать все возможности AMP Service Worker, настройте кеширование необходимых ассетов и предварительную загрузку ссылок при помощи опциональных полей.

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

AMP_SW.init(
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
);

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

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

<a href='....' data-rel='prefetch' />

Офлайн-работа

Добавьте специальную страницу, чтобы сообщать пользователям об отсутствии подключения к сети и рекомендовать им обновить сайт после восстановления подключения. AMP Service Worker может кешировать как саму страницу, так и ее ассеты.

AMP_SW.init({
offlinePageOptions: {
url: '/offline.html';
assets: ['/images/offline-header.jpg'];
}
})

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

Принудительное обновление

Команда AMP работает над реализацией функции принудительного обновления или удаления AMP Service Worker, которая позволит отключить сервис-воркер или изменить его код, если при его установке на устройства пользователей будет допущена ошибка.

Для того чтобы эффективно управлять сервис-воркером, следует понимать, как стандартное HTTP-кеширование влияет на обновление его JavaScript-кода на стороне клиента. Корректная настройка директив HTTP-кеширования, возвращаемых сервером вместе с файлом сервис-воркера, позволит вам исправлять мелкие ошибки, внося соответствующие изменения в код сервис-воркера, размещенный на сервере. На случай, если сервис-воркер потребуется удалить, полезно иметь под рукой файл простого сервис-воркера, не выполняющего никаких операций, например:

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

Подробнее об управлении установленными сервис-воркерами читайте здесь.

Написание собственного сервис-воркера

При помощи описанной выше методики можно обеспечивать офлайн-доступ к вашему AMP-сайту, а также дополнять содержимое страниц сразу после их загрузки с сервера, так как сервис-воркер может произвольно изменять содержимое ответа, используя событие fetch:

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite').then(function(cache) {
return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})

        // Modify the response here before it goes out..
        ...

        return response || fetchPromise;
      })
    })

);
});

Эта методика позволяет добавлять на AMP-страницу дополнительную функциональность, которая в ином случае не прошла бы валидацию AMP, например:

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

Written by @CrystalOnScript
with contributions from @pbakaus