Progressive Web Application:: Reliable. Part II
Tags: javascript, pwa, serwiceworker, workbox
Published: 2018-11-22 05:25:08

---
title: Progressive Web Application:: Reliable. Part II
published: true
description: Регистрация service worker
tags: #js #pwa #serwiceworker #workbox
---


Привет!

Мы продолжаем работу по разработке PWA и изучаем способы использования service worker (SW).

В [части I](https://dev.to/stokaboka/progressive-web-applicationreliable-part-i-4phc) мы:

- написали свой service worker;
- с помощью [Workbox](https://developers.google.com/web/tools/workbox/) и [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) включили в приложение возможность использовать наш SW.


##Регистрация service worker##

В части I мы остановились на файле _app.js_ -  точке входа в приложение, проверили возможность использовать SW и выполнили метод _registerServiceWorker_.

Рассмотрим файл [reg_sw.js](https://github.com/stokaboka/pwa01/blob/master/src/reg_sw.js), в котором описан этот метод.

Основной метод _registerServiceWorker_ для регистрации SW :


```javascript
/**
 * регистрация 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_
- попытаемся подписаться на уведомления


```javascript
/**
 * подписка на 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_.


```javascript
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](https://dev.to/stokaboka/progressive-web-applicationreliable-part-i-4phc) :__

- пишем свой service worker
- с помощью Workbox и workbox-webpack-plugin включаем в приложение возможность использовать наш service worker

__Часть III:__

- жизненный цикл service worker
- стратегии кеширования
- использование workbox-webpack-plugin модуль GenerateSW

###Исходники###

Полностью с исходным кодом проекта описанного в статье можно ознакомиться на github по ссылке: https://github.com/stokaboka/pwa01

###Спасибо за внимание!###

Буду рад вашим замечаниям и критике. Эта статья была написана в учебных целях, чтобы разобраться с технологией PWA и Service Worker.