[Russian] Сервис-воркеры: используем накопленные знания для светлого будущего PWA

Максим Сальников
@webmaxru
Сервис-воркеры:Сервис-воркеры:
используем накопленные знанияиспользуем накопленные знания
для светлого будущего PWAдля светлого будущего PWA

“ Что мы узнали за 3 года использования
PWA?

“ Что мы узнали за 3 года использования
PWA?
И как жить дальшеИ как жить дальше

Максим СальниковМаксим Сальников
@webmaxru@webmaxru
Google Dev Expert, Microsoft MVPGoogle Dev Expert, Microsoft MVP
Организатор Mobile / Web /Организатор Mobile / Web / PWA PWA
митапов в Осло и Лондонемитапов в Осло и Лондоне
Организатор конференцийОрганизатор конференций
Mobile Era и ngVikingsMobile Era и ngVikings
“ Full-stack разработчик "приложений
из будущего" в ForgeRock

#YearOfPWA#YearOfPWA
Что новенького?Что новенького?

Еще одно определение PWAЕще одно определение PWA

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

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

Кросс-платформенные?Кросс-платформенные?

БраузерыБраузеры

МобильныеМобильные

НастольныеНастольные

Для разработчиков

Магазины?Магазины?
Для разработчиков

Новые преимущества?Новые преимущества?

Онлайн больше не обязателенОнлайн больше не обязателен

Получение уведомленийПолучение уведомлений

Масса других возможностейМасса других возможностей
Получение уведомленийПолучение уведомлений

Получение уведомленийПолучение уведомлений Service Worker API
}}

Получение уведомленийПолучение уведомлений Service Worker API
Web App Manifest
Полноценное приложениеПолноценное приложение
}}

Сервис-воркерСервис-воркер

ДвигательДвигатель PWAPWA

ЛогическиЛогически ФизическиФизически

Приложение

Сервис-воркер

JSJS -файл-файл
Сервис-воркер

ИнструментарийИнструментарий
Service Worker APIService Worker API
Cache APICache API
IndexedDBIndexedDB
FetchFetch
Clients APIClients API
Broadcast Channel APIBroadcast Channel API
Push APIPush API
Notiﬁcations APINotiﬁcations API

ИнструментарийИнструментарий
Service Worker APIService Worker API
Cache APICache API
IndexedDBIndexedDB
FetchFetch
Clients APIClients API
Broadcast Channel APIBroadcast Channel API
Push APIPush API
Notiﬁcations APINotiﬁcations API
Local StorageLocal Storage
Session StorageSession Storage
XMLHttpRequestXMLHttpRequest
DOMDOM

Непростой жизненный циклНепростой жизненный цикл
https://bitsofco.de/the-service-worker-lifecycle/

Загрузка

'install'
Загрузка Установка

'install'
Загрузка Установка
Ожидание

'install'
Загрузка Установка Активация
'activate'
Ожидание

'install'
'activate'
Ожидание Активен

'install'
Удален
'activate'
Ожидание Активен

ПрогрессивныеПрогрессивные веб-веб-
приложенияприложения

“ стремящийся к прогрессу,стремящийся к прогрессу,
проникнутый передовымипроникнутый передовыми
идеямиидеями

“ стремящийся к прогрессу,стремящийся к прогрессу,
проникнутый передовымипроникнутый передовыми
идеямиидеями
“ постепеннопостепенно
возрастающий,возрастающий,
увеличивающийсяувеличивающийся

ПрогрессивноеПрогрессивное улучшение улучшение
Совет #1Совет #1

ПрогрессивноеПрогрессивное улучшение улучшение
Определяйте наличиеОпределяйте наличие
функциональностифункциональности

https://tomayac.github.io/pwa-feature-detector/

РегистрацияРегистрация
if ('serviceWorker' in navigator) {
// Регистрируем сервис-воркер
}

