获取 PushSubscription 并保存到服务器后推送消息的最佳实践

在获取 PushSubscription 并保存到服务器后，推送消息自然成为下一个步骤，但这里存在一个用户体验问题：如何优雅地向用户请求推送消息权限。

遗憾的是，目前很少有网站在请求用户权限时充分考虑用户体验。下面我们将探讨用户体验的优秀实践和常见问题。

常见模式

以下是几种常见的权限请求模式，可帮助您根据用户和使用场景选择最适合的方案。

价值主张模式

在推送通知的好处显而易见时，向用户请求推送通知权限。

例如，当用户在线商店完成购买流程后，网站可以提供配送状态更新。

以下场景适合采用此方法：

• 特定商品缺货时，是否希望在补货时收到通知？
• 此新闻快讯会定期更新，点击”接收通知”获取最新信息
• 您是当前最高出价者，是否希望在有人超过您时收到通知？

这些场景中用户已对服务产生投入，启用推送通知能为用户提供明确的价值。

Owen 创建了一个虚构航空公司网站的演示来说明此方法。当用户预订航班后，会询问是否希望接收航班延误通知。这是网站的自定义 UI 界面。

该演示的另一优点是，当用户点击启用通知并显示权限提示时，网站会在页面上添加半透明覆盖层，将用户注意力吸引到权限提示上。

与此相反的不良用户体验是：用户刚访问航空公司网站就立即请求权限。这种方法既没有说明为何需要通知，也没有解释对用户有何益处，同时还会中断用户完成原始任务（如预订航班）。

双重权限模式

当网站有明确的推送消息使用场景，且希望尽早向用户请求权限时（如即时消息客户端或邮件客户端），可考虑使用双重权限模式。

首先显示网站控制的对话框，解释使用场景的价值。对话框中包含触发或跳过权限请求的按钮。如果用户给出积极信号，再请求权限并触发实际的浏览器权限提示。

这种方法首先通过自定义提示提供上下文，让用户选择启用或禁用，避免因意外出现的权限提示引起用户反感，导致网站被永久屏蔽的风险。如果用户在自定义 UI 中选择启用，则显示实际权限提示；否则隐藏自定义对话框，尊重用户选择。

详细了解权限最佳实践和 Google Meet 如何改进其权限流程。

设置面板模式

将通知选项移至设置面板，用户可轻松启用或禁用推送消息，而不会使 Web 应用界面变得杂乱。

Google I/O 网站是一个很好的例子。首次加载该网站时，不会请求任何权限，用户可以自由浏览。

访问几次后，点击右侧菜单项会显示设置面板，用户可以在其中配置和管理通知。

点击复选框会触发权限提示。权限授予后，复选框会被勾选，用户即可开始使用。此 UI 的优点是用户可以在网站的一个统一位置启用或禁用通知。

被动模式

最简单的推送提供方法之一是在网站一致的位置放置启用或禁用推送消息的按钮或切换开关。

这不会主动促使用户启用推送通知，但提供了可靠且简单的方法来管理通知交互。对于博客等拥有定期访问者但跳出率较高的网站，此选项特别有效，它可以在不干扰偶然访问者的同时，精准定位忠实读者。

个人网站的页脚可以放置推送消息切换开关。这个位置虽不显眼，但能吸引希望获取更新的常客注意，而一次性访问者完全不会受到影响。

用户注册推送消息后，切换开关状态会发生变化，并在整个网站中保持状态一致。

不良用户体验

以下是一些网络上常见的不良实践，其中有一个特别普遍的问题：

最糟糕的做法是在用户刚访问网站时就显示权限对话框。此时用户完全不清楚为何需要授予权限，甚至可能不了解网站的目的、功能或提供的内容。这种情况下，用户通常会因烦躁而选择阻止权限，因为这个弹窗干扰了他们原本想要进行的操作。

如果用户阻止了权限请求，Web 应用将无法再次请求该权限。被阻止后，用户只能通过浏览器 UI 手动更改权限设置，这个过程既不简单也不直观，更不会带来愉快的体验。

无论如何，请避免在用户刚打开网站时就请求权限。考虑其他能给予用户授权动机的 UI 设计和交互方式。

提供解决方案

除了优化推送通知注册的用户体验外，还需要考虑用户如何取消推送通知订阅或选择退出。

令人惊讶的是，很多网站不仅在页面加载后立即请求权限，还不提供禁用推送通知的 UI 界面。

网站必须明确说明如何禁用推送功能。如果不这样做，用户可能会选择”核选项”——完全阻止该权限。

后续步骤

• Web 权限最佳实践
• 减少干扰并实现更精细控制：Google Meet 改进音视频权限的方法
• Web 推送通知概述
• 推送工作原理
• 用户注册流程
• 使用 Web 推送库发送消息
• Web 推送协议详解
• 推送事件处理
• 通知显示机制
• 通知行为分析
• 常见通知模式
• 推送通知常见问题解答
• 常见问题和错误报告

Codelab 实践

• 创建推送通知客户端
• 构建推送通知服务器