Последующие действия: веб-push-уведомления и PWA в 2020 г.

Продолжение моего однолетнего руководства «Веб-push-уведомления в прогрессивных веб-приложениях с Ionic и Angular»

Я делюсь одной уловкой в ​​день до первоначально запланированной даты окончания карантина COVID-19 в Швейцарии, 19 апреля 2020 года. До этого первого рубежа осталось пять дней. Надеюсь, впереди лучшие дни.

Если вы следите за мной в Twitter, вы, возможно, читали, что приложение, которое я разработал и недавно отправил в магазины, было отклонено как Apple, так и Google, поскольку оно не соответствовало, по их мнению, их ограничительной политике в отношении текущего COVID- 19 пандемия.

Я пишу эти строки не для того, чтобы поделиться своим мнением об этих компаниях, а для того, чтобы поделиться продолжением моего учебника годичной давности: Веб-push-уведомления в прогрессивных веб-приложениях.

Действительно, одна из основных концепций приложения, которая была отклонена, основана на push-уведомлениях. Поскольку он разработан с использованием Ionic и Angular, мы можем реализовать прогрессивные веб-приложения, но хорошо ли поддерживается такая функция?

Вступление

Я пишу эту статью Вторник, 14 апреля 2020 года, поэтому она отражает статус этой конкретной даты. Если вы прочтете это в будущем и заметите улучшения или изменения, свяжитесь со мной!

Сегодня днем ​​я провел тесты на своем телефоне Android, OnePlus 6 под управлением Android v10 и на моем iPhone 6s под управлением iOS 13.

Android

Это работает как шарм, и точка. Я протестировал Web Push-уведомления на своем телефоне в режиме ожидания, в спящем режиме и с открытым приложением. Во всех случаях уведомления приходили. Отличная работа Google 👍.

iOS

Веб-уведомления по-прежнему не поддерживаются на iOS. Статус не изменился с тех пор, как я опубликовал свое руководство в феврале 2019 года. Как вы можете заметить с помощью Caniuse, API уведомлений еще не реализован в iOS Safari.

Настраивать

Настройка Firebase Cloud Messaging, которую я показал в предыдущей статье, по-прежнему остается в силе. Конечно, возможно, некоторые скриншоты были изменены или актуализированы, но идея осталась прежней. Более того, я точно так же настроил токены для своего приложения, и все прошло нормально.

Но что интересно, это комментарий от Галило Галило. По его / ее опыту, зависимости Firebase, используемые в сервис-воркере, должны были быть установлены с тем же номером версии, что и в package.json. У меня не было этой проблемы, но об этом стоит помнить.

Реализация

За исключением следующего исключения, которое можно или нельзя улучшить, реализация, показанная в моем предыдущем руководстве, также остается в силе. Это то, что я реализовал в нашем приложении, и поэтому я сегодня успешно протестировал его на своем телефоне Android.

При этом я думаю, что может быть более простой способ, особенно если вы используете AngularFire, реализовать Web Push-уведомления в прогрессивных веб-приложениях. Я не проверял его, но, прежде чем следовать моему руководству, возможно, он заслуживает быстрого исследования, на случай, если вы сможете сэкономить немного времени 😉.

Устаревание

Ничего страшного, но, взглянув на код, я заметил, что await messaging.requestPermission(); был помечен как устаревший. Его можно обновить следующим образом:

if (Notification.permission !== 'denied') {
    await Notification.requestPermission();
}

В целом

В общем, моя улучшенная служба Angular, которая занимается регистрацией веб-push-уведомлений и запросом разрешений.

import {Injectable} from '@angular/core';

import {firebase} from '@firebase/app';
import '@firebase/messaging';

import {environment} from '../../../environments/environment';

@Injectable({
    providedIn: 'root'
})
export class FirebaseNotificationsPwaService {

    async init() {
        navigator.serviceWorker.ready.then((registration) => {
            if (!firebase.messaging.isSupported()) {
                return;
            }

            const messaging = firebase.messaging();

            messaging.useServiceWorker(registration);

             messaging
                 .usePublicVapidKey(environment.firebase.vapidKey);

            messaging.onMessage((payload) => {
                // If we want to display 
                // a msg when the app is in foreground
                console.log(payload);
            });

            // Handle token refresh
            messaging.onTokenRefresh(() => {
                messaging.getToken().then(
                    (refreshedToken: string) => {
                    console.log(refreshedToken);
                }).catch((err) => {
                    console.error(err);
                });
            });
        }, (err) => {
            console.error(err);
        });
    }

    async requestPermission() {
        if (!Notification) {
            return;
        }

        if (!firebase.messaging.isSupported()) {
            return;
        }

        try {
            const messaging = firebase.messaging();

            if (Notification.permission !== 'denied') {
                await Notification.requestPermission();
            }

            const token: string = await messaging.getToken();

            // User token
            console.log(token);
        } catch (err) {
            console.error(err);
        }
    }
}

Резюме

Надеюсь, однажды мы сможем отправлять Web Push-уведомления и на устройства iOS 🤞.

Оставайся дома, будь в безопасности!

Дэйвид