本文主要讲述智能设备(安卓、iOS)配置 PWA ,可以令 web 应用使用上更像原生应用。影响 PWA 网页应用关键是以下三样东西:<mate>
、<link>
以及 manifest.json
文件。
iOS PWA 应用
Android PWA 应用
<meta>
与 <link>
标签属性
共有属性
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/img/norman-logo.png">
Apple 私有属性
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
。