渐进式Web应用程序中的推送通知指南

作者 : IT 大叔 本文共5524个字,预计阅读时间需要14分钟 发布时间: 2020-09-24

渐进式Web应用程序系列

渐进式Web应用程序PWA的易用性和快速的开发过程正在席卷整个行业。当与推送通知功能结合使用时,这些PWA便成为个人和专业开发人员的强大力量。

今天,我们将继续学习PWA,方法是了解使Push通知如此有用的原因,并向您展示如何在自己的应用程序中实现基本的Push功能。到最后,您将了解Push最佳实践,并为您自己的项目构建了Push服务的起点。

刚开始使用PWA?在继续此处之前,请阅读本系列的第一部分以学习基础知识:使用Progressive Web Apps构建现代的脱机应用程序

这是我们今天将学习的内容:

  • 什么是推送通知?
  • 推送通知的最佳做法
  • 如何实施推送通知

什么是推送通知?

推送通知是一种与您的用户即时通信的新方法,该应用当前已关闭。推送通知使用两个API:

  • 通知API
  • 推送API

Notification API允许应用在活动状态下向用户显示系统通知。即使应用程序处于离线状态,Push API也允许该应用程序显示这些通知。在手机上,如果手机已锁定,则推送通知甚至可以显示。

后台服务工作者可以在脱机时发送消息。该应用程序使用Push API来管理服务人员,该服务人员不断侦听来自应用程序服务器的特殊Push通知。一旦收到推送消息,服务工作者就向用户“推送”该应用程序当前是否正在运行的通知。

仅当应用具有对设备的后台访问权限并使用支持Push API的浏览器时,推送通知才能起作用。用户必须通过提示符授予对应用程序的后台访问权限,并且可以随时禁用访问权限。

大多数浏览器都支持Push API,例如Chrome,Safari和Firefox。像Microsoft Edge这样不受支持的浏览器已经宣布,他们将在将来的版本中添加Push支持。

推送通知的常见用法

推送通知是一种强大的工具,可以与以前的用户重新互动,并始终如一地与当前订户联系。最好在具有时间敏感性组件(例如销售或突发新闻)的应用上使用它们。推送通知因其不断吸引客户的能力而在电子商务应用程序和新闻服务中特别受欢迎。

以下是一些使用推送通知的流行应用程序类型:

  • 新闻应用程序(CNN,《纽约时报》,NPR): “最新消息:这则新闻正在中断”
  • 电子商务应用程序(eBay,亚马逊): “仅需1美元即可获得此产品”
  • 娱乐(Netflix,Youtube,Apple Podcasts): “现在有新剧集可用”
  • Rideshare(Lyft,Uber和Grabtaxi): “您的旅程在这里!”

推送通知的优缺点

优点:

  • 即时通知
  • 可以覆盖大量用户
  • 返回指标,例如点击通知的用户数量
  • 可以与过去的用户互动,即使他们不再主动使用该应用

缺点

  • 必须谨慎使用,以免用户选择退出推送通知
  • 可以撤消正面品牌。一些用户不喜欢推送通知,并且可能不喜欢使用它的应用程序。
  • 由Apple这样的提供商严格监管。

推送条款快速指南

  • 推送消息:从服务器发送到客户端的消息。
  • 推送通知:从“推送消息”生成的通知,将其传递给用户。
  • 通知API:用于配置和向用户显示通知的界面。
  • Push API:用于将应用程序与Push服务链接的界面,并允许服务人员接收推送消息。
  • Web推送:基于Web的推送通知实现。
  • 推送服务:特定于浏览器的系统,用于处理推送消息。大多数都针对应用程序开发进行了标准化,唯一的变化是在幕后。
  • Web推送协议:由应用程序开发人员创建的有关应用程序或用户如何与浏览器的推送服务进行交互的指令。

推送通知的最佳做法

推送通知如果使用不当,可能会损害用户体验。使用我们的5种推式最佳做法列表,以确保您从新的外展系统中获得最大收益。

1.每周发送少于5条通知

研究来源发现通知频率的不同断点,但大多数人得出结论,应该很少使用推送通知。每个消息的确切有效性取决于应用程序的类型和所选媒介。通常,每天发送的推送通知不要超过一次,而每周发送的推送次数应少于5次。

2.选择加入而不是选择退出

大多数用户更喜欢选择加入推送通知而不是选择退出。与选择加入模型的应用程序相比,使用选择退出的应用程序一向更加不受欢迎。此外,许多供应商(如Apple)都要求应用程序开发人员将推送功能的选择加入模型作为其指导原则的一部分。

3.硬性加入后,软性加入

硬选择是在用户打开应用程序时提示用户授予访问权限。软选择是用户操作触发提示时,例如用户单击通知按钮时。后者是受青睐的,因为它提供了有关用户期望的通知的更多信息。它被认为具有较低的干扰性,并提供了机会要求用户选择下次访问。

4.包括强大的通知设置

包括用于推送和非推送通知的单独通知设置,以及应用程序上的不同功能。例如,假设您的应用显示了新闻文章,并允许您购买高级文章的新闻订阅。应该允许用户从一项功能(例如订阅优惠)中选择退出推送通知,但仍会收到新闻文章的推送通知。同样,即使他们不希望推送通知,用户也应该能够选择接收电子邮件通知。

