Progressive Web Application:: Reliable. Part II

Привет!

Мы продолжаем работу по разработке 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.