为网站添加webApp的功能，可以让网页保存在用户的桌面上，与原生app至少在视觉和一定的体验上，没有差异。点击访问，也能以独立应用的形态运行，且自动隐藏浏览器的菜单栏。

要实现这个效果，只需准备一个manifest文件，其包含了各个尺寸的icon以及webApp启动时的闪屏背景色等等。在Butterfly主题中，作者已经给了通过 pwa 实现webApp的一系列教程。

背景

我最近在折腾HeoMusic，已经部署在了本站音乐。我为其添加了webApp支持，如果你此刻使用 Chrome / Safari 访问本篇，那可以试试浏览器工具中的添加到主屏幕。操作后，你可以在手机桌面主屏幕发现新增一个音乐的应用。

主要改动，是在创建 manifest 文件后，在网页head添加以下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- 设置网页添加到主屏幕后的名称 -->
<meta name="apple-mobile-web-app-title" content="音乐">

<!-- 为网页启动`webApp`独立应用运行支持，同时关闭工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 添加到主屏幕“后，全屏显示 -->
<meta name='apple-touch-fullscreen' content='yes' >

<!-- Apple 特有的，设置状态栏和工具栏颜色。可以设置为 default 或 black ，默认 default 是黑色。设置为 black-translucent 时，网页内容会显示在整个屏幕 -->
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'>

<!-- 引用 manifest -->
<link rel="manifest" href="/manifest.json" >

<!-- 添加一些 icon 引入 -->
<link rel="apple-touch-startup-image" href="./img/splash-2048x2732.png"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2732x2048.png"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1668x2388.png"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2388x1668.png"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1536x2048.png"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2048x1536.png"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1668x2224.png"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2224x1668.png"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1620x2160.png"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2160x1620.png"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1290x2796.png"
  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2796x1290.png"
  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1179x2556.png"
  media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2556x1179.png"
  media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1248x2778.png"
  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2778x1248.png"
  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1170x2532.png"
  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2532x1170.png"
  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1125x2436.png"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2436x1125.png"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1242x2688.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2688x1242.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-828x1792.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-1792x828.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-1242x2208.png"
  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-2208x1242.png"
  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-750x1334.png"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-1334x750.png"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >
<link rel="apple-touch-startup-image" href="./img/splash-640x1136.png"
  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
<link rel="apple-touch-startup-image" href="./img/splash-1136x640.png"
  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" >

有关于 Safari 上 Apple 特定的 meta 标签定义

由此产生一个问题：我该如何设置webApp独立运行时，手机的状态栏背景色呢？查阅相关文档，多次折腾终于搞清楚了。只需在上述head部分，新增一条：

1
<meta name="theme-color" id='status-bar-meta' content="rgb(195,193,180)">

修改 webApp 的状态栏颜色

可以直接指定颜色，也可以为其添加一个 id，以便通过 js 动态的修改状态栏颜色，以便适配网页此刻的背景色。

可以这样动态修改背景色：

1
2
3
var color = ***；
let statusBarMeta = document.querySelector('#status-bar-meta');
    statusBarMeta.setAttribute('content', color);

这样，强迫症的问题就解决了~~ 😋😋