Skip to content

Commit 716eb79

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
pwa
1 parent 5e62f88 commit 716eb79

File tree

24 files changed

+382
-76
lines changed

24 files changed

+382
-76
lines changed

‎09-PWA/01-start/PWA.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
# pwa
2-
32
progressive web apps
43

54
## 1. 特点
6-
75
快速：缓存
8-
96
可靠：断网访问
10-
117
粘性：图标
128

139
## 2. 技术
14-
1510
web app manifest
16-
1711
service worker
18-
1912
push api & notification api
20-
2113
app shell & app skeleton
2214

2315
## 3. 基础
24-
2516
https
2617

18+
## 4. 改造过程
19+
step1: 全站 HTTPS 化，HTTPS 是 PWA 的基础，没有 HTTPS 就没有 Service Worker
20+
step2: Service Worker 提升基础性能，离线提供静态文件，提升用户首屏体验
21+
step3: App Manifest，可以和第二步同时进行
22+
step4: 离线消息推送等其他特性

‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
介绍 Web App Manifest 相关的基础知识，学习如何使网站可以添加至手机桌面。
2+
3+
## Usage
4+
5+
1. ` npm install `
6+
2. ` npm run start`
7+
3. 访问 http://localhost:8080
8+
4. 学习和修改 `manifest.json` 中的相关设置
9+
10+
关注 manifest.json 和 index.html
11+
12+
// manifest.json
13+
{
14+
"dir": "ltr",
15+
"lang": "en",
16+
"name": "xxx",
17+
"scope": "/",
18+
"display": "standalone",
19+
"start_url": "/",
20+
"short_name": "xxx",
21+
"theme_color": "transparent",
22+
"description": "xxxxxx",
23+
"orientation": "any",
24+
"background_color": "transparent",
25+
"related_applications": [],
26+
"prefer_related_applications": false,
27+
"icons": [{
28+
"src": "assets/img/logo/size-32.png",
29+
"sizes": "32x32",
30+
"type": "image/png"
31+
}, {
32+
"src": "assets/img/logo/size-48.png",
33+
"sizes": "48x48",
34+
"type": "image/png"
35+
}],
36+
"gcm_sender_id": "...",
37+
"applicationServerKey": "..."
38+
}

‎09-PWA/02-manifest/index.html renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/index.html

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
88
<link rel="stylesheet" href="/static/styles/main.css">
99

10+
<!-- 引入manifest.json -->
1011
<link rel="manifest" href="manifest.json">
1112

1213
<!-- 指定桌面icon -->
@@ -17,6 +18,8 @@
1718
<meta name="apple-mobile-web-app-capable" content="yes">
1819
<!-- 修改ios状态栏颜色 -->
1920
<meta name="apple-mobile-web-app-status-bar-style" content="black">
21+
<!-- 修改chrome地址栏主题色，覆盖manifest.json中的theme_color -->
22+
<meta name="theme-color" content="green">
2023
</head>
2124
<body>
2225
<div id="app">
@@ -32,21 +35,25 @@ <h2> PWA Lesson Demo </h2>
3235
</div> -->
3336
<h1>manifest</h1>
3437
<pre>
35-
【 name 】
36-
【 short_name 】
38+
【 name 】 应用名称，用于安装横幅、启动画面显示
39+
【 short_name 】 应用短名称，用于主屏幕显示
3740
【 display 】
38-
fullscreen | standalone | minimal-ui | browser
41+
fullscreen 应用的显示界面将占满整个屏幕
42+
standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏
43+
minimal-ui 显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同
44+
browser 浏览器模式，与普通网页在浏览器中打开的显示一致
3945
【 start_url 】 启动页
4046
"/"
47+
【 scope 】 作用域
4148
</pre>
4249
<h1>添加图标</h1>
4350
<pre>
4451
1. 主动添加
45-
2. 横幅提示添加（safari不支持）
46-
部署manifest.json
52+
2. 横幅提示添加（safari不支持）PWA站点满足下列条件时自动添加
53+
部署manifest.json (配置了short_name、name、icons[image/png]、start_url、display[standalone/fullscreen]属性)
4754
注册service worker
4855
支持https访问
49-
用户在统一浏览器中至少访问两次，两次至少间隔5分钟
56+
用户在同一浏览器中至少访问两次，两次至少间隔5分钟
5057
</pre>
5158
</div>
5259
<script>
@@ -62,6 +69,18 @@ <h1>添加图标</h1>
6269
console.log('ServiceWorker registration failed: ', err);
6370
});
6471
});
72+
// 横幅触发事件，目前支持度不高
73+
window.addEventListener('beforeinstallprompt', function (e) {
74+
// beforeinstallprompt event fired
75+
e.userChoice.then(function (choiceResult) {
76+
if (choiceResult.outcome === 'dismissed') {
77+
alert('用户取消安装应用');
78+
}
79+
else {
80+
alert('用户安装了应用');
81+
}
82+
});
83+
});
6584
}
6685
</script>
6786
</body>

‎09-PWA/02-manifest/manifest.json renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/manifest.json

File renamed without changes.

‎09-PWA/02-manifest/package.json renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/package.json

File renamed without changes.

‎09-PWA/02-manifest/src/index.js renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/src/index.js

File renamed without changes.

‎09-PWA/02-manifest/static/img/android-chrome-144x144.png renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/static/img/android-chrome-144x144.png

File renamed without changes.

‎09-PWA/02-manifest/static/img/android-chrome-192x192.png renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/static/img/android-chrome-192x192.png

File renamed without changes.

‎09-PWA/02-manifest/static/img/android-chrome-512x512.png renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/static/img/android-chrome-512x512.png

File renamed without changes.

‎09-PWA/02-manifest/static/img/apple-touch-icon-152x152.png renamed to ‎09-PWA/02-app-manifest/01-manifest属性&添加图标&启动页/static/img/apple-touch-icon-152x152.png

File renamed without changes.

0 commit comments

Comments
 (0)