# Step 6 : Background sync and notifications
In this step, we will use the Service Worker and a new API, Background Sync, to update the list of attendees in the background and notify the user when there are new attendees.
The Background Sync API is not yet standardized. The specification
(opens new window) is still under study. It has already been implemented on Chrome and Android since 2016, and is under development on Edge and Firefox. This API distinguishes two types of synchronization: * One-Time * and * Periodic *. Currently, only One-Time synchronization is implemented in Chrome, and there may be some implementation bugs.
Regarding notifications, the Push API allows web applications to receive push notifications pushed from a server, even when the web application is not in the foreground and even when it is not currently loaded on the user system. Nevertheless, this implies the use of a server-side push service such as Google Cloud Messenger. During this workshop, we will not use the Push API but the Notification API. This API also allows you to send notifications without requiring a server part, but requires the browser to be open. These notifications are multi-platform, so they will adapt to the target platform: Android notifications or the notification center of Windows 10 for example.
# Notifications and permissions
Synchronization in the background does not require special permissions, but posting notifications requires the user’s consent. To avoid spam, browsers have added constraints to be able to request these permissions. For example, we can do this after a specific user action such as clicking on a link.
So add this link below somewhere in the index.html page to enable notifications:
Then declare the following function in scripts.js
When the user has given permission to display notifications, we will call the registerBackgroundSync function to set up background synchronization.
# Background Synchronization
Once the registration object of type ServiceWorkerRegistration is retrieved, we can call the registration.sync.register method to register for a One-Time synchronization task in the background.
On the Service Worker side, a sync event will be emitted when the system decides to trigger a synchronization. This decision is based on various parameters: connectivity, battery status, power source, etc. ; so we can not be sure when synchronization will be triggered. The specification is planning for future parameterization options, but for now, all we can do is wait. However, under the conditions of this workshop, this should only take a few seconds.
# Update and notification
The synchronization request is similar to the update and refresh at step 4, except that it is requested by the system and not the client:
If the client has permission to view notifications, the self.registration.showNotification method should display a notification with the desired text on the registered client.
# Testing
As with the previous steps, make sure that the Update on reload box is checked in the Developer Tools to always reload the latest version of the Service Worker.
You can click the notification link again to request a new sync.
5 настроек Google Chrome, которые нужно изменить всем
Обширные возможности Google Chrome делают его не только удобным браузером, но и опасным. Стоит неверно понять принцип работы тех или иных функций, как можно лишиться чего-нибудь ценного. Например, не уследить за сохранностью собственных данных, которые могут ненароком оказаться не в тех руках. Но, чтобы таких ситуаций не происходило, Google добавила в Chrome ряд специальных инструментов, которые позволят вам защитить свои данные и свою конфиденциальность от посторонних. Главное — знать, что и как делать.
Chrome содержит так много настроек, в которых можно и запутаться. Но некоторые их них могут помочь защитить вашу приватность
Как включить автоудаление истории в Chrome
В Chrome есть автоудаление истории. Теперь можно не удалять информацию об открытых сайтах вручную
Совершенно необязательно хранить всю историю посещений в памяти браузера, откуда к ней могут получить доступ посторонние лица. Поэтому мы настоятельно рекомендуем настроить автоматическое удаление этих данных. Для этого перейдите в «Настройки» — «Синхронизация сервисов Google» — «Использование данных о посещённых страницах» — «Управление историей» и выберите нужный параметр: удалять спустя 18 месяцев или удалять спустя 3 месяца.
Как запретить передачу данных из Chrome в Google
Chrome позволяет установить запрет на отправку данных в Google
Chrome, как и любой другой сервис Google, собирает данные о пользователе и отправляет их поисковому гиганту. В компании говорят, что эта информация используется для повышения качества обслуживания, однако в этом нельзя быть уверенным на 100%. Поэтому мы бы рекомендовали минимизировать объём сведений, которые браузер передаёт Google. Для этого перейдите в «Настройки» — «Синхронизация сервисов Google» — «Другие сервисы Google» и отключите те параметры, которые вам кажутся неприемлемыми. Например, безопасный просмотр или проверку правописания.
Как заблокировать уведомления от сайтов в Chrome
Надоели уведомления от сайтов? Просто отключите их
Сейчас среди сайтов широко распространена практика уведомлять постоянных посетителях о вышедших материалах. Но если для постоянных читателей это плюс, то для случайных – самый настоящий минус, тем более, если подписаться на рассылку случайно. К счастью, Chrome позволяет либо отключить подобные уведомления вообще, либо отказаться от рассылок от конкретных ресурсов. Для этого перейдите в «Настройки» — «Дополнительные» — «Настройки сайта» — «Уведомления» и настройте уведомления так, как вам нужно.
Как запретить сайтам следить за вами
Геолокация и куки позволяют отследить любого человека. Просто отключите их
Несмотря на то что слежка в интернете давно стала обычным делом, многие предпочитают не следовать на поводу у всех остальных, тщательно оберегая свою приватность. Но о какой приватности может идти речь, если любой сайт может определить место, где вы находитесь, а также сохранить куки, которые затем позволят ему узнать, что это именно вы открыли его снова. Чтобы отключить отслеживание и сохранение куков, перейдите в «Настройки» — «Дополнительные» — «Настройки сайта», а затем поочерёдно откройте вкладки «Файлы cookie» и «Геоданные» и добавьте сайты, которым запрещено отслеживать вас.
Как запретить сайтам работать в фоне
Некоторые сайты продолжают работать даже после закрытия. Но и на них можно найти управу
Многие сайты умеют работать в фоновом режиме, даже если вы свернули браузер или даже закрыли его. Чаще всего это делается для удобства пользователей, которые могут получать уведомления из социальных сетей или синхронизировать файлы из памяти компьютера с облаком. Однако иногда попадаются вредоносные ресурсы, которые продолжают работать в фоне, высаживая аккумулятор вашего ноутбука. Чтобы запретить им это делать, перейдите в «Настройки» — «Дополнительные» — «Настройки сайта» — «Фоновая синхронизация» и отключите параметр, разрешающий недавно закрытым сайтам продолжать синхронизировать данные с компьютером.
Идеальный инструмент для создания прогрессивных веб-приложений или Все, что вы хотели знать о Workbox. Часть 2
Workbox (далее — WB ) — это библиотека (точнее, набор библиотек), основной целью которой является «предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами» (далее — СВ).
Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:
WB предоставляет следующие возможности:
Это вторая часть руководства. Вот ссылка на первую часть.
Модули, предоставляемые WB
Каждый модуль решает определенную задачу и может быть использован как совместно с другими модулями, так и самостоятельно.
workbox-background-sync
Иногда запрос на отправку данных на сервер проваливается. Это может произойти из-за потери соединения или из-за «упавшего» сервера. В любом случае, было бы здорово иметь возможность автоматически повторять выполнение такого запроса.
Базовое использование
Простейший способ использования фоновой синхронизации заключается в применении плагина, который автоматически помещает провалившиеся запросы в очередь и выполняет их повторную отправку при регистрации события sync :
Продвинутое использование
Создание очереди
Добавление запроса в очередь
После добавления в очередь, запрос будет автоматически выполнен повторно при получении СВ события sync (или при следующем запуске СВ в браузерах, которые не поддерживают фоновую синхронизацию).
workbox-cacheable-response
При кэшировании ресурсов во время выполнения не существует общего правила для определения валидности таких ресурсов, т.е. того, подлежат ли эти ресурсы сохранению с целью повторного использования.
Рассматриваемый модуль позволяет определять пригодность ответа для кэширования на основе статус-кода или присутствия заголовка с определенным значением.
Кэширование на основе статус-кода
Кэширование на основе заголовка
При определении нескольких заголовков, для кэширования ответа достаточно совпадения с одним из них.
Разумеется, указанные техники определения пригодности ответов для кэширования можно комбинировать:
По умолчанию заголовки ответа для определения его валидности не используются.
Продвинутое использование
Для определения логики кэширования за пределами стратегии можно использовать класс CacheableResponse :
workbox-expiration
Данный плагин позволяет ограничивать количество ресурсов, сохраняемых в кэше, а также время их хранения.
Ограничение количества записей в кэше
При достижении лимита удаляются самые старые записи.
Ограничение времени хранения ресурсов в кэше
Проверка записей на соответствие этому критерию и, при необходимости, их удаление осуществляется после каждого запроса или обновления кэша.
Продвинутое использование
Класс CacheExpiration позволяет отделять логику ограничения от других модулей. Для установки ограничений создается экземпляр названного класса:
Затем, при обновлении записи в кэше, вызывается метод updateTimestamp() для обновления «возраста» записи.
Для проверки всех записей в кэше на предмет их соответствия установленным критериям вызывается метод expireEntries() :
workbox-precaching
СВ позволяет записывать файлы в кэш во время установки. Это называется предварительным кэшированием, поскольку контент кэшируется перед использованием СВ.
Предварительное кэширование позволяет приложению работать в режиме офлайн без выполнения сетевых запросов на получение ресурсов, используемых приложением.
WB предоставляет простой и понятный API для реализации этого паттерна и эффективной загрузки ресурсов.
workbox-precaching делает все это при обработке события install СВ.
Обработка предварительно кэшированных ответов
В этом маршрутизаторе используется стратегия «сначала кэш».
Список предварительно кэшируемых ресурсов
Версионирование позволяет рассматриваемому модулю определять необходимость обновления кэшированного ресурса.
Автоматическая обработка входящих запросов
Игнорирование параметров строки запроса
Игнорируемые параметры указываются в настройке ignoreURLParametersMatching :
Основной файл директории
«Чистые» URL
Кастомные манипуляции
Настройка urlManipulation позволяет кастомизировать логику определения совпадений. Эта функция должна возвращать массив возможных совпадений:
workbox-routing
СВ может перехватывать сетевые запросы. Он может отвечать браузеру кэшированным контентом, контентом, полученным из сети, или контентом, генерируемым СВ.
workbox-routing — это модуль, позволяющий «связывать» поступающие запросы с функциями, формирующими на них ответы.
Обратите внимание на следующее:
Определение совпадений и обработка запросов
В WB «роут» — это две функции: функция «определения совпадения» и функция «обработки запроса».
WB предоставляет некоторые утилиты для помощи в реализации названных функций.
Регистрация колбэков выглядит следующим образом:
Единственным ограничением является то, что функция определения совпадения должна возвращать истинное значение синхронно. Это связано с тем, что Router должен синхронно обрабатывать событие fetch или передавать его другим обработчикам.
Как правило, в функции обработки запроса используется одна из встроенных стратегий, например:
Определение совпадений с помощью регулярного выражения
Вместо функции определения совпадения, можно использовать регулярное выражение:
Для запросов из одного источника данная «регулярка» будет регистрировать совпадения для следующих URL :
Для решения этой проблемы можно использовать такое регулярное выражение:
Роут для навигации
Обработчик по умолчанию
Обработчик ошибок
Обработка не-GET-запросов
workbox-strategies
Стратегия кэширования — это паттерн, определяющий порядок формирования СВ ответа на запрос (после возникновения события fetch ).
Вот какие стратегии предоставляет рассматриваемый модуль.
Stale-While-Revalidate
Данная стратегия возвращает ответ из кэша (при наличии ответа в кэше) или из сети (при отсутствии кэшированного ответа). Сетевой запрос используется для обновления кэша. Такой запрос выполняется независимо от возраста кэшированного ответа.
Cache-Fisrt
Данная стратегия отлично подходит для больших статических редко изменяемых ресурсов.
При наличии ответа в кэше, он просто возвращается, а сеть не используется совсем. Если ответа в кэше нет, выполняется сетевой запрос, ответ на который возвращается пользователю и кэшируется для следующего использования.
Network-First
Данная стратегия подходит для часто обновляемых запросов. Сначала выполняется сетевой запрос. Если запрос выполняется успешно, ответ на него возвращается пользователю и записывается в кэш. Если запрос проваливается, возвращается кэшированный ответ.
Network-Only
Cache-Only
Настройка стратегии
Каждая стратегия позволяет кастомизировать:
Название кэша
Плагины
В стратегии могут использоваться следующие плагины:
WB также позволяет создавать и использовать собственные стратегии.
workbox-recipies
Некоторые паттерны, особенно касающиеся маршрутизации и кэширования, являются достаточно общими для возможности их стандартизации в виде переиспользуемых рецептов. workbox-recipies предоставляет набор таких рецептов.
Рецепты
Резервный контент
Данный рецепт позволяет СВ возвращать резервную страницу, изображение или шрифт при возникновении ошибки при выполнении запроса на получения любого из указанных ресурсов.
Резервный контент возвращается при совпадении с определенным запросом. При использовании рассматриваемого рецепта в отдельности, необходимо реализовать соответствующие роуты. Простейшим способом это сделать является использование метода setDefaultHandler() для создания роута, применяющего стратегию «только сеть» в отношении всех запросов.
Рецепт
Паттерн
Подготовка кэша
Данный рецепт позволяет записывать определенные URL в кэш во время установки СВ. Она может использоваться в качестве альтернативы предварительного кэширования в случае, когда нам заранее известен список URL для сохранения.
Рецепт
Паттерн
Кэширование страницы
Данный рецепт позволяет СВ отвечать на запрос на получение HTML-страницы с помощью стратегии «сначала сеть». При этом, СВ оптимизируется таким образом, что в случае отсутствия подключения к сети, возвращает ответ из кэша менее чем за 4 секунды. По умолчанию запрос к сети выполняется в течение 3 секунд. Настройка warmCache позволяет подготовить («разогреть») кэш к использованию.
Рецепт
Паттерн
Кэширование статических ресурсов
Рецепт
Паттерн
Кэширование изображений
Данный рецепт позволяет СВ отвечать на запросы на получение изображений с помощью стратегии «сначала кэш». По умолчанию кэшируется до 60 изображений в течение 30 дней. Поддерживается разогрев кэша.
Рецепт
Паттерн
Кэширование гугл-шрифтов
Данный рецепт кэширует таблицу стилей для шрифтов с помощью стратегии «считается устаревшим после запроса» и сами шрифты с помощью стратегии «сначала кэш». По умолчанию кэшируется до 30 шрифтов в течение 1 года.
Рецепт
Паттерн
Быстрое использование
Комбинация рассмотренных рецептов позволяет создать СВ, который будет отвечать на навигационные запросы с помощью стратегии «сначала сеть», на запросы на получение статических ресурсов с помощью стратегии «считается устаревшим после запроса», на получение изображений с помощью стратегии «сначала кэш». Он также будет обрабатывать гугл-шрифты и предоставлять резервный контент в случае возникновения ошибки. Вот как это выглядит:
workbox-window
Использование CDN
Использование сборщика модулей
Установка
Использование
Примеры
Регистрация СВ и уведомление пользователя о его активации
Уведомление пользователя о том, что СВ был установлен, но ожидает активации
Когда на странице, управляемой СВ, региструется новый СВ, по умолчанию последний не будет активирован до тех пор, пока все клиенты, контрлируемые первым, не завершат свои сессии.
Уведомление пользователя об обновлении кэша
Модуль workbox-broadcast-update позволяет информировать пользователей об обновлении контента. Для получения этой информации в браузере используется событие message с типом CACHE_UPDATED :
Отправка СВ списка URL для кэширования
В некоторых приложениях имеет смысл кэшировать только те ресурсы, которые используются посещенной пользователем страницей. Модуль workbox-routing принимает список URL и кэширует их на основе правил, определенных в маршрутизаторе.
Практика
Для обеспечения работы приложения в режиме офлайн требуется не только СВ и его регистрация в основной файле приложения, но и так называемый «манифест».
О том, что такое манифест можно почитать здесь, здесь и здесь.
Манифест
Ручная реализация СВ, использующего стратегию «сначала кэш»
Конфигурация Webpack
Пример настройки вебпака для производственной сборки прогрессивного веб-приложения.
Предположим, что в нашем проекте имеется 4 директории:
В файле public/sw-reg.js содержится код регистрации СВ:
В файле config/paths.js осуществляется экспорт путей к директориям с файлами приложения:
Здесь вы найдете шпаргалку по настройке вебпака. Пример полной конфигурации вебпака для JS/React/TS-проекта можно посмотреть здесь.
React PWA
Или, если речь идет о TypeScript-проекте :
Подробнее об этом можно прочитать здесь.
Vue PWA
С Vue дела обстоят еще проще.
Глобально устанавливаем vue-cli :
Web Background Synchronization
Draft Community Group Report, 10 November 2021
Copyright © 2021 the Contributors to the Web Background Synchronization Specification, published by the Web Platform Incubator Community Group under the W3C Community Contributor License Agreement (CLA). A human-readable summary is available.
Abstract
This specification describes a method that enables web applications to synchronize data in the background.
Status of this document
This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.
1. Introduction
This section is non-normative.
Web Applications often run in environments with unreliable networks (e.g., mobile phones) and unknown lifetimes (the browser might be killed or the user might navigate away). This makes it difficult to synchronize client data from web apps (such as photo uploads, document changes, or composed emails) with servers. If the browser closes or the user navigates away before synchronization can complete, the app must wait until the user revisits the page to try again. This specification provides a new onsync service worker event which can fire in the background so that synchronization attempts can continue despite adverse conditions when initially requested. This API is intended to reduce the time between content creation and content synchronization with the server.
As this API relies on service workers, functionality provided by this API is only available in a secure context.
In the above example addChatMessageToOutbox is a developer-defined function.
Reacting to a sync event within a service worker:
In the above example getMessagesFromOutbox and removeMessagesFromOutbox are developer-defined functions.
2. Concepts
The sync event is considered to run if no service worker clients whose frame type is top-level or auxiliary exist for the origin of the corresponding service worker registration.
The user agent is considered to be if the user agent has established a network connection. A user agent MAY use a stricter definition of being online. Such a stricter definition MAY take into account the particular service worker or origin a sync registration is associated with.
3. Constructs
A is a tuple consisting of a tag and a state.
A sync registration has an associated service worker registration. It is initially set to null.
4. Permissions Integration
5. Privacy Considerations
5.1. Permission
Note: Background sync SHOULD be enabled by default. Having the permission denied is considered an exceptional case.
5.2. Location Tracking
5.3. History Leaking
6. API Description
6.1. Extensions to the ServiceWorkerRegistration interface
In only one current engine.
6.2. SyncManager interface
In only one current engine.
In only one current engine.
The method, when invoked, MUST return a new promise promise and run the following steps in parallel:
In only one current engine.
The method when invoked, MUST return a new promise promise and run the following steps in parallel:
6.3. The sync event
In only one current engine.
In all current engines.
In only one current engine.
Note: The SyncEvent interface represents a firing sync registration. If the page (or worker) that registered the event is running, the user agent will fire the sync event as soon as network connectivity is available. Otherwise, the user agent should run the event at the soonest convenience. If a sync event fails, the user agent may decide to retry it at a time of its choosing. The lastChance attribute is true if the user agent will not make further attempts to try this sync after the current attempt.
The above example reacts to lastChance by showing a notification to the user. This requires the origin to have permission to show notifications.
In the above example doImportantThing is a developer-defined function.
Whenever the user agent changes to online, the user agent SHOULD fire a sync event for each sync registration whose registration state is pending. The events may be fired in any order.
Fire Functional Event » sync » using SyncEvent on serviceWorkerRegistration with the following properties:
In only one current engine.
In only one current engine.
Then run the following steps with dispatchedEvent :
A user agent MAY impose a time limit on the lifetime extension and execution time of a SyncEvent which is stricter than the time limit imposed for ExtendableEvent s in general. In particular an event for which lastChance is true MAY have a significantly shortened time limit.
A user agent a sync event based on some user agent defined heuristics.
Conformance
Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.
All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]
