在获取 PushSubscription 并将其保存到我们的服务器后，自然而然的下一步是触发推送消息，但我公然忽略了一件事。请求用户允许向其发送推送消息时的用户体验。
遗憾的是，很少有网站会认真考虑如何向用户请求权限，因此我们不妨简要了解一下良好和糟糕的用户体验。
常见模式
目前已经出现了一些常见模式，在您决定哪种模式最适合您的用户和应用场景时，这些模式应该可以为您提供指导和帮助。
价值主张
在用户能明显感受到好处时，邀请他们订阅推送通知。
例如，用户刚刚在网店中购买了商品并完成了结账流程。然后，该网站便可提供送货状态更新。
此方法适用于多种情况：
- 某件商品缺货，您想在下次到货时收到通知吗？
- 此重大新闻报道会定期更新，您希望在报道有新进展时收到通知吗？
- 您是出价最高者，如果有人出价高于您，您是否希望收到通知？
在这些时间点，用户已经对您的服务进行了投入，并且有明确的价值主张让他们启用推送通知。
Owen 创建了一个模拟航空公司网站 来演示这种方法
用户预订航班后，系统会询问用户是否希望接收航班延误通知。
请注意，这是网站的自定义界面。
Owen 的演示中还有一个不错的细节：如果用户点击启用通知，网站会在显示权限提示时在整个页面上添加一个半透明叠加层。这会吸引用户注意权限提示。
与此示例（请求权限的不良用户体验）相反的做法是，在用户进入航空公司网站后立即请求权限。
这种方法没有提供任何背景信息来说明为什么需要通知或通知对用户有什么用。此权限提示还会阻止用户完成其原始任务（即预订航班）。
双重权限
您可能认为您的网站有明确的推送消息用例，因此希望尽快请求用户授予权限。
例如即时通讯和邮件客户端。在各种平台上，显示新消息或电子邮件的消息都是一种既定的用户体验。
对于这些类别的应用，值得考虑双重权限模式。
首先显示一个由您的网站控制的对话框，说明您的网站用例的价值。然后，对话框可以提供按钮来触发或放弃必要的权限请求。 如果用户给出积极信号，则请求权限，触发真实的浏览器权限提示。
通过这种方法，您可以在 Web 应用中显示自定义提示，首先提供上下文。这样，用户就可以选择启用或停用，而不会因为意外的权限提示让用户感到厌烦，从而导致您的网站面临被永久屏蔽的风险。如果用户在自定义界面上选择启用，则显示实际的权限提示，否则隐藏自定义对话框并尊重用户的选择。
您可以详细了解权限最佳实践以及 Google Meet 如何改进其权限流程。
设置面板
您可以将通知移至设置面板，让用户能够轻松启用和停用推送消息，而无需让 Web 应用的界面变得杂乱。
Google I/O 网站就是一个很好的例子。 当您首次加载 Google I/O 网站时，系统不会要求您执行任何操作，而是让用户自行探索网站。
访问几次后，点击右侧的菜单项会显示一个设置面板，用户可以在其中设置和管理通知。
点击复选框会显示权限提示。没有隐藏的意外。
授予权限后，复选框会被选中，用户就可以开始使用了。此界面的一个优点是，用户可以在网站上的一个位置启用和停用通知。
被动式方法
向用户提供推送功能的最简单方法之一是，在网站中位置一致的页面上提供一个按钮或切换开关，用于启用/停用推送消息。
这不会促使用户启用推送通知，但为用户提供了一种可靠且简单的方式，让他们可以选择加入和退出与您的网站互动。对于博客等可能有一些固定浏览者且跳出率较高的网站，这是一个不错的选择，因为它针对的是固定浏览者，不会打扰到匆匆过客。
在我的个人网站上，页脚中有一个推送消息切换开关。
虽然这个位置比较偏僻，但对于常客来说，它应该能吸引足够多的读者关注，让他们想要获取最新动态。一次性访问者完全不受影响。
如果用户订阅了推送消息，切换开关的状态会发生变化，并在整个网站中保持该状态。
糟糕的用户体验
这些是我在网上注意到的一些常见做法。遗憾的是，有一种非常常见的错误做法。
最糟糕的做法是在用户一进入您的网站时就向其显示权限对话框。
他们完全不了解为何系统会请求权限，甚至可能不知道您的网站是做什么的、有什么功能或提供什么服务。此时，用户因感到沮丧而屏蔽权限的情况并不少见，因为此弹出式窗口会妨碍他们尝试执行的操作。
请注意，如果用户屏蔽了权限请求，您的 Web 应用将无法再次请求权限。如需在被屏蔽后获得权限，用户必须在浏览器的界面中更改权限，而这样做对用户来说并不容易、不明显，也不有趣。
无论如何，请勿在用户打开您的网站后立即请求权限，请考虑使用其他一些界面或方法来激励用户授予权限。
提供退出途径
除了考虑让用户订阅推送消息的用户体验之外，请考虑用户应如何退订或选择不接收推送消息。
在网页加载后立即请求权限，然后不提供用于停用推送通知的界面的网站数量惊人。
您的网站应向用户说明如何停用推送功能。否则，用户可能会采取极端措施，永久屏蔽权限。
下一步做什么
- Web 权限最佳实践
- 更少阻碍，更多控制：Google Meet 如何改进音频和视频权限
- Web 推送通知概览
- 推送的工作原理
- 为用户订阅
- 使用 Web 推送库发送消息
- Web 推送协议
- 处理推送事件
- 显示通知
- 通知行为
- 常见通知模式
- 推送通知常见问题解答
- 常见问题和报告错误