创建自定义 PWA 启动画面

已发表: 2020-08-31

如之前在我们的 PWA 清单教程中所述，您只需在manifest.json中添加几行代码，即可为您的 PWA 创建一个独特的启动画面。该过程并不像人们期望的那样过于复杂，而且您实际上可以立即完成所有事情。让我们直接进入它，我们应该：

PWA 中的闪屏案例

未配置时，默认情况下打开您的 PWA 的用户会看到一个空白的白色屏幕。这本身应该没问题，因为在现代设备上，打开应用程序的时间几乎是即时的。但是，在速度较慢的设备上，这可能是一个问题，因为它会破坏用户对您的应用程序的最初看法。再加上具有 1GB RAM 的低规格设备仍然是最常见的事实，代表您品牌的独特闪屏是必须的。

如何创建自己的启动画面

在 Android 上，这个过程就像输入三行代码一样快。然而，对于 iOS，这是一个不同的故事，因为您必须为不同的屏幕尺寸制作不同的启动图像尺寸。

安卓版

手动进行

在您的manifest.json文件中，确保正确配置了这三个属性： name 、 background_color和icons ：

name ：你的 PWA 的名称
background_color ：初始屏幕的背景颜色。仅识别有效的 CSS 颜色值。
icons ：一个.png图标，最小尺寸为 192×192 像素。

例如，正确配置的manifest.json应该是这样的。注意icons属性有四种不同的尺寸——提供这些不同尺寸的图标是为了提供对不同设备的最佳兼容性。

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    “显示”：“全屏”，
    “范围”： ”/”，
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    “描述”：“Magento 的下一代电子商务解决方案”，
    “图标”：[
        {
            "src": "/icon-192x192.png",
            “尺寸”：“192x”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-256x256.png",
            “尺寸”：“256x”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-384x384.png",
            “尺寸”：“384x”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-512x512.png",
            “尺寸”：“512x”，
            “类型”：“图像/png”
        }
    ]
}

设置完属性（和你的manifest.json文件）后，支持 PWA 的浏览器（通常是 Chrome）会自动为你的启动屏幕生成不同的图标大小并相应地显示它们。

很轻松，不是吗？如果你问我们，我们认为这就是开发体验应该是什么样的。

 推荐阅读：PWA Manifest：轻松创建 Web App Manifest

使用清单生成器

您可以使用我们的清单生成器轻松地自动化此过程。只需输入所需的信息，我们的生成器就会为您生成一个.zip ，其中包含您需要的所有信息。

对于 iOS

Apple 肯定不想让开发人员轻松完成这个过程。在撰写本文时，Web App Manifest 支持的状态仍列为部分支持——在首次出现两年后保持不变。这意味着 PWA 不支持icons 、 minimal-ui 、 fullscreen 、 theme-color和orientation 。

幸运的是，还有一种方法可以解决这个问题，即使用<apple-touch-startup-image>元标记。不是一个理想的解决方案——但它确实有效。

 <!-- iPhone X 启动画面 (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

通过使用<apple-touch-startup-image>元标记，您可以为 PWA 的初始屏幕指定一个固定分辨率的图像（即startup-image ）。此自定义启动画面仅与一种屏幕尺寸兼容，您需要更多不同的图像尺寸才能适应市场上 Apple 产品的不同屏幕尺寸。

这意味着您需要为每个屏幕尺寸创建两个启动画面，一个用于每个方向（横向和纵向）。当我们涵盖了列表中的一些设备时，我们的代码应该是这样的：

 <!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
<!-- iPhone 8、7、6s、6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-750x1334.png">
<!-- iPhone 8 Plus、7 Plus、6s Plus、6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- iPad Mini，Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">

将此代码链接到您的index.html的<head>中，并且不要忘记在下面插入<meta>标记以启用 PWA 行为，否则我们的启动画面将根本无法工作。

 <meta name="apple-mobile-web-app-capable" content="yes">

有了这个，你应该准备好了。启动您的 iOS PWA，您将能够看到您的启动画面。

使用 iOS 启动画面生成器

当然，还有更好的方法来自动化这个过程，那就是使用 iOS Splash Screen Generator。以您的图像为源，生成器将为您生成不同大小的图像以及插入index.html所需的 HTML 代码。

结论

虽然不完全是入职体验的一部分，但启动画面仍然在建立对您的品牌的积极看法方面发挥着重要作用——它是一种唾手可得的果实，可能会带来您意想不到的结果。

我们希望本教程能解决您的确切问题。如果您和您的团队没有太多经验，那么实施和自定义 PWA 可能会让人头疼。像 SimiCart 这样的专业 PWA 开发解决方案可以帮助它变得更容易。