[Обучение и практика PWA] (7) Используйте Notification API для напоминаний о сообщениях

Серия статей «Обучение и практика PWA» организована в видеgitbook — учебное пособие по PWA, текстовое содержимое было синхронизировано сlearning-pwa-ebook. При перепечатке просьба указывать автора и источник.

Эта статья«Обучение и практика PWA»Седьмая статья цикла.

Как одна из самых популярных технических концепций в настоящее время, PWA имеет большое значение для повышения безопасности, производительности и удобства веб-приложений, и она очень достойна нашего понимания и изучения. Друзья, интересующиеся PWA, могут обратить внимание на серию статей "PWA Learning and Practice".

Код в этой статье можно найти по адресунайти на (git clone

1. Введение

Я описал, как использовать кнопку Push API Server Push Messaging. Удача упомянуло бы, чтобы он мог сказать, что его близкая кряда еще одно API - API уведомлений. Это позволяет нам отображать сообщение «Выполнить сайт»:

Функция самого уведомления не связана с толчком. Вы можете использовать только уведомление API или Push API для создания некоторых функций веб-приложения. Следовательно, эта статья впервые представит, как использовать API уведомления. Затем, как «Золотой партнер» уведомления, эта статья также представит, как использовать Push & Notification в комбинации.

2. Использование API уведомлений

Во втором разделе давайте сначала разберемся, как самостоятельно использовать функцию уведомлений. По сравнению с функцией Push в пятой статье, Notification API более лаконичен и прост для понимания.

2.1. Получите разрешение на напоминание

Во-первых, для вызова API напоминания о сообщении требуется авторизация пользователя.

Перед вызовом соответствующих API уведомлений нам нужно использоватьNotificationстатические методы на объектахNotification.requestPermission()для получения авторизации. из-заNotification.requestPermission()В некоторых версиях браузер получит функцию обратного вызова (Notification.requestPermission(callback)) Как параметр, в то время как в других версиях браузера возвращает обещание, и, следовательно, метод упаковки, единый звонок для обещания:

// index.js
function askPermission() {
    return new Promise(function (resolve, reject) {
        var permissionResult = Notification.requestPermission(function (result) {
            resolve(result);
        });
  
        if (permissionResult) {
            permissionResult.then(resolve, reject);
        }
    }).then(function (permissionResult) {
        if (permissionResult !== 'granted') {
            throw new Error('We weren\'t granted permission.');
        }
    });
}


registerServiceWorker('./sw.js').then(function (registration) {
    return Promise.all([
        registration,
        askPermission()
    ])
 })

Мы создалиaskPermission()Метод унификацииNotification.requestPermission()的调用形式，并在Service Worker注册完成后调用该方法。 передачаNotification.requestPermission()приобретенныйpermissionResultВозможные значения:

• отказал: пользователь отклонил отображение уведомления
• Предоставлено: пользователь разрешает отображение уведомлений
• по умолчанию: поскольку выбор пользователя неизвестен, браузер ведет себя так же, как и запрещенный

В хроме можноchrome://settings/content/notificationsНастройка и управление уведомлениями.

2.2. Установите содержание напоминания

После получения авторизации пользователя мы можем пройтиregistration.showNotification()Метод напоминания о сообщениях.

После того, как мы зарегистрируем Service Worker,thenФункция обратного вызова метода получитregistrationпараметры, вызываяshowNotification()способ запуска напоминаний:

// index.js
registerServiceWorker('./sw.js').then(function (registration) {
    return Promise.all([
        registration,
        askPermission()
    ])
}).then(function (result) {
    var registration = result[0];
    /* ===== 添加提醒功能 ====== */
    document.querySelector('#js-notification-btn').addEventListener('click', function () {
        var title = 'PWA即学即用';
        var options = {
            body: '邀请你一起学习',
            icon: '/img/icons/book-128.png',
            actions: [{
                action: 'show-book',
                title: '去看看'
            }, {
                action: 'contact-me',
                title: '联系我'
            }],
            tag: 'pwa-starter',
            renotify: true
        };
        registration.showNotification(title, options);
    });
    /* ======================= */
})

Приведенный выше код добавляет к кнопке на странице прослушиватель событий щелчка: при нажатии вызываетсяregistration.showNotification()для отображения напоминания о сообщении, метод получает два параметра:titleа такжеoption.titleoption

• body: содержание напоминания
• значок: значок напоминает
• renotify: разрешить ли повторные напоминания, по умолчанию — false. Если повторные напоминания запрещены, уведомление об одном и том же теге будет отображаться только один раз.

Обратите внимание, что из-за разных браузеров дляoptionПоддержка атрибутов отличается. Некоторые свойства не поддерживаются в некоторых браузерах.

2.3. Захват кликов пользователей

В предыдущем разделе мы добавили функцию напоминания в веб-приложение. Нажмите кнопку «Напоминание» на странице, и система откроет окно с напоминанием и отобразит соответствующие сообщения с напоминанием.

Однако чаще мы надеемся не только отобразить ограниченную информацию, но и направить пользователей к взаимодействию. Например, порекомендуйте новую книгу, чтобы пользователи могли щелкнуть ее, чтобы прочитать или купить. В окне напоминания, которое мы установили в предыдущей части, есть два варианта кнопок: «Перейти и посмотреть» и «Свяжитесь со мной», так как же мы можем зафиксировать операцию щелчка пользователя и узнать, какой из них щелкнул пользователь? Этот раздел расскажет вам, как это сделать.

Помните действия, которые мы определили в предыдущем разделе?

…
actions: [{
    action: 'show-book',
    title: '去看看'
    }, {
    action: 'contact-me',
    title: '联系我'
}]
…

Чтобы отреагировать на событие щелчка пользователя в окне напоминания, нам нужно прослушать в Service Workernotificationclickмероприятие.在该事件的回调函数中我们可以获取点击的相关信息：

// sw.js
self.addEventListener('notificationclick', function (e) {
    var action = e.action;
    console.log(`action tag: ${e.notification.tag}`, `action: ${action}`);
    
    switch (action) {
        case 'show-book':
            console.log('show-book');
            break;
        case 'contact-me':
            console.log('contact-me');
            break;
        default:
            console.log(`未处理的action: ${e.action}`);
            action = 'default';
            break;
    }
    e.notification.close();
});

e.actionПолученное значение состоит в том, что мы находимся вshowNotification()Действия в действиях, определенных в . Следовательно, поe.actionВы можете узнать, кто из пользователей нажимает на пользователя. Обратите внимание, что когда пользователь нажимает, чтобы напомнить себе, он также запускает его.notificationclickОднако не включайте никаких значений Action, поэтому поместите его в операцию кода по умолчанию.

Теперь попробуйте, мы можем захватить пользователя нажимать на разные параметры. Нажатие на разные вывод в консоли.

到目前为止，我们已经可以顺利得给用户展示提醒，并且在用户操作提醒后准确捕获到用户的操作。然而，还缺最重要的一步——针对不同的操作，触发不同的交互。 Например,

• Нажмите, чтобы напомнить себе всплывающие книги Введение;

1. postMessage()способ уведомления клиента:

// sw.js
self.addEventListener('notificationclick', function (e) {
    …… // 略去上一节内容
    
    e.waitUntil(
        // 获取所有clients
        self.clients.matchAll().then(function (clients) {
            if (!clients || clients.length === 0) {
                return;
            }
            clients.forEach(function (client) {
                // 使用postMessage进行通信
                client.postMessage(action);
            });
        })
    );
});

2. Слушать в клиентеmessageсобытие, приговорdata, для выполнения разных операций:

// index.js
navigator.serviceWorker.addEventListener('message', function (e) {
    var action = e.data;
    console.log(`receive post-message from sw, action is '${e.data}'`);
    switch (action) {
        case 'show-book':
            location.href = 'https://book.douban.com/subject/20515024/';
            break;
        case 'contact-me':
            location.href = 'mailto:someone@sample.com';
            break;
        default:
            document.querySelector('.panel').classList.add('show');
            break;
    }
});

notificationclickpostMessage()messageСобытие, основанное на действииe.data) для выполнения различных действий (перейти на страницу сведений о книге/отправить электронное письмо/показать панель профиля).

