其实这个功能早在 2.x 版本就加入了,那时候对 PWA 并没有什么概念。好想换 iPad Mini (new)

nlvi-ios-desktop

目前 3.x 只改了启动图,适配了 iPad 横屏和 iPhone 全面屏(普通屏和plus后续加)。之前看到苹果对 PWA 持拒绝态度我是震惊的,你 tm 早就给 safari 加入了这个功能,也有相关meta配置(包括”识别为WebApp“),然后你告诉我这东西不是 PWA?

本来确实想支持 PWA 的,想到除了要 manifest.json,还要搞定对应生成 service worker,使用不是很友好,所以取消计划。这部分添加功能就是一个尝试的甜点,所以也没有拿出来说。目前 3.x 开启 pjax 然后添加到桌面,阅读体验还是挺好的。

所以这次打算讲讲「苹果式网页应用安装」,其实挺简单的。

meta

这里没有列出所有关于 safari 支持的 meta,只针对这个功能部分。

1
2
3
4
5
6
7
8
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Colmugx's Blog">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" sizes="72x72" href="icon.ico">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon.ico">
<link rel="apple-touch-startup-image" media="(device-width: 375px)" href="apple-launch-1125x2436.png">
<link rel="apple-touch-startup-image" media="(orientation: landscape)" href="apple-touch-startup-image-2048x1496.png">

从上到下分别是:

  • 添加到主屏幕后,是否全屏显示
  • 是否显示 safari 菜单
  • 应用默认名称(在添加的时候可以修改)
  • 打开时,顶上状态栏应该呈现什么颜色(白色,黑色,透明)
  • 设置 icon (72x72, 114x114),图标在「书签」也可适用
  • 设置启动画面(这里只设置了手机与平板横置)

apple-touch-startup-image

其他的没什么坑点,只是apple-touch-startup-image会复杂一些。它分成很多分辨率,设置不清楚的话就不会显示。而且它不能像图标一样设置size。只能用media一行一行写。

比如 iPad,设置倒是不需要跟手机一样那么多图片,只需要准备一张垂直一张水平。垂直 768x1024,水平748x1024,水平图也需要摆成垂直的,也就是1024x748,当然内容也是横直,相当于顺时针 90°。接着就考虑一下屏幕用的是二倍图还是三倍图了。

参考文章:Adding Custom iOS Splash Screens To Your Progressive Web App