这两种设计均确保您避免用户选择全有或全无,从而在所有类型的用户中保持最大的产品曝光率。

5.符合平台准则

现在,越来越多的提供商在其平台上管理推送通知,例如Apple for iOS。请注意您的应用将在何处启动,并检查其是否符合所有准则。该平台禁止不符合准则的应用程序。跨平台的两个一致的准则是:

  • 推送通知不一定是应用程序运行所必需的。
  • 推送通知不得发送敏感或机密信息。

如何使用PWA实施推送通知

现在,我们将引导您完成如何在自己的应用程序中实现基本的Push通知。任何启用了Push的应用程序需要的基本功能是:创建服务工作者,检查权限,请求权限和退订。

在学习完本教程之后,您将创建简单的Push功能,可以在继续进行PWA应用程序开发过程时从中构建这些功能。

1.设置工作区

在开始之前,我们将创建工作区。首先,创建一个名为的JavaScript文件notification.js。这将是我们添加所有其他步骤代码的地方。您还应该在应用程序的HTML文件中添加以下行对此文件的引用:

<script src="./js/notification.js"></script>

我们还需要设置一种简便的方法来激活服务人员。如果要通过这些步骤跟踪程序的进度,则需要删除并重新加载服务人员以查看更改。

使用以下代码在notification.js文件顶部创建服务工作者:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

上面的第1行检查浏览器是否支持服务人员。如果是,则第2和第3行将工作程序设置为在页面完全加载后激活。最佳做法是将服务工作者的激活延迟到页面加载之后。如果在页面加载过程中激活了工作程序,则低端设备将出错。

有关服务人员和能力的更多信息,请参阅我们的上一篇文章,使用Progressive Web Apps构建现代的脱机应用程序

2.检查权限

现在,我们将检查用户是否启用了推送通知以及当前浏览器是否支持推送通知。如果两者都受支持,则navigator.serviceWorker.ready在第14行检查服务工作者是否准备就绪。最后,.getSubscription在第16行使用内置函数获取用户订阅信息。

function isPushSupported() {
    //checks if user has granted permission to Push notifications
    if (Notification.permission === 'denied') {
      alert('User has blocked push notification.');
      return;
    }
 
    //Checks if current browser supports Push notification
    if (!('PushManager' in window)) {
      alert('Sorry, Push notification isn\'t supported in your browser.');
      return;
    }
 
    //Get `push notification` subscription id
 
    //If `serviceWorker` is registered and ready
    navigator.serviceWorker.ready
      .then(function (registration) {
        registration.pushManager.getSubscription()
        .catch(function (error) {
          console.error('Error occurred while enabling push ', error);
        });
      });
  }

3.请求权限

每个使用推式通知的应用程序都必须能够请求用户权限。要学习基础知识,我们将使用硬性加入模型请求。以下subscribePush()功能询问用户是否要订阅推送通知,并在同意的情况下订阅。

在第3行中,我们要求用户使用弹出窗口进行订阅。在用户端,它看起来像:

渐进式Web应用程序中的推送通知指南插图

然后在第4行,我们为用户何时看到通知设置了标准。对于此示例,我们设置用户以查看所有发送的通知。

最后,我们使用第6-10行来检查订阅是否已完成,并告诉用户他们已成功订阅。

  function subscribePush() {
      //Subscribes user to Push notifications
      registration.pushManager.subscribe({
        userVisibleOnly: true //Set user to see every notification
      })
      .then(function (subscription) {
        toast('Subscribed successfully.');
        console.info('Push notification subscribed.');
        console.log(subscription);
      })
      .catch(function (error) {
        console.error('Push notification subscription error: ', error);
      });
    })
  }

4.退订

作为最后一部分,我们将为用户添加取消订阅推送通知的方式。unsubscribePush()下面的函数获取用户订阅ID,然后将其从我们的Push服务中删除。

第2-11行使用内置getSubscription()函数来获取用户的订阅信息。我们将第13行的订阅信息用作该unsubscribe()函数的输入。这会从我们的推送通知中选择并取消订阅用户。如果一切顺利,我们将向用户显示一条消息,告知他们已成功取消订阅。

  function unsubscribePush() {
    navigator.serviceWorker.ready
    .then(function(registration) {
      //Get subscription
      registration.pushManager.getSubscription()
      .then(function (subscription) {
        //If no `push subscription`, then return
        if(!subscription) {
          alert('Unable to unregister push notification.');
          return;
        }
 
        //Unsubscribes user
        subscription.unsubscribe()
          .then(function () {
            toast('Unsubscribed successfully.');
            console.info('Push notification unsubscribed.');
          })
          .catch(function (error) {
            console.error(error);
          });
      })
      .catch(function (error) {
        console.error('Failed to unsubscribe push notification.');
      });
    })
  }
 

恭喜你!现在,您已具有创建Push服务所需的所有基本功能。开发应用程序时的下一步是创建用于订阅的按钮,实施软件选择加入并起草第一个Push通知。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 渐进式Web应用程序中的推送通知指南

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论