android - 单击 service-worker ng7 + android 处理的推送通知时打开 PWA

Question

我们在 Angular 7 和 NodeJS 作为后端实现了 PWA。推送通知通过 web-push 从后端发送并由 angular service worker service 处理.

我们希望在 Android 中具有的行为是，当用户点击通知时，应用程序会在设备中打开(即 PWA 从后台出现并且对用户可见)。

目前，代码接缝在后台执行，但 PWA 没有从后台出现(即用户点击推送通知但没有任何反应)。

推送通知由名为 SwPush 的 Angular 服务处理。在前端，并使用 Angular 应用的典型 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 答案:

• 我已阅读 this question ，在我的情况下，处理程序内的控制台日志执行没有问题

• this other question seams to 提出了一种在 service-worker 库中添加代码的解决方法，但据我了解，这是因为他们使用的是 angular 5 而不是 angular 7(其中 SwPush 服务包括 notificationclick 处理程序)。无论如何，我需要的是模拟这条线:

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

关于在使用 Angular 7 的 SwPush 服务时用户点击推送通知时如何打开 PWA 的任何想法？

Answer 1

虽然提供的解决方案有效，但最好有一种方法不会修改 node_modules 中的 service worker 代码或生成的代码。

方法可以是创建另一个名为 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));
        }
    });}
());

在将写入 ServiceWorkerModule.register 的导入部分中，将 custom-service-worker.js 注册为服务 worker ，以代替 ngsw-worker.js。

另外不要忘记将此脚本作为 Assets 添加到 angular.json 中，以便将其复制到 dist 文件夹中。

我相信这种方法为我们省去了为编辑原始服务工作人员文件而做任何额外工作的麻烦。