Фоновая синхронизацияФоновая синхронизация
if ('SyncManager' in window) {
// Реализуем функциональность для оффлайн-режима
}

Подписка на pushПодписка на push
if (!('PushManager' in window)) {
// Прячем интерфейс подписки на push-уведомления
}

Действия в уведомленияхДействия в уведомлениях
if ('actions' in Notification.prototype) {
// Можем использовать кнопки с разными действиями
}

ПравильныйПравильный момент момент
для регистрациидля регистрации

ПравильныйПравильный момент момент
для регистрациидля регистрации
Чем позже, тем лучшеЧем позже, тем лучше

navigator.serviceWorker.register('/sw-workbox.js')
.then(...);
}

window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw-workbox.js')
.then(...);
)};
}

platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(() => {
// Регистрация сервис-воркера
});
main.tsmain.ts

Если что-то пошлоЕсли что-то пошло
не такне так

Если что-то пошлоЕсли что-то пошло
не такне так
Нужен kill switchНужен kill switch

План спасенияПлан спасения

РазрегистрироватьРазрегистрировать сервис-воркер? сервис-воркер?

РазместитьРазместить исправленныйисправленный сервис-воркер (или no- сервис-воркер (или no-
op)op)

РазместитьРазместить исправленныйисправленный сервис-воркер (или no- сервис-воркер (или no-
op)op)
Удостовериться, что сервис-воркер не берется изУдостовериться, что сервис-воркер не берется из
кеша HTTPкеша HTTP

No-opNo-op
self.addEventListener('install', () => {
self.skipWaiting();
});
https://stackoverﬂow.com/questions/33986976/how-can-i-remove-a-buggy-service-worker-or-implement-a-kill-switch

No-opNo-op
self.addEventListener('install', () => {
self.skipWaiting();
});
self.addEventListener('activate', () => {
self.clients.matchAll({type: 'window'}).then(tabs => {
tabs.forEach(tab => {
tab.navigate(tab.url);
});
});
});
Крайняя мера для UXКрайняя мера для UX
https://stackoverﬂow.com/questions/33986976/how-can-i-remove-a-buggy-service-worker-or-implement-a-kill-switch

Обновление и обход кеша HTTPОбновление и обход кеша HTTP
Cache-Control: no-cache
Побайтное сравнение, нужно использоватьПобайтное сравнение, нужно использовать
версионностьверсионность

Ресурсы, импортированные через importScripts() Ресурсы, импортированные через importScripts()
версионностьверсионность
navigator.serviceWorker.register(`/sw.js?v=${VERSION}`);
Контент не проверяется, нужно менятьКонтент не проверяется, нужно менять названиеназвание
ресурсаресурса

Ресурсы, импортированные через importScripts() Ресурсы, импортированные через importScripts()
https://github.com/w3c/ServiceWorker/issues/893
версионностьверсионность Спецификация
Спецификация
обновлена
обновлена
navigator.serviceWorker.register(`/sw.js?v=${VERSION}`);
Контент не проверяется, нужно менятьКонтент не проверяется, нужно менять названиеназвание
ресурсаресурса

updateViaCacheupdateViaCache
index.htmlindex.html
https://w3c.github.io/ServiceWorker/#dfn-update-via-cache
navigator.serviceWorker.register('/sw.js', {
updateViaCache: 'none'
})

updateViaCacheupdateViaCache
https://w3c.github.io/ServiceWorker/#dfn-update-via-cache
navigator.serviceWorker.register('/sw.js', {
updateViaCache: 'none'
})
Значения: "Значения: "importsimports", "all" или "none"", "all" или "none"

ПредварительноеПредварительное
кешированиекеширование

ПредварительноеПредварительное
Знайте ваши ресурсы и неЗнайте ваши ресурсы и не
оставляйте мусороставляйте мусор

const appShellFilesToCache = [
...
'./non-existing.html'
]
sw-handmade.jssw-handmade.js