На данный момент относительно простая и полноценная функция напоминания о сообщениях (Notification) завершена.

Однако текущее напоминание о сообщении по-прежнему имеет определенные ограничения. Например, оповещение может срабатывать только во время посещения пользователем веб-сайта. Как упоминалось в начале этой статьи, комбинация Push и Notification поможет нам создать мощную функцию push и напоминаний. Давайте посмотрим на их простое сочетание.

3. Push-сообщение и напоминание

в пятом«В сообщении веб-сервера Push»Наконец, мы контролируемpushСобытия для обработки push сервера:

// sw.js
self.addEventListener('push', function (e) {
    var data = e.data;
    if (e.data) {
        data = data.json();
        console.log('push的数据为：', data);
        self.registration.showNotification(data.text);        
    } 
    else {
        console.log('push没有任何数据');
    }
});

Просто измените приведенный выше код, чтобы он сочетался с функцией напоминания в нашей статье:

// sw.js
self.addEventListener('push', function (e) {
    var data = e.data;
    if (e.data) {
        data = data.json();
        console.log('push的数据为：', data);
        var title = 'PWA即学即用';
        var options = {
            body: data,
            icon: '/img/icons/book-128.png',
            image: '/img/icons/book-521.png', // no effect
            actions: [{
                action: 'show-book',
                title: '去看看'
            }, {
                action: 'contact-me',
                title: '联系我'
            }],
            tag: 'pwa-starter',
            renotify: true
        };
        self.registration.showNotification(title, options);        
    } 
    else {
        console.log('push没有任何数据');
    }
});

