Открывайте PWA при нажатии на push-уведомление, обрабатываемое служащим ng7 + android

Question

Мы реализовали PWA на Angular 7 и NodeJS в качестве бэкэнда. Push-уведомления отправляются из серверной части с помощью web-push и обрабатываются службой угловой службы .

Поведение, которое мы надеемся иметь в Android, заключается в том, что когда пользователь нажимает на уведомление, приложение открывается на устройстве (т. Е. PWA появляется из фона и кажется видимым для пользователя).

В настоящее время код выполняется в фоновом режиме, но PWA не появляется из фона (т. Е. Пользователь нажимает на push-уведомление, но ничего не происходит).

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

export class AppComponent implements OnInit {
    constructor(private swPush: SwPush) { }

    ngOnInit(): void {
        try {
            if (this.swPush.isEnabled) {
                this.swPush.notificationClicks.subscribe(
                    event => {
                        window.focus();
                        window.open(event.notification.data.url, '_self');
                    },
                    error => {
                        // handle error
                    }
                );
            }
        } catch (err) {
            // handle error
        }
    }
}

У меня есть поиск по всему SO сайту, и я не нашел именно этого вопроса. Комментарии по другим вопросам SO, чтобы избежать двусторонних ссылок на другие ответы SO:

• Я прочитал этот вопрос , и в моем случае журнал консоли внутри обработчика выполняется без проблем

• этот другой вопрос предлагает предложить обходной путь добавления кода внутри библиотеки сервис-работника, но, насколько я понимаю, это потому, что они используют угловой 5 вместо углового 7 (где сервис SwPush включает обработчик уведомлений). В любом случае мне нужно смоделировать эту строку:

  event.waitUtil (clients.openWindow (URL));

Есть идеи, как открыть PWA, когда пользователь нажимает на push-уведомление при использовании службы SwPush angular 7?

Answer 1

Добавьте это в свой проект Angular внутри node_modules/@angular/service-worker/ngsw-worker.js

this.scope.addEventListener('notificationclick', (event) => {
            console.log('[Service Worker] Notification click Received. event:%s', event);
            event.notification.close();
            if (clients.openWindow && event.notification.data.url) {
                event.waitUntil(clients.openWindow(event.notification.data.url));
            }
        });

Вы можете ввести вышеуказанный код, где вы можете найти эту строку внутри файла

this.scope.addEventListener('notificationclick', (event) => ..

И вы должны построить dist снова, чтобы это работало. А в бэкэнде вам нужно будет использовать этот формат:

{"notification":{"body":"This is a message.","title":"PUSH MESSAGE","vibrate":[300,100,400,100,400,100,400],"icon":"https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png","tag":"push demo","requireInteraction":true,"renotify":true,"data":{"url":"https://maps.google.com"}}}

Внутри URL вы можете ввести свой URL, и при нажатии на уведомление ваше push-уведомление откроет данную ссылку и сфокусирует ее в браузере. Вам не нужно ничего менять внутри dist.

Answer 2

Хотя предоставленные решения работают, было бы неплохо иметь подход, который не изменяет код рабочего сервиса в node_modules или сгенерированном коде.

Подход может заключаться в создании другого сценария с именем custom-service-worker.js

В этом файле

importScripts('./ngsw-worker.js');

(function () {
    'use strict';

    self.addEventListener('notificationclick', (event) => {
        console.log("This is custom service worker notificationclick method.");
        console.log('Notification details: ', event.notification);
        // Write the code to open
        if (clients.openWindow && event.notification.data.url) {
            event.waitUntil(clients.openWindow(event.notification.data.url));
        }
    });}
());

Зарегистрируйте custom-service-worker.js в качестве работника службы вместо ngsw-worker.js в разделе импорта, где будет записан ServiceWorkerModule.register.

Также не забудьте добавить этот скрипт в качестве ресурса в angular.json, чтобы он копировался в папку dist.

Я полагаю, что этот подход избавляет нас от необходимости делать что-то дополнительно для редактирования исходного файла рабочего сервиса.

Answer 3

К сожалению, вы не сможете открыть свой PWA с помощью углового кода. Интерфейс SwPush будет прекрасно работать, если приложение открыто в данный момент.

Если ваше приложение закрыто, будет работать только ваш обслуживающий работник (при условии, что он был успешно зарегистрирован). Таким образом, решение вашей проблемы - редактирование рабочего файла angular.

В angular 7 (в частности, "@ angular / service-worker" v ~ 7.2.0), после того как вы создадите приложение с помощью ng build --prod, проверьте папку /dist и найдите файл ngsw-worker.js. Откройте его в редакторе.

В строке 1885 вы найдете:

this.scope.addEventListener('notificationclick', (event) => this.onClick(event));

Измените его на:

this.scope.addEventListener('notificationclick', (event) => {
    event.notification.close();
    if (clients.openWindow && event.notification.data.url) {
        event.waitUntil(clients.openWindow(event.notification.data.url));
    }
});

Это означает, что вы передали в полезную нагрузку уведомления объект данных с нужным URL-адресом. например:

{ 
    title: "Hello", 
    body: "Here, open this URL",
    data: { 
        url : "/somewhere/over/the/rainbow/42"
    } 
}

Что нужно иметь в виду:

• Если у вас есть какие-либо конвейеры автоматической сборки (CD), вам придется изменить ваш ngsw-worker.js вручную (но вам удастся развернуть файл рабочего сервиса после завершения ng build --prod процесса);
• Каждый раз, когда вы собираете prod, ngsw-worker.js будет перезаписываться.
• Я знаю, что вы разрабатываете на Android, но если у вас возникли проблемы с отображением изменений, вы можете использовать инструменты Chrome Dev для [A] принудительного обновления работника сервиса или [B] , чтобы открыть текущий файл ngsw-worker.js и убедиться, что это нужная версия. Решение работает и для установленных приложений на вашем рабочем столе.

Ссылки по теме:

Как запустить PWA (прогрессивное веб-приложение), открытое нажатием на push-уведомление?

https://github.com/angular/angular/issues/20956