在开发前端应用程序时，经常需要请求用户的一些浏览权限，例如登陆验证、地理位置信息等等。而在不同的浏览器中，请求权限的方式也是不同的。为了节省开发时间，我们可以使用 npm 上的一个名为 browser-permission-prompts 的包来简化这个过程。本文将介绍如何使用这个包以请求各种浏览器的权限。
安装
可以使用 npm来安装这个包:
npm install browser-permission-prompts
使用方法
Browser-permission-prompts 给出了三种类型的权限请求: Notification、 Geolocation 和 Push。首先，我们需要导入这个包，并实例化权限请求。例如，请求用户的地理位置需要以下代码片段:
import { Geolocation } from "browser-permission-prompts";
const geolocation = new Geolocation();现在，我们可以请求用户的设备地理位置信息了。在调用方法之前，先确保需要请求的浏览器支持特定的 api，并根据需要绑定回调函数。例如，当我们请求用户允许共享位置，我们可以在此之前先检测该设备是否支持地理位置信息:
-- -------------------- ---- -------
-- --------------------------- -
---------------------------------------------------------- -- -- -
----------------------------------- -- -
---------------------------- ------------------
-- --- -- -
-----------------
---
---
-注意，在以上代码中，我们检查是否支持地理位置信息，并添加了 click 事件监听器。当按钮被点击时，我们调用了 request() 方法来请求用户的位置信息。
在接下来的示例中，我们将介绍如何使用 Notification 和 Push。
1. Notification
从 Chrome 50 和 Firefox 22 开始，Web应用程序可以通过使用 Notification API在浏览器中显示桌面通知。使用 browser-permission-prompts可请求桌面通知权限，并在用户允许权限后显示通知。以下是示例代码:
-- -------------------- ---- -------
------ - ------------ - ---- -----------------------------
----- ------------ - --- --------------------- -- --- --------
------------------------------ -- -
-------------------
----- ------ --- --- ------ -- ---------- -- ---- ---------------
---
-- --- -- -
-----------------
---在以上代码中，我们创建了一个标题为“Welcome to the site!” 的通知，请求用户允许通知权限。当用户允许权限时，我们显示一条带有“Thank you for giving us permission to send notifications!” 消息的通知。
2. Push
Push API用于将Web内容发送到已授权的客户端（如UI通知，显示在操作系统UI的消息，等等）。可以使用 browser-permission-prompts 请求 Push 通知权限。以下是示例代码：
-- -------------------- ---- ------- ------ - ---- - ---- ----------------------------- ----- ---- - --- ------- ----- --------- - --- ------------ ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ---- --- ------------------------------------------- -- - ----------------------------------- -- --- -- - ----------------- ---
在以上代码中，我们首先实例化 push 并生成公钥（通过 Uint8Array 生成）。然后，我们请求 Push 通知权限并使用公钥订阅。在用户许可后，使用 toJSON() 方法输出订阅详细信息。
结论
使用 browser-permission-prompts 可以快速而简便地向用户请求浏览权限，能够极大地提高我们的开发效率。弄清楚这个包支持的 API 及其工作方式，并使用简单明了的代码体现，将使得开发流程更加高效且易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5189