...
'./non-existing.html'
]
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(cacheName).then((cache) => {
return cache.addAll(appShellFilesToCache)
})
)
})

ОшибкиОшибки HTTPHTTP

Время работыВремя работы сервис-воркера сервис-воркера

Время работыВремя работы сервис-воркера сервис-воркера
ОшибкиОшибки хранилищхранилищ

https://developers.google.com/web/fundamentals/instant-and-oﬄine/web-storage/oﬄine-for-pwa
Объем хранилищ ограниченОбъем хранилищ ограничен

Chrome <6% своб. пространства
Firefox <10% своб. пространства
Safari <50MB
IE10 <250MB
Edge Зависит от размера диска

Chrome <6% своб. пространства
Firefox <10% своб. пространства
Safari <50MB
IE10 <250MB
Edge Зависит от размера диска
if ('storage' in navigator && 'estimate' in navigator.storage) {
navigator.storage.estimate().then(({usage, quota}) => {
console.log(`Using ${usage} out of ${quota} bytes.`);
});
}

Кеширование ресурсов сКеширование ресурсов с
других адресовдругих адресов

Кеширование ресурсов сКеширование ресурсов с
других адресовдругих адресов
ПриготовьтесьПриготовьтесь
к непрозрачностик непрозрачности

2 варианта2 варианта

Добавить заголовкиДобавить заголовки CORSCORS на удаленной сторонена удаленной стороне

Добавить заголовкиДобавить заголовки CORSCORS на удаленной сторонена удаленной стороне
ОбрабатыватьОбрабатывать opaque ответыopaque ответы

Ограничения opaque ответовОграничения opaque ответов
https://stackoverﬂow.com/questions/39109789/what-limitations-apply-to-opaque-responses/39109790#39109790

СвойствоСвойство status всегда равно нулюstatus всегда равно нулю и не зависит от и не зависит от
того, успешен запрос или неттого, успешен запрос или нет

СвойствоСвойство status всегда равно нулюstatus всегда равно нулю и не зависит от и не зависит от
того, успешен запрос или неттого, успешен запрос или нет
Методы Cache APIМетоды Cache API add()add()//addAll()addAll() сработают аварийносработают аварийно,,
если статус хотя бы одного из ответов не находится весли статус хотя бы одного из ответов не находится в
диапазоне 2XXдиапазоне 2XX

...
'https://workboxjs.org/offline-ga.min.svg'
]

...
'https://workboxjs.org/offline-ga.min.svg'
]
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(cacheName).then((cache) => {
return cache.addAll(appShellFilesToCache)
})
)
})

Решение для no-corsРешение для no-cors
const noCorsRequest =
new Request('https://workboxjs.org/offline-ga.svg', {
mode: 'no-cors'
});
fetch(noCorsRequest)
.then(response => cache.put(noCorsRequest, response));

ПравильныеПравильные инструменты инструменты

ПравильныеПравильные инструменты инструменты
Доверяй И проверяйДоверяй И проверяй

Инструменты помогаютИнструменты помогают

РеализовыватьРеализовывать сложныесложные алгоритмыалгоритмы

ПерениматьПеренимать лучшие практикилучшие практики

Фокусироваться наФокусироваться на ВАШЕЙВАШЕЙ задаче задаче

Следить заСледить за обновлениями спецификацийобновлениями спецификаций

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

ФреймворкиФреймворки
create-react-appcreate-react-app
preact-clipreact-cli
polymer-clipolymer-cli
vue-clivue-cli
angular-cliangular-cli

sw-precache / sw-toolboxsw-precache / sw-toolbox
WorkboxWorkbox
oﬄine-plugin для Webpackoﬄine-plugin для Webpack
PWABuilder.comPWABuilder.com
vue-clivue-cli
ГенераторыГенераторы

sw-precache / sw-toolboxsw-precache / sw-toolbox
WorkboxWorkbox
oﬄine-plugin для Webpackoﬄine-plugin для Webpack
PWABuilder.comPWABuilder.com
LighthouseLighthouse
SonarwhalSonarwhal
vue-clivue-cli
ГенераторыГенераторы
АудитАудит