Используйте функцию Push для передачи информации пользователям и вызывайте Notification API непосредственно в Service Worker, чтобы отобразить окно напоминания для информации. Таким образом, даже когда пользователь закрывает веб-приложение, он все равно может получать напоминания, аналогичные push-уведомлениям и напоминаниям в Native.

Мы также можем немного обогатить эту функцию. Поскольку пользователи по-прежнему могут получать напоминания, когда сайт закрыт, были добавлены некоторые более мощные функции:

• Когда пользователь переключается на другую вкладку, нажатие на вкладку оповещения немедленно возвращает на сайт;
• Когда пользователь не открывает веб-сайт, нажатие на напоминание может открыть веб-сайт напрямую.

// sw.js
self.addEventListener('notificationclick', function (e) {
    var action = e.action;
    console.log(`action tag: ${e.notification.tag}`, `action: ${action}`);
    
    switch (action) {
        case 'show-book':
            console.log('show-book');
            break;
        case 'contact-me':
            console.log('contact-me');
            break;
        default:
            console.log(`未处理的action: ${e.action}`);
            action = 'default';
            break;
    }
    e.notification.close();

    e.waitUntil(
        // 获取所有clients
        self.clients.matchAll().then(function (clients) {
            if (!clients || clients.length === 0) {
                // 当不存在client时，打开该网站
                self.clients.openWindow && self.clients.openWindow('http://127.0.0.1:8085');
                return;
            }
            // 切换到该站点的tab
            clients[0].focus && clients[0].focus();
            clients.forEach(function (client) {
                // 使用postMessage进行通信
                client.postMessage(action);
            });
        })
    );
});

Обратите внимание на эти две строки кода: первая строка открывает сайт, когда сайт закрыт, а вторая автоматически переключается на вкладку сайта, когда есть вкладка.

self.clients.openWindow && self.clients.openWindow('http://127.0.0.1:8085');

clients[0].focus && clients[0].focus();

4. Веб-уведомления в MacOS Safari

посмотриСовместимость веб-уведомлений:

В настоящее время мобильные браузеры обычно не поддерживают эту функцию. Однако эта функция поддерживается в Safari на Mac OS, но метод ее вызова несколько отличается от приведенного выше кода. Использование веб-уведомлений в сафари не вызываетregistration.showNotification()Метод, но нам нужно создать объект Notification.

// index.js
……
document.querySelector('#js-notification-btn').addEventListener('click', function () {
    var title = 'PWA即学即用';
    var options = {
        body: '邀请你一起学习',
        icon: '/img/icons/book-128.png',
        actions: [{
            action: 'show-book',
            title: '去看看'
        }, {
            action: 'contact-me',
            title: '联系我'
        }],
        tag: 'pwa-starter',
        renotify: true
    };
    // registration.showNotification(title, options);

    // 使用Notification构造函数创建提醒框
    // 而非registration.showNotification()方法
    var notification = new Notification(title, options);
});
……

Объекты уведомлений наследовать от интерфейса EventTarget, поэтому взаимодействие блока оповещения запускается путем добавления прослушивания события Click в Safari:

// index.js
notification.addEventListener('click', function (e) {
    document.querySelector('.panel').classList.add('show');
});

learn-pwa/notify4safariнайти в.

Все примеры кода в этой статье можно найти по адресуlearn-pwa/notificationнайти на.

Если вам нравится или вы хотите узнать больше о PWA, пожалуйста, подпишитесь на меня и подпишитесь«Обучение и практика PWA»серия статей. Я подытожу и разберу вопросы и технические моменты, с которыми столкнулся в процессе изучения PWA, и попрактикуюсь с вами на реальном коде.

Пока что мы научилисьManifest,Автономный кеш,Сообщение, уведомление об сообщении,DebugДождитесь некоторых основ. В следующей статье мы продолжим разбираться и изучать важную функцию в PWA — фоновую синхронизацию.

Серия "Обучение и практика PWA"

• Первая статья: 2018 год, начните свое обучение PWA
• Часть 2. Научитесь использовать Manifest за 10 минут, чтобы сделать ваше веб-приложение более "нативным"
• Часть 3. С сегодняшнего дня сделайте свое веб-приложение доступным в автономном режиме
• Часть 4. Устранение неполадок: устранение ошибок аутентификации при входе в FireBase
• Часть 5. Оставайтесь на связи с вашими пользователями: функции Web Push
• Часть 6. Отладка PWA в Chrome
• Часть 7. Расширенное взаимодействие: использование API уведомлений для напоминаний (эта статья)
• Часть 8. Использование Service Worker для фоновой синхронизации данных
• Часть 9: Проблемы и решения в практике PWA
• Часть 10. Подсказка по ресурсам. Улучшите производительность и удобство загрузки страниц.
• Статья 11. Изучение различных офлайн-стратегий с помощью набора инструментов для работы в офлайн-режиме PWA (написание...)

использованная литература

• MDN: notification
• MDN: ServiceWorkerRegistration.showNotification()
• MDN: WindowClient
• MDN: Clients
• WWDC2013