diff options
| -rw-r--r-- | files/zh-cn/web/progressive_web_apps/re-engageable_notifications_push/index.html | 74 |
1 files changed, 37 insertions, 37 deletions
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 bb214c16a4..f88fb0f718 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,21 +5,21 @@ translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push --- <div>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</div> -<p class="summary">拥有本地缓存能力来实现离线应用是一个强大的特性。允许用户在主屏幕上安装Web应用程序则显得更了不起。但与其单纯依赖用户手动打开应用，我们可以做得更多的东西，我们可以利用消息和通知推送来自动重启应用并随时提供新的内容。</p> +<p class="summary">通过本地缓存能力实现离线应用是一个强大的特性。允许用户在主屏幕上安装 Web 应用程序则显得更了不起。但除了单纯依赖用户手动打开应用之外，我们还可以走的更远，利用通知和消息推送提高用户参与度，并且随时提供新的内容。</p> -<h2 id="两个API，一个目标">两个API，一个目标</h2> +<h2 id="两个_API，一个目标">两个 API，一个目标</h2> -<p><a href="/en-US/docs/Web/API/Push_API">推送 API</a>和 <a href="/en-US/docs/Web/API/Notifications_API">通知 API</a>是两个相互独立的API，但当你的应用想实现一些有趣实用的功能时他们可以配合得很好。推送API可以实现从服务端推送新的内容而不需要客户端发起请求，它是由应用的service worker来实现的。通知功能则可以通过service worker来向用户展示一些新的信息，或者至少提醒用户应用已经更新了某些功能。</p> +<p><a href="/en-US/docs/Web/API/Push_API">推送 API</a>和<a href="/en-US/docs/Web/API/Notifications_API">通知 API</a>是两个相互独立的 API，但在提高用户参与度这件事上，它们可以配合得很好。推送 API 可以用来从服务端推送新的内容而无需客户端介入，它是由应用的 Service Worker 来实现的；通知功能则可以通过 Service Worker 来向用户展示一些新信息，或者至少提醒用户应用已经更新了某些功能。</p> -<p>这些工作是在浏览器外部实现的，跟service worker一样，所以即使应用被隐藏到后台甚至应用已经被关闭了，我们仍然能够推送更新或者推送通知给用户。</p> +<p>跟 Service Worker 一样，这些工作是在浏览器外部实现的，所以即使应用被隐藏到后台甚至被关闭了，我们仍然能够推送更新或者通知给用户。</p> <h2 id="通知">通知</h2> -<p>让我们先从通知API开始，它能够脱离推送API单独工作，但两者结合起来会非常的有用，我们先单独看看它能做什么。</p> +<p>让我们先从通知 API 开始，它能够脱离推送 API 单独工作，但两者结合起来会非常的有用，我们先看看它单独能做什么。</p> <h3 id="请求授权">请求授权</h3> -<p>为了能够显示通知，我们需要先请求用户的授权。最佳的实践经验告诉我们，我们应该引导用户点击一个按钮的时候弹出一个授权窗口，而不是立刻显示通知（授权之前无法显示通知，译者注）：</p> +<p>为了能够显示通知，我们需要先请求用户的授权。最佳的实践经验告诉我们，不应该直接请求授权，而应该引导用户点击一个按钮，然后才弹出授权窗口：</p> <pre class="brush: js">var button = document.getElementById("notifications"); button.addEventListener('click', function(e) { @@ -30,13 +30,13 @@ button.addEventListener('click', function(e) { }); });</pre> -<p>下面的图片展示了通过系统的通知服务显示一个授权窗口：</p> +<p>下面的图片展示了如何通过系统的通知服务显示一个授权窗口：</p> <p><img alt="Notification of js13kPWA." src="https://mdn.mozillademos.org/files/15930/js13kpwa-notification.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> -<p>当用户确定接收通知，我们得到应用就可以获得推送通知的功能。用户的授权的结果有三种，default，granted 或者denied，当用户没有做出选择的时候，授权结果会返回defalut，另外两种结果分别是用户选择了授权或者拒绝授权。</p> +<p>当用户确定接收通知，应用就可以获得推送通知的功能。用户的授权的结果有三种，default（默认）、granted（允许） 或者 denied（拒绝），当用户没有做出选择的时候，授权结果会返回 default，另外两种结果分别在用户选择了允许或者拒绝的时候返回。</p> -<p>一旦用户选择授权，这个授权结果对通知API和推送API两者都有效</p> +<p>一旦用户选择授权，这个授权结果对通知 API 和推送 API 两者都有效。</p> <h3 id="创建一个通知">创建一个通知</h3> @@ -55,45 +55,45 @@ button.addEventListener('click', function(e) { setTimeout(randomNotification, 30000); }</pre> -<p>上述代码每隔三十秒会创建一个通知，直到用户开始觉得通知有点烦人并手动关闭掉它为止。（对于一个真正的app，这种通知的频率必须进行严格的控制，它的内容也要更加有用才行）通知API的优势在于它使用了操作系统的通知功能。这意味着即使用户当前并没有在使用我们的应用，我们的通知也能够展示，他看起来跟一个原生应用发出的通知差不多。</p> +<p>上述代码每隔三十秒会创建一个通知，直到用户觉得通知有点烦人并手动关闭掉它为止。一个真正的 app，对通知的频率必须进行严格的控制，通知内容也要更加有用才行。通知 API 的优势在于它使用了操作系统的通知功能，这意味着即使用户当前并没有在使用我们的应用，我们的通知也能够展示，它看起来跟一个原生应用发出的通知差不多。</p> <h2 id="推送">推送</h2> -<p>推送比通知要复杂一些，我们需要从服务端订阅一个服务，之后服务端会推送数据到客户端应用。应用的Service Worker将会接收到从服务端推送的数据，这些数据可以用来做通知推送，或者实现其他的需求。</p> +<p>推送比通知要复杂一些，我们需要从服务端订阅一个服务，之后服务端会推送数据到客户端应用。应用的 Service Worker 将会接收到从服务端推送的数据，这些数据可以用来做通知推送，或者实现其他的需求。</p> -<p>这个技术还处在非常初级的阶段，一些运行中的例子使用了谷歌云的消息推送平台，但他们正在被重写以支持 <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">VAPID</a> (Voluntary Application Identification)，它为你的应用提供了一层额外的安全防护。你可以检查一下这个例子<a href="https://serviceworke.rs/push-payload.html">Service Workers Cookbook examples</a>，尝试用<a href="https://firebase.google.com/">Firebase</a>,配置一个消息推送服务，或者构建自己的推送服务（例如使用Node.js）.</p> +<p>这个技术还处在非常初级的阶段，一些可用示例使用了谷歌云的消息推送平台，但它们正在被重写以支持 <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">VAPID</a> (Voluntary Application Identification)，它能为你的应用提供一层额外的安全防护。你可以看一下 <a href="https://serviceworke.rs/push-payload.html">Service Workers Cookbook 里的一些例子</a>，尝试用 <a href="https://firebase.google.com/">Firebase</a> 配置一个消息推送服务，或者构建自己的推送服务（例如使用 Node.js）。</p> -<p>之前提到，为了接收到推送的消息，你需要有一个service worker，这部分的基础知识我们已经在文章 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Apps/Progressive/Offline_Service_workers" rel="nofollow">通过 Service workers 让 PWA 离线工作</a> 里面解释过。在service worker 内部，存在一个消息推送服务订阅机制。</p> +<p>之前提到，为了接收到推送的消息，你需要有一个 Service Worker，这部分的基础知识我们已经在文章<a href="https://developer.mozilla.org/zh-CN/docs/Web/Apps/Progressive/Offline_Service_workers" rel="nofollow">通过 Service workers 让 PWA 离线工作</a>里面解释过。在 Service Worker 内部，存在一个消息推送服务订阅机制。</p> <pre class="brush: js">registration.pushManager.getSubscription() .then( /* ... */ );</pre> -<p>一旦用户订阅服务，他们就能接收到服务器推送的通知。</p> +<p>一旦用户订阅了通知服务，他们就能接收到服务器推送的通知。</p> -<p>从服务端的角度来看，出于安全的目的，这整个过程必须使用非对称加密技术进行加密 —— 允许用户不安全的使用应用程序来发送推送消息会是一个很糟糕的主意。你可以通过阅读<a href="https://jrconlin.github.io/WebPushDataTestPage/">Web推送数据加密测试页</a>里面的详细信息来保护你的服务器。当用户订阅服务时，服务器会储存所有的接收到的信息以便在后续需要的时候能将信息推送出去。</p> +<p>从服务端的角度来看，出于安全的目的，这整个过程必须使用非对称加密技术进行保护：允许任何人用你的应用发送未加密的消息就大有问题了。你可以通过阅读<a href="https://jrconlin.github.io/WebPushDataTestPage/">Web 推送数据加密测试页</a>里面的详细信息来保护你的服务器。当用户订阅服务时，服务器会储存所有接收到的信息，以便在后续需要的时候能将信息推送出去。</p> -<p>为了能够接收到推送的消息，我们需要在Service Worker文件里面监听{{event("push")}}事件:</p> +<p>为了能够接收到推送的消息，我们需要在 Service Worker 文件里面监听 {{event("push")}} 事件：</p> <pre class="brush: js">self.addEventListener('push', function(e) { /* ... */ });</pre> -<p>这些数据将会被接收后通过通知的方式立刻展现给用户。举个例子，这个功能可以用来提醒用户一些事情，或者让他们知道我们的应用更新了一些新的内容并且已经可用。</p> +<p>这些数据被接收后，将会以通知的方式立刻展现给用户，例如提醒用户一些待办事项，或者让用户知道 App 有了新内容。</p> <h3 id="推送例子">推送例子</h3> -<p>推送需要服务端参与工作，但我们没办法将服务端的例子包含进 js13kPWA这个应用里面，因为应用托管在github上，而github只提供静态页面托管。<a href="https://serviceworke.rs/">Service Worker Cookbook</a> 这个页面上有详细的说明，demo请看 <a href="https://serviceworke.rs/push-payload.html">Push Payload Demo</a>.</p> +<p>推送需要服务端，但因为应用托管在 GitHub 上，而 GitHub 只提供静态页面托管，我们没办法将服务端的例子包含进 js13kPWA 这个应用里面。<a href="https://serviceworke.rs/">Service Worker Cookbook</a> 这个页面上有详细的说明，demo 请看 <a href="https://serviceworke.rs/push-payload.html">Push Payload Demo</a>。</p> -<p>这个demo包含三个文件：</p> +<p>这个 demo 包含三个文件：</p> <ul> <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/index.js">index.js</a>, 包含我们应用的源代码</li> - <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js">server.js</a>,包含服务端的源代码 (用Node.js编写)</li> - <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js">service-worker.js</a>, 包含service worker的具体代码。</li> + <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js">server.js</a>,包含服务端的源代码 (用 Node.js 编写)</li> + <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js">service-worker.js</a>, 包含 Service Worker 的具体代码。</li> </ul> -<p>让我们来一起探索一下这些代码</p> +<p>让我们一起看看这些代码：</p> <h4 id="index.js">index.js</h4> -<p>index.js以注册service worker开始：</p> +<p>index.js 的开头注册了 Service Worker：</p> <pre class="brush: js">navigator.serviceWorker.register('service-worker.js') .then(function(registration) { @@ -106,7 +106,7 @@ button.addEventListener('click', function(e) { // 订阅部分 });</pre> -<p>这个service worker比我们在<a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA demo</a>看到的要稍微复杂一些，在这部分代码里，注册完成之后，我们使用registration对象来发起订阅，然后使用subscription对象来结束这整个流程。</p> +<p>这个 Service Worker 比我们在 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA demo</a> 看到的要稍微复杂一些。在这部分代码里，Service Worker 注册完成之后，我们使用 registration 对象来发起订阅，然后使用 subscription 对象来完成整个流程。</p> <p>注册部分的代码看起来大致是这个样子：</p> @@ -114,22 +114,22 @@ button.addEventListener('click', function(e) { return subscription; }</pre> -<p>如果用户已经完成订阅，我们直接返回subscription对象并且跳转到订阅部分。如果没有，我们会初始化一个新的subscription对象：</p> +<p>如果用户已经完成订阅，我们直接返回 subscription 对象并且跳转到订阅部分。如果没有，我们会初始化一个新的 subscription 对象：</p> <pre class="brush: js">const response = await fetch('./vapidPublicKey'); const vapidPublicKey = await response.text(); const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre> -<p>app会从服务器请求一个公钥并且把响应结果转化成文本，最后它还需要转化成一个Uint8Array（为了兼容chome）。如果你想学习更多关于VAPID的内容可以阅读这篇博客 <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a> 。</p> +<p>App 会从服务器请求一个公钥并且把响应结果转化成文本，最后它还需要转化成一个 Uint8Array（为了兼容 Chrome）。如果你想学习更多关于 VAPID 的内容可以阅读 <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a> 这篇文章。</p> -<p>app现在可以使用{{domxref("PushManager")}} 来订阅新用户。这个方法支持传递两个参数 ——第一个是<code>userVisibleOnly: true</code> ，意思是发送给用户的所有通知对他们都是可见的，第二个是 <code>applicationServerKey</code> ，这个参数包含我们之前从服务端取得并转化的VAPID key。</p> +<p>App 现在可以使用 {{domxref("PushManager")}} 来订阅新用户。这个方法支持传递两个参数：第一个是 <code>userVisibleOnly: true</code>，意思是发送给用户的所有通知对他们都是可见的，第二个是 <code>applicationServerKey</code>，这个参数包含我们之前从服务端取得并转化的 VAPID key。</p> <pre class="brush: js">return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: convertedVapidKey });</pre> -<p>现在我们把注意力转移到订阅部分 —— app首先使用Fetch subscription以json的方式发送给服务器。</p> +<p>现在我们把注意力转移到订阅部分：App 首先使用 fetch 将 subscription 以 JSON 的方式发送给服务器。</p> <pre class="brush: js">fetch('./register', { method: 'post', @@ -141,7 +141,7 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre> }), });</pre> -<p>接着注册按钮绑定了一个函数</p> +<p>接着给“注册”按钮绑定了一个函数：</p> <pre class="brush: js">document.getElementById('doIt').onclick = function() { const payload = document.getElementById('notification-payload').value; @@ -162,15 +162,15 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre> }); };</pre> -<p>当按钮被点击的时候， <code>fetch</code> 会请求服务器根据给定的参数发送通知， <code>payload</code> 参数包含通知里面要显示的文本，<code>delay</code> 参数定义了通知将会延迟展示的秒数，<code>ttl</code> 是 time-to-live 的缩写，用来设置通知在服务器上的存活时间，依然是以秒为单位。</p> +<p>当按钮被点击的时候，<code>fetch</code> 会请求服务器根据给定的参数发送通知，<code>payload</code> 参数包含通知里面要显示的文本，<code>delay</code> 参数定义了通知将会延迟展示的秒数，<code>ttl</code> 是 time-to-live 的缩写，用来设置通知在服务器上的存活时间，依然是以秒为单位。</p> -<p>接着，我们进入下一个JavaScript文件</p> +<p>接着，我们进入下一个 JavaScript 文件。</p> <h4 id="server.js">server.js</h4> -<p>服务端的代码是用Node.js编写的，它需要被托管在合适的地方。这部分内容已经可以用一个完全独立的主体再写一篇文章了。所以这里我们只提供一个简单的概览。</p> +<p>服务端的代码是用 Node.js编写的，它需要被托管在合适的地方。这部分内容已经够单独再写一篇文章了。所以这里我们只提供一个简单的概览。</p> -<p><a href="https://www.npmjs.com/package/web-push">web-push </a>模块被用来配置 VAPID 密钥，如果它尚未可用，你可以选择性的配置他们。</p> +<p><a href="https://www.npmjs.com/package/web-push">web-push</a> 模块被用来配置 VAPID 密钥，如果没有的话，还可以生成一个。</p> <pre>const webPush = require('web-push'); @@ -188,7 +188,7 @@ webPush.setVapidDetails( ); </pre> -<p>接着，一个模块定义并导出了所有应用需要处理的路由：获取 VAPID 公钥，注册，发送通知等等。你可以看到来自 <code>index.js</code> 的变量在这里被用到：<code>payload</code>, <code>delay</code> 和<code>ttl</code></p> +<p>接着，一个模块定义并导出了所有应用需要处理的路由：获取 VAPID 公钥、注册、发送通知等等。你可以看到来自 <code>index.js</code> 的 <code>payload</code>, <code>delay</code> 和<code>ttl</code> 变量在这里被用到了。</p> <pre>module.exports = function(app, route) { app.get(route + 'vapidPublicKey', function(req, res) { @@ -222,7 +222,7 @@ webPush.setVapidDetails( <h4 id="service-worker.js">service-worker.js</h4> -<p>最后我们要看得文件是service worker。</p> +<p>最后我们要看的文件是 Service Worker。</p> <pre>self.addEventListener('push', function(event) { const payload = event.data ? event.data.text() : 'no payload'; @@ -233,9 +233,9 @@ webPush.setVapidDetails( ); });</pre> -<p>它做的所有事就是监听 {{event("push")}} 事件，创建payload 变量，这个变量包含了来自event.data的文本（如果data是空的，则会新建一个‘no payload’字符串），然后一直等到通知推送给用户为止。</p> +<p>它做的就只是监听 {{event("push")}} 事件，创建 payload 变量，这个变量包含了来自 event.data 的文本（如果 data 是空的，就设置成 "no payload" 字符串），然后一直等到通知推送给用户为止。</p> -<p>如果你想知道他们具体是怎么处理的，请随意探索<a href="https://serviceworke.rs/">Service Worker Cookbook</a> 里面剩下的例子—— <a href="https://github.com/mozilla/serviceworker-cookbook/">Github上面提供了完整的源代码</a>。那里有大量的示例展示了各种用法，包括web推送，缓存策略，性能，离线运行等等 。</p> +<p>如果你想知道它们具体是怎么处理的，请随意探索 <a href="https://serviceworke.rs/">Service Worker Cookbook</a> 里面剩下的例子。<a href="https://github.com/mozilla/serviceworker-cookbook/">GitHub 上面提供了完整的源代码</a>，也有大量的示例展示了各种用法，包括 Web 推送、缓存策略、性能、离线运行等等。</p> <p>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</p> |