7. Progressive Web Apps を実現する機能
これまでの Web になかった機能
オフラインサポート プッシュ通知 バックグラウンド処理 アイコンの追加
Cache API Push API Background Sync Web App Manifest
Service Worker
Web App Manifest
24. Step 1 : Service Worker の登録
if ( navigator.serviceWorker ) {
} Service Worker がサポートされているか検証
Web コンテンツ側の JS
25. Step 1 : Service Worker の登録
if ( navigator.serviceWorker.controller ) {
console.log('There’s an active service worker');
}
すでに動作している Service Worker があるか検証することも可能
Web コンテンツ側の JS
26. Step 1 : Service Worker の登録
else {
navigator.serviceWorker.register('/sw.js')
.then(function(reg) {
}
Service Worker を登録
Web コンテンツ側の JS
27. Step 1 : Service Worker の登録
.then(function(reg) {
console.log('SW registered for scope',
reg.scope);
});
Promise で結果が返される
Web コンテンツ側の JS
28. Step 1 : Service Worker の登録
if ( navigator.serviceWorker ) {
navigator.serviceWorker.register('/sw.js');
}
Web コンテンツ側の JS
Service Worker 登録するだけならシンプルに書ける
58. Windows Store App の価値
• デベロッパーセンターの分析
• アプリ内課金
• プロモーションの機会
• データストレージの上限がない
• Service Workers
• WinRT API へのアクセス
Progressive Web Apps をさらに Progressive
65. 参考
• Progressive Web Apps on Windows
• Sonarwhal
• PWA BUILDER
• Building Progressive Web Apps
for Windows devices : Build 2018
• Cboard: A Progressive Web App for Everyone
66. Ask the Speaker のご案内
ブレイクアウトセッション終了後の休憩時間に、
登壇したスピーカーに直接ご質問いただける
コーナーを 「Ask The Speakers」 Room に
用意しております。セッション内容のより深い
理解のため、ぜひお役立てください。
「Ask The Speakers」