Progressive Web Application:: Reliable. Part II

#javascript #pwa #serwiceworker #workbox

Привет!

Мы продолжаем работу по разработке 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, написаны нами или использованы готовые.