進化する Web ～ Progressive Web Apps の実装と応用～

進化する Web
～ Progressive Web Apps の実装と応用～
AD09

• Progressive Web Apps について
• Progressive Web Apps を実現する API
• Progressive Web Apps on Windows
アジェンダ

Progressive Web Apps とは?
ネイティブアプリのような UX を提供する Web アプリの概念
• Chrome Dev Summit 2015
• もともとは Alex Russell 氏(Google) のブログ記事
• Web によるネイティブアプリのような UX
• クライアントの性能に合わせた機能提供
• アプリにおける Progressive Enhancement

アプリにおける Progressive Enhancement
同じコンテンツ
Web ページ
アプリケーション
Web サーバー

Progressive Web Apps を実現する機能
これまでの Web になかった機能
オフラインサポートプッシュ通知バックグラウンド処理アイコンの追加
Cache API Push API Background Sync Web App Manifest
Service Worker
Web App Manifest

Web のメリット
•Secure (安全)
•Linkable (リンク可能)
•Indexable (インデックス可能)
•Composable (再構成可能)
•Ephemeral (一時的な利用)
SLICE

Progressive Web Apps が提供する価値
• FIRE = Fast Integrated Reliable Engage
• Fast: パフォーマンスの良い、軽快な動作
• Integrated: OS と統合されたユーザー体験
• Reliable: オフラインでも動作する利便性と信頼性
• Engaging: Web サイトの価値向上
高速で信頼性の高いエンゲージメント

Progressive Web Apps のメリット
PWA = Web + アプリのメリット

Progressive Web Apps を実現する API

Service Worker
• Web Worker のひとつ
• DOM に直接アクセスできない
• Web ページと異なるライフサイクル
• ページのスクリプトから “登録” (インストール)
• 再インストール : Service Worker の JS ファイルの更新
• HTTPS 必須
バックグラウンドで動作するネットワークプロキシ
プログラミング可能な

Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能

Service Worker の各 API 実装状況
Service Worker 〇〇〇〇
Cache API 〇〇〇〇
Push API 〇〇〇 ×
Background Sync API △ 〇 × ×
17 5966 11.1
開発中

Service Worker を使う準備
Service Worker 用の JS ファイルが必要
+
sw.js
JavaScript JavaScript
配下のアセットを制御

Service Worker のライフサイクル
Install
Activate
Idle
Error
Fetch /
Message
• ServiceWoker の登録
(Register メソッド)
• 静的なアセットのキャッシュ

Install
Activate
Idle
Error
Fetch /
Message
• ダウンロードの失敗
• キャッシュの失敗
• Activate されない

Install
Activate
Idle
Error
Fetch /
Message
• 有効化された際に発生
• インストール直後
• 復帰時

Install
Activate
Idle
Error
Fetch /
Message
• 待機状態

Install
Activate
Idle
Error
Fetch /
Message
• ネットワークリクエスト
またはメッセージに対する処理

Install
Activate
Idle
Error
Fetch /
Message
• 終了(メモリ節約のため)

Step 1 : Service Worker の登録 Web コンテンツ側の JS

Step 1 : Service Worker の登録
if ( navigator.serviceWorker ) {
} Service Worker がサポートされているか検証
Web コンテンツ側の JS

if ( navigator.serviceWorker.controller ) {
console.log('There’s an active service worker');
}
すでに動作している Service Worker があるか検証することも可能