App shellApp shell
Динамическое кешированиеДинамическое кеширование Оффлайн GAОффлайн GA
Повторение неуспешных запросовПовторение неуспешных запросов
Уведомления об обновленияхУведомления об обновлениях Build-интеграцииBuild-интеграции
https://workboxjs.org

App shellApp shell
Динамическое кешированиеДинамическое кеширование Оффлайн GAОффлайн GA
Повторение неуспешных запросовПовторение неуспешных запросов
Уведомления об обновленияхУведомления об обновлениях Build-интеграцииBuild-интеграции
Возможность расширятьВозможность расширять
функциональностьфункциональность собственногособственного
сервис-воркерасервис-воркера
https://workboxjs.org

Генерация и валидация Web App ManifestГенерация и валидация Web App Manifest
Генерация сервис-воркераГенерация сервис-воркера
Генерация графики (иконки)Генерация графики (иконки)
https://www.pwabuilder.com/

Генерация и валидация Web App ManifestГенерация и валидация Web App Manifest
Генерация сервис-воркераГенерация сервис-воркера
Генерация графики (иконки)Генерация графики (иконки)
Генерация нативных проектов дляГенерация нативных проектов для
размещения в магазиныразмещения в магазины
приложенийприложений
https://www.pwabuilder.com/

https://sonarwhal.com
npm install -g sonarwhal
sonarwhal --init
sonarwhal https://airhorner.com

https://sonarwhal.com
npm install -g sonarwhal
sonarwhal --init
sonarwhal https://airhorner.com
npm install -g lighthouse
lighthouse https://airhorner.com
https://github.com/GoogleChrome/lighthouse

Push-Push-уведомленияуведомления

Push-Push-уведомленияуведомления
Реинкарнации "всплывающихРеинкарнации "всплывающих
окон" - НЕТ!окон" - НЕТ!

ПодпискаПодписка

Только послеТолько после явногоявного запроса от пользователязапроса от пользователя

Только послеТолько после явногоявного запроса от пользователязапроса от пользователя
Очевидная и простаяОчевидная и простая отпискаотписка

УведомленияУведомления

Рассмотреть всеРассмотреть все альтернативныеальтернативные варианты. варианты.
Уведомление – крайний случай.Уведомление – крайний случай.

Рассмотреть всеРассмотреть все альтернативныеальтернативные варианты. варианты.
Уведомление – крайний случай.Уведомление – крайний случай.
Не для массовых, но дляНе для массовых, но для индивидуальныхиндивидуальных
сообщенийсообщений

MyAirlineMyAirline
Открыта регистрация на
ваш рейс

MyAirlineMyAirline
ваш рейс MyAirline

MyAirlineMyAirline
ваш рейс MyAirline
myairline.com

SVO -> KUFSVO -> KUF
myairline.com

Нажмите здесь, чтобы
зарегистрироваться
myairline.com

Ваш рейс
MY 1228
Отправление
21.09 13:45
Нажмите здесь, чтобы
зарегистрироваться
myairline.com

СодержимоеСодержимое
Не повторяйтесь.Не повторяйтесь. Места и так мало. Места и так мало.
ОтправляйтеОтправляйте непосредственно информацию,непосредственно информацию, а не а не
факт ее поступленияфакт ее поступления
ПродумайтеПродумайте призыв к действиюпризыв к действию

Не толькоНе только

Не толькоНе только
Используйте весь потенциалИспользуйте весь потенциал
сервис-воркерасервис-воркера

Балансировщик нагрузкиБалансировщик нагрузки
https://serviceworke.rs/load-balancer.html

Перехватываем запросы и Перехватываем запросы и выбираемвыбираем
определенный серверопределенный сервер

