如何在 HTML5 Web 应用程序中推送通知? [英] How can I do push notifications in an HTML5 Web application?

问题描述

我有一个网络应用程序.当用户在特定页面上时，我想使用 HTML 5 内置通知 API 从服务器执行推送通知.可能吗?

解决方案

您现在可以使用

Push API 的实现也已经登陆 Firefox；它的目标是在 2015 年 11 月在 Firefox 42 中发布.微软有 表示 Edge 团队也在考虑实施 Push API.

下面是一个简单的代码示例，借鉴自 MDN.

this.onpush = function(event) {控制台日志(事件数据)；}navigator.serviceWorker.register('serviceworker.js').then(功能(serviceWorkerRegistration){serviceWorkerRegistration.pushManager.subscribe().then(功能(推送订阅){控制台日志(pushSubscription.subscriptionId)；控制台日志(pushSubscription.endpoint)；}, 函数(错误){控制台日志(错误)；});});

I have a web application. I want to use the HTML 5 inbuilt notifications API to do push notifications from the server when the user is on a particular page. Is it possible?

解决方案

You can do real push notifications with Web apps today in Chrome using Service Workers and PushManager from the W3C Push API.

See the article Push Notifications on the Open Web for a step-by-step how-to and code snippets you can use. Here’s a diagram from that article that explains what the UI around it looks like.

An implementation of the Push API has already landed in Firefox too; it’s targeted for shipping in November 2015 in Firefox 42. And Microsoft has indicated that the Push API is also under consideration for implementation in Edge team as well.

Below is a simple code example, borrowed from MDN.

this.onpush = function(event) {
  console.log(event.data);
}

navigator.serviceWorker.register('serviceworker.js').then(
    function(serviceWorkerRegistration) {
        serviceWorkerRegistration.pushManager.subscribe().then(
            function(pushSubscription) {
                console.log(pushSubscription.subscriptionId);
                console.log(pushSubscription.endpoint);
            }, function(error) {
                console.log(error);
            }
        );
    }
);

这篇关于如何在 HTML5 Web 应用程序中推送通知?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！