Фоновая синхронизация и обновления
Обновляйте кэш и синхронизируйте данные после восстановления подключения.
«Фоновая синхронизация и обновления» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Поддержание актуальности кешей
Приложение, работающее без подключения к сети, должно корректно обновляться: доставлять новые ресурсы, удалять старые и повторять неудачные действия после восстановления соединения. Сервисные обработчики предоставляют инструменты для всех трёх задач.
Имена кешей с версиями
Простейший механизм обновления — имя кеша с указанием версии. Изменение версии создаёт новый кеш, а старый оставляет для очистки во время активации.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Очистка старых кешей
В событии activate перечислите все имена кешей и удалите те, которые не относятся к текущей версии. Это освобождает хранилище и удаляет устаревшие ресурсы.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Ожидающий обработчик
По умолчанию новый обработчик устанавливается, но остаётся в состоянии ожидания, пока не будут закрыты все страницы, которыми управляет старый обработчик. Это предотвращает несоответствие версий в середине сеанса.
skipWaiting
self.skipWaiting() сообщает ожидающему обработчику, что нужно немедленно активироваться и получить управление, не дожидаясь закрытия вкладок. Вызовите его в install, если хотите применять обновления сразу.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
После активации self.clients.claim() позволяет новому обработчику немедленно получить управление уже открытыми страницами, а не только страницами, открытыми при будущей навигации.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Обнаружение обновлений со страницы
Страница может прослушивать появление нового обработчика через событие updatefound регистрации, а затем предложить пользователю перезагрузить страницу для получения последней версии.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Фоновая синхронизация
Интерфейс фоновой синхронизации позволяет отложить действие, например отправку формы, до восстановления подключения устройства к сети. Вы регистрируете метку синхронизации, и браузер вызывает событие sync, когда подключение восстановлено.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Обработка события синхронизации
В сервисном обработчике прослушивайте событие sync и сопоставляйте его метку. Используйте waitUntil, чтобы браузер сохранял обработчик активным до завершения повторной попытки.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Шаблон «сначала очередь, затем синхронизация»
Надёжный автономный процесс: сохраните ожидающее действие в IndexedDB, зарегистрируйте синхронизацию, а в обработчике sync прочитайте очередь и отправьте каждый элемент с помощью POST, удаляя его после успешной отправки.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Повторение обновлений и синхронизации
Вместе эти возможности делают приложения устойчивыми: кеши с версиями и их очистка поддерживают актуальность ресурсов, skipWaiting/clients.claim управляют моментом распространения обновлений, а фоновая синхронизация надёжно завершает действия, когда пользователь снова подключается к сети.
Быстрая проверка
Проверьте понимание обновлений и фоновой синхронизации.
Повторение
Вы изучили фоновую синхронизацию и обновления:
- Используйте имена кешей с версиями и очищайте старые кеши в
activate. skipWaitingиclients.claimуправляют моментом обновления.- Обнаруживайте новые версии через
updatefound. - Фоновая синхронизация откладывает действия до восстановления подключения через событие
sync. - Ставьте действия в очередь в IndexedDB, а затем отправляйте их при синхронизации.
Вы завершили изучение сервисных обработчиков и автономного кеширования.
Часто задаваемые вопросы
Урок «Фоновая синхронизация и обновления» бесплатный?
Да — полный текст урока «Фоновая синхронизация и обновления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Фоновая синхронизация и обновления»?
Обновляйте кэш и синхронизируйте данные после восстановления подключения. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Фоновая синхронизация и обновления»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Регистрация Service Worker
- API Cache
- Стратегии кэширования
- Фоновая синхронизация и обновления