-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
362 lines (208 loc) · 8.47 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html>
<head>
<title>Push APIを使ってみた</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
.big {
font-size: 150px;
}
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Push APIを使ってみた
---
class: center, middle
# Push API
---
Push API は、Web アプリケーションがサーバからメッセージ (プッシュ通知) を受信できるようにします。
Web アプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。
開発者は、オプトインしたユーザへ非同期の通知と更新を届けることができ、**タイムリーな新着コンテンツによってユーザの関心を得られるでしょう**。
[Push API - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Push_API)
---
アプリがプッシュメッセージを受信するために、アプリで **Service Worker** が動作している必要があります。
Serivce Worker が動作している時に、PushManager.subscribe() を利用してプッシュ通知の購読ができます。
戻り値の PushSubscription には、プッシュメッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。
プッシュメッセージを受信すると、そのメッセージを扱うために Service Worker が起動します。
これは、ServiceWorkerGlobalScope.onpush イベントハンドラへ配信されます。
これにより、例えば (ServiceWorkerRegistration.showNotification() を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。
[Push API - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Push_API)
---
## Push API サポートブラウザ
- Firefox 45~
- Chrome 50~
- Chrome for Android 50~
[Can I use...](http://caniuse.com/#feat=push-api)
---
class: center, middle
# Service Worker
---
Service Workerは基本的にWebアプリケーションやブラウザとネットワークの間のプロキシサーバーとして機能します。
それらは、ネットワークリクエストを受信し、ネットワークの使用可否やサーバー上にあるassetの更新有無に基づく適切なアクションを取得する効果的なオフライン体験（Push API、Cache API）を作成することができます。
[ServiceWorker API - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API)
---
background-image: url(img/lifecycle.png)
---
## サポートブラウザ
[Can I use...](http://caniuse.com/#search=serviceworker)
---
class: center, middle
# Let's encrypt
---
Let's Encrypt は、認証局（CA）として「SSL/TLSサーバ証明書」を無料で発行するとともに、証明書の発行・インストール・更新のプロセスを自動化することにより、TLS や HTTPS（TLSプロトコルによって提供されるセキュアな接続の上でのHTTP通信）を普及させることを目的としているプロジェクトです。
[Let's Encrypt 総合ポータル](https://letsencrypt.jp/)
---
## インストール
```:
$ cd /usr/local/
$ git clone https://github.com/letsencrypt/letsencrypt
$ cd letsencrypt
$ ./letsencrypt-auto --help
```
---
## 証明書と秘密鍵の作成
### webrootオプション
指定したDocumentRootに.well-knowディレクトリが作成され、既存のWeb Serverを経由してドメインの認証が行われる。
```:
$ ./letsencrypt-auto certonly --webroot -w /var/www/dev.kzhrk.com -d dev.kzhrk.com
```
### standaloneオプション
TCP Port 80を使ってドメインの認証が行われるため、Apacheやnginxの停止が必要。
```:
$ ./letsencrypt-auto certonly --standalone -d dev.kzhrk.com
```
---
## 証明書と秘密鍵の実体
|name|path|
|:---|:---|
|サーバ証明書（公開鍵）|/etc/letsencrypt/archive/**ドメイン名**/cert**N**.pem|
|中間証明書|/etc/letsencrypt/archive/**ドメイン名**/chain**N**.pem|
|サーバ証明書と中間証明書が結合されたファイル|/etc/letsencrypt/archive/**ドメイン名**/fullchain**N**.pem|
|秘密鍵|/etc/letsencrypt/archive/**ドメイン名**/privkey**N**.pem|
N：証明書や鍵の発行順の連番
---
## 証明書のシンボリックリンク
|name|path|
|:---|:---|
|サーバ証明書（公開鍵）|/etc/letsencrypt/live/**ドメイン名**/cert.pem|
|中間証明書|/etc/letsencrypt/live/**ドメイン名**/chain.pem|
|サーバ証明書と中間証明書が結合されたファイル|/etc/letsencrypt/live/**ドメイン名**/fullchain.pem|
|秘密鍵|/etc/letsencrypt/live/**ドメイン名**/privkey.pem|
証明書の期限は3ヶ月。<br>更新で実体のN（発行順の連番）が変更されるため、サーバ設定時にはシンボリックリンクを参照します。
---
## 証明書の更新
```:
$ su root
$ crontab -e
$ 00 05 01 * * /usr/local/letsencrypt/letsencrypt-auto renew
```
renewオプションは過去に取得した証明書のうち、有効期間の残りが30日未満の証明書が更新します。
---
## nginx
```
server {
listen 443 ssl;
server_name dev.kzhrk.com;
ssl_certificate /etc/letsencrypt/live/dev.kzhrk.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/dev.kzhrk.com/privkey.pem;
ssl_session_cache shared:SSL:3m;
ssl_buffer_size 8k;
ssl_session_timeout 10m;
...
}
```
---
class: center, middle
# Google Cloud Messaging
---
複数種類のデバイスが混在する環境でのメッセージの送受信を実現するクラウドサービスです。
---
## GCM API Keyを作成
[Google Developers Console](https://console.developers.google.com/)
---
## サンプルサイト
https://kzhrk-sandbox.github.io/sample-push-api/
---
## Push通知
```:
curl --header "Authorization: key=(GCM Server API Key)" \
--header Content-Type:"application/json" https://android.googleapis.com/gcm/send \
-d "{\"registration_ids\":[\"(RegistrationID)\"]}"
```
---
## Service Workerの登録
```:js
if ('serviceWorker' in window.navigator) {
navigator.serviceWorker.register('sw.js').then(function (reg) {
console.log('service worker registration:' + reg);
}).catch(function (err) {
console.log('error: ' + err);
});
navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe().then(function (pushSubscription) {
console.log('gcmToken: ' + pushSubscription.endpoint);
}, function (err) {
console.log('error: ' + err);
});
});
}
```
---
## manifest file
```:jade
link(rel="manifest", href="manifest.json")
```
```:
{
"name": "sample-push-api",
"gcm_sender_id": "(GCM Project ID)"
}
```
---
## Service Worker
```:js
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = 'http://dummyimage.com/192x192/666/fff';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
self.addEventListener("notificationclick", function(event) {
event.notification.close();
clients.openWindow("/");
}, false);
```
---
## まとめ
- 必要なのはhttpsの設定とGCM設定
- 本格的に使うのであればサーバ構築は必須
- https設定はLet's encryptを使えば簡略化できる
---
background-image: url(img/fin.png)
</textarea>
<script src="js/remark.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var slideshow = remark.create();
</script>
</body>
</html>