前言
PWA（Progressive Web App）是一种新型的 Web 应用程序模型，它可以让 Web 应用程序在移动设备上具有与原生应用程序相似的体验。PWA 可以被添加到主屏幕上，像原生应用程序一样直接从主屏幕启动，而不需要通过浏览器来访问。在 iOS 中，虽然 Safari 支持 PWA，但是添加到主屏幕上后，PWA 会在 Safari 中打开，而不是直接全屏打开。那么，如何实现在 iOS 中添加到主屏幕，触发页面直接全屏打开呢？
实现步骤
实现在 iOS 中添加到主屏幕并全屏打开，需要以下几个步骤：
1. 添加到主屏幕
在 iOS 中，我们可以通过以下两种方式将 PWA 添加到主屏幕上：
1.1 使用 Safari 中的添加到主屏幕功能
用户可以在 Safari 中通过「分享」按钮将 PWA 添加到主屏幕上。添加后，用户可以在主屏幕上看到 PWA 的图标，并且可以像启动原生应用程序一样启动 PWA。
1.2 使用 Web App Manifest
Web App Manifest 是 PWA 的一个重要组成部分，它包含了 PWA 的名称、图标、启动方式等信息。通过在 PWA 的 HTML 文件中添加 Web App Manifest，可以让用户在 Safari 中直接使用「添加到主屏幕」功能，将 PWA 添加到主屏幕上。
以下是一个简单的 Web App Manifest 示例代码：
-- -------------------- ---- -------
-
------- --- -----
------------- --- -----
-------- -
-
------ -----------
-------- ----------
------- -----------
-
--
------------ ----
---------- ------------
-2. 全屏打开
在 iOS 中，PWA 添加到主屏幕上后，默认情况下会在 Safari 中打开。要实现直接全屏打开，需要通过以下两个步骤：
2.1 隐藏 Safari 导航栏和工具栏
在 PWA 的 HTML 文件中，可以通过以下代码隐藏 Safari 导航栏和工具栏：
body {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}这段代码会将 body 元素的位置固定，同时将它的 left、right、top、bottom 属性都设置为 0，从而占据整个屏幕，并将 Safari 导航栏和工具栏隐藏。
2.2 使用 JavaScript 实现全屏打开
在 PWA 的 JavaScript 文件中，可以通过以下代码实现全屏打开：
-- -------------------- ---- -------
-- ----------------------------- -
-- -----------------
---------------------------------------------------
- ---- -
-- ---------------------
--- ------ - ---------------------------------
---------------- - -------
-------------- - ---------- -
---------------------------------------------------
--
----------------------------------
-这段代码首先判断是否是从主屏幕启动，如果是，则直接调用 document.documentElement.webkitRequestFullscreen() 方法进行全屏打开。如果不是，则添加一个按钮，让用户手动触发全屏打开。
结论
通过以上步骤，我们可以实现在 iOS 中添加到主屏幕并全屏打开 PWA。需要注意的是，全屏打开功能只在 iOS 12.2 及以上版本中才支持。
PWA 的优势在于可以像原生应用程序一样启动并全屏打开，让用户获得更好的体验。通过以上步骤，我们可以在 iOS 中实现这一功能，为用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675576923af3f99efe4d4878