Перехватываем запросы и Перехватываем запросы и выбираемвыбираем
определенный серверопределенный сервер
Например,Например, наименее нагруженныйнаименее нагруженный или дляили для A/BA/B
тестированиятестирования

Загрузки из браузераЗагрузки из браузера
https://serviceworke.rs/local-download_service-worker_doc.html
service-worker.jsservice-worker.js
self.addEventListener('fetch', function(event) {
if(event.request.url.indexOf("download-file") !== -1) {
event.respondWith(event.request.formData().then( formdata => {
var response = new Response(formdata.get("filebody"));
response.headers.append('Content-Disposition',
'attachment; filename="' + formdata.get("filename") + '"');
return response;
}));
}
});

Поддержка WebP (с WASM)Поддержка WebP (с WASM)
https://medium.com/@kennethrohde/on-the-ﬂy-webp-decoding-using-wasm-and-a-service-worker-33e519d8c21e
service-worker.jsservice-worker.js
event.respondWith(async function() {
const response = await fetch(event.request);
const buffer = await response.arrayBuffer();
const WebPDecoder = await fetchWebPDecoder();
const decoder = new WebPDecoder(buffer);
const blob = await decoder.decodeToBMP();
return new Response(blob, { headers: { "content-type": "image/bmp",
"status": 200 } });
}());

bit.ly/bit.ly/go-pwa-slackgo-pwa-slack
1400+ разработчиков1400+ разработчиков
Представители основных браузеров,Представители основных браузеров,
библиотек, фреймворковбиблиотек, фреймворков
t.me/t.me/pwa_rupwa_ru
Все о PWA на русском языкеВсе о PWA на русском языке

Спасибо!Спасибо!
@webmaxru@webmaxru
Максим СальниковМаксим Сальников

НовыеНовые функциифункции

НовыеНовые функциифункции
Еще в разработкеЕще в разработке

Периодическая синхронизацияПериодическая синхронизация

ОграничениеОграничение временным интервалом, состоянием временным интервалом, состоянием
батареи, режимом подключения к сетибатареи, режимом подключения к сети

ТребуетТребует явного разрешенияявного разрешения со сторонысо стороны
пользователяпользователя

Не требуется поддержкиНе требуется поддержки со стороны серверасо стороны сервера

Не требуется поддержкиНе требуется поддержки со стороны серверасо стороны сервера
Финальное решение по запуску –Финальное решение по запуску – за браузеромза браузером

navigator.serviceWorker.ready.then((registration) => {
registration.periodicSync.register({
tag: 'get-latest-news', // default: ''
minPeriod: 12 * 60 * 60 * 1000, // default: 0
powerState: 'avoid-draining', // default: 'auto'
networkState: 'avoid-cellular' // default: 'online'
}).then((periodicSyncReg) => {
// Задача успешно зарегистрирована
})
});

self.addEventListener('periodicsync', function(event) {
if (event.registration.tag == 'get-latest-news') {
event.waitUntil(fetchAndCacheLatestNews());
}
else {
// Неизвестная задача, лучше отменить регистрацию
event.registration.unregister();
}
});

bit.ly/bit.ly/go-pwa-slackgo-pwa-slack
1400+ разработчиков1400+ разработчиков
Представители основных браузеров,Представители основных браузеров,
библиотек, фреймворковбиблиотек, фреймворков
t.me/t.me/pwa_rupwa_ru
Все о PWA на русском языкеВсе о PWA на русском языке

Есть вопрос?Есть вопрос?

[Russian] Сервис-воркеры: используем накопленные знания для светлого будущего PWA

Recommended

Recommended

More Related Content

Similar to [Russian] Сервис-воркеры: используем накопленные знания для светлого будущего PWA

Similar to [Russian] Сервис-воркеры: используем накопленные знания для светлого будущего PWA (20)

More from Maxim Salnikov

More from Maxim Salnikov (17)

[Russian] Сервис-воркеры: используем накопленные знания для светлого будущего PWA