在Android Chrome以app形式打开网站

前面一篇文章我讲到了在UC网站可以以app形式打开,其实在Android Chrome浏览器上也支持此功能。

添加配置文件

在网站根目录添加manifest.json,并进行相应配置

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
{
"name": "iblogc",
"icons": [
{
"src": "launcher-icon-0-75x.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "launcher-icon-1-5x.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait"
}

在网站公用头部引入配置文件

1
<link rel="manifest" href="manifest.json">

查看效果

在Android使用Chrome打开网站,点击memu,选择“添加到主屏幕”选项,点击就可以添加到主屏幕了,步骤及显示效果截图如下:
chrome-add-to-homescreen-01
chrome-add-to-homescreen-02
PS:地址栏是不是不见了,看着像app而不是网页
chrome-add-to-homescreen-03
chrome-add-to-homescreen-04

扩展

ios的safari也有此功能,因手头无ios设备测试不了,所以内容不写了,大家可以参考此文章http://www.prower.cn/technic/2314

参考资料

https://developer.chrome.com/multidevice/android/installtohomescreen

0%