Привет!
Мы продолжаем работу по разработке PWA и изучаем способы использования service worker (SW).
В части I мы:
- написали свой service worker;
- с помощью Workbox и workbox-webpack-plugin включили в приложение возможность использовать наш SW.
Регистрация service worker
В части I мы остановились на файле app.js - точке входа в приложение, проверили возможность использовать SW и выполнили метод registerServiceWorker.
Рассмотрим файл reg_sw.js, в котором описан этот метод.
Основной метод registerServiceWorker для регистрации SW :
/**
* регистрация service worker (любого)
* @param serviceWorker - имя фала js являющегося service worker
* @returns {Promise<void>}
*/
async function registerServiceWorker(serviceWorker) {
try {
// регистрируем service worker
const registration = await navigator.serviceWorker.register(serviceWorker);
console.log('ServiceWorker registered: ', registration);
// пытаемся подписаться на PUSH уведомления
subscribeToPushNotifications(registration);
} catch (e) {
// что-то пошло не так
// скорее всего отсутствует поддержка service worker
console.error('ServiceWorker failed', e);
}
}
При успешной регистрации SW попытаемся подписаться на PUSH уведомления - метод subscribeToPushNotifications:
- запросим доступ на получение уведомлений — метод pushStatus
- попытаемся подписаться на уведомления
/**
* подписка на PUSH сообщения
* @param registration
* @returns {Promise<void>}
*/
async function subscribeToPushNotifications(registration) {
// проверяем возможность работать с PUSH сообщениями
if ('pushManager' in registration) {
// опциональные параметры для подписки на Push уведомления
const options = {
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'),
};
// проверяем разрешение от пользователя
// обрабатывать PUSH уведомления
const status = await pushStatus;
if (status) {
// разрешение на уведомления есть
// пытаемся подписаться
try {
// подписка на PUSH уведомления
const subscription = await registration.pushManager.subscribe(options);
console.log('Push registration registered', subscription);
} catch (e) {
console.error('Push registration failed', e);
}
}
}
}
Получение доступа к PUSH уведомлениям реализовано в методе pushStatus. Управление уведомлениями производится через интерфейс Notification из Notifications API.
const pushStatus = new Promise(resolve => {
// смотрим права на получение уведомлений,
// выставленные пользователем
Notification.requestPermission(result => {
const el = document.createElement('div');
el.classList.add('push-info');
if (result !== 'granted') {
// уведомления запрещены
el.classList.add('inactive');
el.textContent = 'Push blocked';
resolve(false);
} else {
// уведомления разрешены
el.classList.add('active');
el.textContent = 'Push active';
resolve(true);
}
document.body.appendChild(el);
});
});
При регистрации SW и PUSH уведомлений нужно учитывать одну важную деталь. Зарегистрировать SW возможно только в песочнице localhost, например при работе с webpack-dev-server. Для работы в production вэб-страница должна быть загружена по протоколу Https и иметь (само собой) сертификат вэб-сервера.
Заключение
Мы зарегистрировали service worker. Этот подход может использоваться для любых SW, независимо от того как они получены — сформированы workbox, написаны нами или использованы готовые.
Продолжение следует
Часть I :
- пишем свой service worker
- с помощью Workbox и workbox-webpack-plugin включаем в приложение возможность использовать наш service worker
Часть III:
- жизненный цикл service worker
- стратегии кеширования
- использование workbox-webpack-plugin модуль GenerateSW
Исходники
Полностью с исходным кодом проекта описанного в статье можно ознакомиться на github по ссылке: https://github.com/stokaboka/pwa01
Спасибо за внимание!
Буду рад вашим замечаниям и критике. Эта статья была написана в учебных целях, чтобы разобраться с технологией PWA и Service Worker.
Top comments (0)