From e6527fb1e708bd4bafc54e4ec02580688856cd79 Mon Sep 17 00:00:00 2001 From: Outvi V Date: Mon, 12 Apr 2021 10:39:30 +0800 Subject: feat: finish check on pwa/re-engageable_notifications_push --- .../re-engageable_notifications_push/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files') diff --git a/files/zh-cn/web/progressive_web_apps/re-engageable_notifications_push/index.html b/files/zh-cn/web/progressive_web_apps/re-engageable_notifications_push/index.html index f88fb0f718..7a1ae4f840 100644 --- a/files/zh-cn/web/progressive_web_apps/re-engageable_notifications_push/index.html +++ b/files/zh-cn/web/progressive_web_apps/re-engageable_notifications_push/index.html @@ -5,7 +5,7 @@ translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push ---
{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}
-

通过本地缓存能力实现离线应用是一个强大的特性。允许用户在主屏幕上安装 Web 应用程序则显得更了不起。但除了单纯依赖用户手动打开应用之外，我们还可以走的更远，利用通知和消息推送提高用户参与度，并且随时提供新的内容。

+

以本地缓存实现离线应用是一个强大的特性。允许用户在主屏幕上安装 Web 应用程序则显得更了不起。但除了单纯依赖用户手动打开应用之外，我们还可以走得更远，利用通知和消息推送提高用户参与度，并且随时提供新的内容。

两个 API，一个目标

@@ -32,15 +32,15 @@ button.addEventListener('click', function(e) {

下面的图片展示了如何通过系统的通知服务显示一个授权窗口：

-

Notification of js13kPWA.

+

js13kPWA 的授权窗口。

-

当用户确定接收通知，应用就可以获得推送通知的功能。用户的授权的结果有三种，default（默认）、granted（允许） 或者 denied（拒绝），当用户没有做出选择的时候，授权结果会返回 default，另外两种结果分别在用户选择了允许或者拒绝的时候返回。

+

当用户确定接收通知，应用就可以获得推送通知的功能。用户的授权的结果有三种，default（默认）、granted（允许）或者 denied（拒绝），当用户没有做出选择的时候，授权结果会返回 default，另外两种结果分别在用户选择了允许或者拒绝的时候返回。

一旦用户选择授权，这个授权结果对通知 API 和推送 API 两者都有效。

创建一个通知

-

我们的示例应用通过可用的数据来创建通知 —— 随机选择一个游戏数据来填充通知的主体：用游戏的名称来作为通知的标题，通知的主体会提及游戏的作者，用游戏的图片来作为通知的图标：

+

我们的示例应用通过可用的数据来创建通知。随机选择一个游戏数据来填充通知的主体：用游戏的名称来作为通知的标题，通知的主体会提及游戏的作者，用游戏的图片来作为通知的图标：

function randomNotification() {
     var randomItem = Math.floor(Math.random()*games.length);
@@ -55,7 +55,7 @@ button.addEventListener('click', function(e) {
     setTimeout(randomNotification, 30000);
 }
-

上述代码每隔三十秒会创建一个通知，直到用户觉得通知有点烦人并手动关闭掉它为止。一个真正的 app，对通知的频率必须进行严格的控制，通知内容也要更加有用才行。通知 API 的优势在于它使用了操作系统的通知功能，这意味着即使用户当前并没有在使用我们的应用，我们的通知也能够展示，它看起来跟一个原生应用发出的通知差不多。

+

上述代码每隔三十秒会创建一个通知，直到用户觉得通知有点烦人并手动关闭掉它为止。一个真正的 App，对通知的频率必须进行严格的控制，通知内容也要更加有用才行。通知 API 的优势在于它使用了操作系统的通知功能，这意味着即使用户当前并没有在使用我们的应用，我们的通知也能够展示，它看起来跟一个原生应用发出的通知差不多。

推送

@@ -122,7 +122,7 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);

App 会从服务器请求一个公钥并且把响应结果转化成文本，最后它还需要转化成一个 Uint8Array（为了兼容 Chrome）。如果你想学习更多关于 VAPID 的内容可以阅读 Sending VAPID identified WebPush Notifications via Mozilla’s Push Service 这篇文章。

-

App 现在可以使用 {{domxref("PushManager")}} 来订阅新用户。这个方法支持传递两个参数：第一个是 userVisibleOnly: true，意思是发送给用户的所有通知对他们都是可见的，第二个是 applicationServerKey，这个参数包含我们之前从服务端取得并转化的 VAPID key。

+

App 现在可以使用 {{domxref("PushManager")}} 来订阅新用户。这个方法支持传递两个参数：第一个是 userVisibleOnly: true，意思是发送给用户的所有通知对他们都是可见的，第二个是 applicationServerKey，这个参数包含我们之前从服务端取得并转化的 VAPID key。

return registration.pushManager.subscribe({
     userVisibleOnly: true,
@@ -168,7 +168,7 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);

server.js

-

服务端的代码是用 Node.js编写的，它需要被托管在合适的地方。这部分内容已经够单独再写一篇文章了。所以这里我们只提供一个简单的概览。

+

服务端的代码是用 Node.js 编写的，它需要被托管在合适的地方。这部分内容已经够单独再写一篇文章了。所以这里我们只提供一个简单的概览。

web-push 模块被用来配置 VAPID 密钥，如果没有的话，还可以生成一个。

-- cgit v1.2.3-54-g00ecf