在移动设备上，用户常常需要通过点击屏幕下方的 home 键回到主屏幕。而对于使用 PWA 的应用程序来说，我们可以为用户提供更好的体验，通过添加一个可悬浮按钮，让用户随时回到主屏幕。
什么是 PWA？
PWA 是 Progressive Web Apps 的缩写，是一种结合了 Web 技术和 Native 应用程序的体验。通过利用新的 Web API，PWA 可以让网站拥有类似原生应用程序的功能，例如离线支持，推送通知和设备硬件访问。
如何添加可悬浮按钮？
添加可悬浮按钮的基本思路是，通过 JavaScript 创建一个 div 元素并设置样式，使其看起来像一个按钮，然后插入到页面中。当用户点击该按钮时，我们可以通过 window.open() 或 window.location.href 将用户带回主屏幕。
以下是添加悬浮按钮的示例代码：
-- -------------------- ---- -------
---- - ------ ---------- ---
-------
---------------- -
--------- ------
------- -----
------ -----
------ -----
------- -----
-------------- ----
----------------- --------
------ --------
----------- -------
------------ -----
---------- -----
-------- -----
-
--------
---- - ------ --------- ---
---- ----------------------- ---------------------
-- --------- -------------
------
---- - -------- ------- ---------- -- ---
--------
-------- ---------- -
-- ------------- -- ---------------- -- ---------------------------- -
-- --- --- ---- -------------------- ------
-------------------- - ----
- ---- -
-- ---- --- ---- ------------- ------
---------------- ----------
-
-
---------上面的代码中，我们通过样式表创建了一个圆形的按钮，并将其添加到页面底部的右侧。按钮的功能是跳转到主屏幕。在 goToHome() 函数中，我们首先检查当前浏览器是否在 iOS 上运行，并且是否已经从主屏幕启动。如果是，则使用 window.location.href 导航到主屏幕。否则，我们使用 window.open() 打开一个新窗口并导航到主屏幕。
总结
在 PWA 中添加可悬浮按钮可以为用户提供更好的体验，让用户随时返回主屏幕。我们可以通过 JavaScript 创建一个圆形的 div 元素，将其样式设置为可悬浮按钮，并将该元素插入到页面中。当用户点击按钮时，我们可以使用 window.location.href 或 window.open() 将用户带回主屏幕。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2379048841e9894e7f93f