跳到主要内容

快速上手 PWA 应用配置

· 阅读需 5 分钟
Norman pong

本文主要讲述智能设备（安卓、iOS）配置 PWA ，可以令 web 应用使用上更像原生应用。影响 PWA 网页应用关键是以下三样东西：<mate>、<link> 以及 manifest.json 文件。

iOS PWA 应用

iOS PWA 应用

Android PWA 应用

Android PWA 应用

复习一下：HTML是一门标签语言

共有属性​

<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/img/norman-logo.png">

Apple 私有属性​

参考：developer.apple.com

iOS 设备需要单独添加的属性，其中第一项 link 是设置启动图标，建议使用将透明的边缘都填满颜色，不然 iOS 能将其边缘填充为黑色 （注意：这样的图标看上去是相当难看）。

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  • apple-mobile-web-app-capable ：content 有两个值 yes 和 no，当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
  • apple-mobile-web-app-status-bar-style ：默认值为 default（白色），可以定为black（黑色）和 black-translucent（透明）。

注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方。

过渡页​

  • 安卓手机只需要设置 manifest.json 中的 name、short_name、theme_color、icons，即可自动匹配。
  • iOS 需要在 meta 中继续添加标签，还需要用到媒体查询的语法去适配，不然当尺寸不匹配时，效果将不生效。
<link rel="apple-touch-startup-image" href="/launch.png">
<!-- or 使用媒体查询为条件匹配 -->
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/lanuch.png">

使用 pwa-asset-generator 生成 PWA 配置​

npm install -g pwa-asset-generator

使用 logo 生成过渡页​

pwa-asset-generator ./icon.png

结果如下，可手动复制到对应的文件中，也可以根据命令生成文件，详细通过 pwa-asset-genrator -h 进行查看。

saveImages Saved image apple-splash-2048-2732 🙌
saveImages Saved image apple-splash-2732-2048 🙌
saveImages Saved image apple-splash-1668-2388 🙌
saveImages Saved image apple-splash-2388-1668 🙌
...

[
  {
    "src": "manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]
注意

当 iOS 设备需要设置过渡页时 <meta name="apple-mobile-web-app-capable" content="yes"> content 必须为 yes 。

完整的参考配置​

manifest.json 参考​

MDN:Manifest

{
  "name": "Norman·Pong Website",
  "short_name": "NormanSite",
  "theme_color": "#FFFFFF",
  "background_color": "#424242",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "./",
  "start_url": "./index.html",
  "description": "骚气十足且不专注于软件开发的技术博客",
  "icons": [
    {
      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/img/norman-logo.png">

<!-- apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 将状态栏设置为透明，若应用中有固定的导航栏，不建议使用 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- apple 设备参考，更详细的尺寸可使用 pwa-asset-generator 生成与查看 -->
<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1170-2532.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/img/apple-splash/apple-splash-828-1792.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1125-2436.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1179-2556.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1242-2208.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1242-2688.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1284-2778.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1290-2796.jpg">