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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
---
title: 让 PWA 易于安装
slug: Web/Progressive_web_apps/Installable_PWAs
tags:
- PWAs
- a2hs
- js13kGames
- 可安装
- 添加至主屏幕
- 渐进式应用
translation_of: Web/Progressive_web_apps/Installable_PWAs
---
<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
<p class="summary">在上一篇文章，我们了解了如何通过 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> 让 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 离线工作。我们还可以更进一步，让用户如同本地应用一样在支持的移动浏览器上安装 web 应用。这篇文章讲述如何通过网页清单和添加到主屏特性来做到这一点。</p>
<p>这些技术允许应用从设备主屏直接启动，而不需启动浏览器键入 URL。你的 Web 应用可以作为一等公民和原生应用肩并肩。这样可以使应用更易于访问，你还可以指定应用全屏运行，没有浏览器界面，这样看起来更像一个原生应用。</p>
<h2 id="要求">要求</h2>
<p>可安装网站需要满足以下条件：</p>
<ul>
<li>一份网页清单，填好<a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">正确的字段</a></li>
<li>网站的协议必须是安全的（即使用 HTTPS 协议）</li>
<li>一个在设备上代表应用的图标</li>
<li>一个注册好的 Service Worker，可以让应用离线工作（这仅对于安卓设备上的 Chrome 浏览器是必需的）</li>
</ul>
<h3 id="清单文件_(Manifest)">清单文件 (Manifest)</h3>
<p>离线访问的关键在于一份网页清单，它通过 JSON 形式列举了网站的所有信息。</p>
<p>它通常位于网页应用的根目录，包含一些有用的信息，比如应用的标题、在移动设备操作系统上显示的代表该应用的不同大小的图标（例如主屏图标）的路径，和用于加载页或启动画面的背景颜色。浏览器需要这些信息来安装 web 应用并使其在主屏上显示。</p>
<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 的 <code>js13kpwa.webmanifest</code> 文件包含在 <code>index.html</code> 文件的 {{htmlelement("head")}} 段，如下行所示：</p>
<pre class="brush: html notranslate"><link rel="manifest" href="js13kpwa.webmanifest"></pre>
<div class="note">
<p><strong>注意：这类清单文件有一些曾经常被使用的扩展名：</strong><code>manifest.webapp</code> 在 Firefox OS 应用清单中很流行，而许多人使用 <code>manifest.json</code> 作为网页清单（因为内容是 JSON 格式的）。但是，<code>.webmanifest</code> 扩展名是在<a href="https://w3c.github.io/manifest/">W3C 清单规范</a>中显式指定的，所以这里我们使用这个扩展名。</p>
</div>
<p>文件的内容是这个样子的：</p>
<pre class="brush: json notranslate">{
"name": "js13kGames Progressive Web App",
"short_name": "js13kPWA",
"description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
"icons": [
{
"src": "icons/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
// ...
{
"src": "icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/pwa-examples/js13kpwa/index.html",
"display": "fullscreen",
"theme_color": "#B12A34",
"background_color": "#B12A34"
}</pre>
<p>大部分字段无需解释，但是我们还是详细解释一下为妙：</p>
<ul>
<li><code>name</code>: 网站应用的全名。</li>
<li><code>short_name</code>: 显示在主屏上的短名字。</li>
<li><code>description</code>: 一两句话解释你的应用的用途。</li>
<li><code>icons</code>: 一串图标信息：源 URL，大小和类型。多包含几个图标，这样就能选中一个最适合用户设备的。</li>
<li><code>start_url</code>: 启动应用时打开的主页。</li>
<li><code>display</code>: 应用的显示方式；可以是 <code>fullscreen</code>、<code>standalone</code>、<code>minimal-ui</code> 或者 <code>browser</code>。</li>
<li><code>theme_color</code>: UI 主颜色，由操作系统使用。</li>
<li><code>background_color</code>: 背景色，用于安装和显示启动画面时。</li>
</ul>
<p>一份网页清单最少需要 <code>name</code> 和一个图标 (带有 <code>src</code>, <code>size</code> 和 <code>type</code>)。最好也要提供 <code>description</code>、<code>short_name</code>、和 <code>start_url</code>。除了上述字段，还有一些其它的字段供您使用，请查看<a href="/en-US/docs/Web/Manifest">网页应用清单参考</a>获取详细信息。</p>
<h2 id="添加到主屏">添加到主屏</h2>
<p>"添加到主屏" (或者英语短语 A2HS (Add to Home Screen)) 是移动浏览器实现的一个特性，它利用网页清单中的信息来在设备主屏上显示应用图标和文字。只有应用满足上述必备条件，这个功能才可以正常运作。</p>
<p>当用户使用支持的移动浏览器访问 PWA 时，浏览器会显示一条横幅信息表示可以安装这个应用。</p>
<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
<p>在用户单击这个横幅后，安装横幅信息会显示出来。它是浏览器基于网页清单信息创建的，名字和图标可以在提示中看到。</p>
<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
<p>如果用户单击安装到主屏按钮，会显示应用图标的样子，让用户确认是否安装这个应用。</p>
<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
<p>确认之后，应用就安装到主屏上了。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
<p>之后，用户可以立刻启动并使用应用。注意，在某些浏览器/移动操作系统中，PWA 会在图标右下角显示浏览器图标，告诉用户这是一个网页应用。</p>
<h3 id="启动画面">启动画面</h3>
<p>在一些浏览器中，可以通过清单信息产生一个启动画面，当 PWA 启动时显示。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
<p>这个启动画面由给定的图标、主题和背景色生成。</p>
<h2 id="总结">总结</h2>
<p>在本文中，我们学习了如何使用网页清单和安装到主屏特性让 PWA 可安装。</p>
<p>为了获得添加到主屏的更多信息，请阅读<a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">添加到主屏指南</a>。 浏览器支持当前限于 Android 平台上的 Firefox 58+、Mobile Chrome、 Android Webview 31+ 以及 Android Opera 32+, 但是将来这些限制的影响会逐渐减小。</p>
<p>现在让我们将目光转移到 PWA 的最后一个难点：通过推送通知再次启动（re-engagement）。</p>
<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>
|