else {
navigator.serviceWorker.register('/sw.js')
.then(function(reg) {
}
Service Worker を登録

.then(function(reg) {
console.log('SW registered for scope',
reg.scope);
});
Promise で結果が返される

if ( navigator.serviceWorker ) {
navigator.serviceWorker.register('/sw.js');
}
Service Worker 登録するだけならシンプルに書ける

Step 2 : アセットのキャッシュ Service Worker 側の JS

Step 2 : アセットのキャッシュ
Self.addEventListener('install', function(event)
Service Worker 側の JS
Service Worker 登録時に install イベントが発生

event.waitUntil(
caches.open('キャッシュの名前')
)
キャッシュを開く

urlsToCache
'/',
'/index.html',
'/css/index.css',
'/script/index.js'
caches.open('キャッシュの名前')
.then(function(cache) {
return cache.addAll(urlsToCache);
キャッシュするアセットを登録する

Step 3 : 有効化イベント
'キャッシュの名前'

self.addEventListener('activate', function(e) {
});
Service Worker のインストールが完了し有効化

e.waitUntil(
caches.keys().then(function(keyList) {
})
);
既存のキャッシュの一覧を取り出す

return Promise.all(keyList.map(function(key) {
console.log('ServiceWorker の古いキーを削除しました。', key);
if (key !== 'キャッシュの名前') {
return caches.delete(key);
}
今回開いたキャッシュと異なる名前のキャッシュを削除

キャッシュについて
コンテンツのキャッシュをオフラインで使用できるように管理
• App Shell
• UI が機能するために必要な最小限のリソース
• 要件にあったアセット
なにをキャッシュするか?
Service Worker の更新
• js ファイルを更新
• キャッシュがクリアされるわけではない
• 有効になるのは一度ページを閉じた後

Step 4 : リクエストのハンドリング Service Worker 側の JS

Step 4 : リクエストのハンドリング
self.addEventListener('fetch', function(e) {
})
ネットワークリクエストがされると fetch イベントが発生

caches.match(e.request)
キャッシュからのデータが利用可能かどうかを確認

e.request
.then(function(response) {
return response || fetch(e.request);
}
キャッシュか fetch でネットワークから取得した内容を返す

e.respondWith(
)
ページにレスポンスを返す

デモ : Service Worker の実装

Web App Manifest
サイトのブックマークを端末のホーム画面に保存
<link rel="manifest" href="/manifest.manifest">
(※)Windows では現状 .appxmanifest（XML）形式に変換して使用

{
"lang": "ja",
"short_name": "Spece Enemy",
"name": "The Spece Enemy",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}
Web Application Manifest の記述

{
"lang": "ja",
"icons": [
{
"sizes": "96x96",
"type": "image/png"
},
{
"sizes": "512x512",
"type": "image/png"
}
],
}
• name：アプリのフルネーム
• short_name：ショートネーム

{
"lang": "ja",
"icons": [
{
"sizes": "96x96",
"type": "image/png"
},
{
"sizes": "512x512",
"type": "image/png"
}
],
}
• icons : ホーム画面の
アイコンや起動画面に使用
されるアイコン

{
"lang": "ja",
"icons": [
{
"sizes": "96x96",
"type": "image/png"
},
{
"sizes": "512x512",
"type": "image/png"
}
],
}
• display : 優先されるビュー
• orientation : 画面の向き
• Background_color : 背景色

display : 優先されるビューの設定
fullscreen standalone minimal-ui browser
戻るボタンのみ
4 種類の指定が可能
限定された UI
(読み取り専用のナビ
ゲーションバー)
ブラウザーのまま

デモ : Web Application Manifest

Progressive Web Apps on
Windows

Microsoft Store からの配布
• 自動インデックス • セルフパブリッシング
PWA を Microsoft Store で公開する 2 の方法

Bing に自動インデックスされる条件
• HTTPS, セキュアなエンドポイント
• 高品質の manifest
(names, screen shots, descriptions)
• オフラインサポート
• ストアの審査をパス
• デジタルグッズを販売しないこと
• アダルトコンテンツを含まないこと
• 不快なコンテンツは不可
• Windows ならではの差別化がされている
Microsoft Store で公開するための条件

Windows Store むけ PWA の検証
• PWA が Microsoft Store の準備ができていることを
検証
• パフォーマンスとユーザーエクスペリエンスの向上https://sonarwhal.com/

Bing に検出されないようにするには
• manifest なし、https なし、もしくは
オフラインで動作しない
• Robot.txt ファイルを設定
• display: browser
• アプリを削除するようサービスリクエストを
出す
(reportapp@microsoft.com)

Microsoft ストアでの公開
• dev.microsoft.com で開発者アカウントを
開設
PWABuilder.com で Appx を生成する
reportapp@microsoft.com
UWP アプリの提出とおなじ

PWA Builder での PWA の開始
https://www.pwabuilder.com/
ホストされている PWA をパッケージング

Windows Store App の価値
• デベロッパーセンターの分析
• アプリ内課金
• プロモーションの機会
• データストレージの上限がない
• Service Workers
• WinRT API へのアクセス
Progressive Web Apps をさらに Progressive

WinRT API にアクセス可能
//Windows にインストールされているかどうか
//セカンダリータイルをピン留めする
//有効化される場所

Progressive Web Apps の価値を高める API
• CSS3
• WebAssembly
• WebVR
• Web Payments

Progressive Web Apps の位置づけ
Web と Native の間を埋める

Progressive Web Apps の位置づけ
Web と Native の間を埋める
PWA

まとめ
=
• Service Worker
• Web Application Manifest
• Other..
Web
+
Native
Apps
This is
good one!

参考
• Progressive Web Apps on Windows
• Sonarwhal
• PWA BUILDER
• Building Progressive Web Apps
for Windows devices : Build 2018
• Cboard: A Progressive Web App for Everyone

進化する Web ～ Progressive Web Apps の実装と応用～

Recommended

Recommended

More Related Content

More from Osamu Monoe

More from Osamu Monoe (20)