初めての あなたのWebサイトがPWAになるまで 小椋 陽太 アシアル株式会社 開発 1 Youta OGURA

PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 2

PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 PWAとは PWAが実現すること 3

PWAの基礎知識を知る ＞ PWAとは ● Reliable ● Fast ● Engaging 低速なネットワークや無線状態でも利用できる コンテンツやアニメーションを高速で描画できる ネイティブアプリのように直感的に操作ができる = 4 Googleが推進する先進的な モバイルウェブのユーザー体験の指針

段階的 レスポンシブ ネットワーク 接続に 依存しない アプリ 感覚 常に 最新 安全 再エンゲージ メント可能 リンク 可能 PWAの基礎知識を知る ＞ PWAが実現すること インストール 可能 発見 しやすい 5

段階的 レスポンシブ ネットワーク 接続に 依存しない アプリ 感覚 常に 最新 安全 再エンゲージ メント可能 リンク 可能 PWAの基礎知識を知る ＞ PWAが実現すること インストール 可能 発見 しやすい 6

オフラインでも、遅いネットワーク環境でも 高速で動作 面倒な再インストールなしで 自動アップデート ネイティブアプリのように端末に インストール 常に 最新 PWAの基礎知識を知る ＞ PWAが実現すること 7 ネットワーク 接続に 依存しない インストール 可能

そこで重要なのが Service Worker 8

PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 Service Workerとは Service Workerを利用した PWAの基本構造 Service Workerの ライフサイクル 9

● アプリとサーバとの間でネットワークリクエストを監視 ● アプリに必要なリソースをキャッシュストレージから提供 ● キャッシュストレージを最新に維持 Service Worker = Service Workerを知る ＞ Service Workerとは 10 アプリごとにブラウザに登録され、 バックグラウンドで動くスクリプト

Service Worker のイベント 11 Service Workerを知る ＞ Service Workerを利用したPWAの基本構造 Uninstall Activate Install Wait ブラウザへ登録される 更新の登録待ちをする ブラウザへの登録を解除される アプリを制御できる状態になる

Server Client Application Service Worker & Cache Storage 12 Activate Service Workerを利用したPWAの基本構造 － アクティベートされている場合

Server Client Application Service Worker & Cache Storage 13 Install Service Workerを利用したPWAの基本構造 － 初めて登録される場合

Client Application Service Worker & Cache Storage 14 Server Uninstall Wait Service Workerを利用したPWAの基本構造 － 更新された場合

wait 初回 2回目以降 更新あり uninstall 起動 状態遷移 install activate activate install ・アセットをキャッシュ ・リクエストを監視 ・データをキャッシュ ・アセットを再キャッシュ ・リクエストを監視 ・データをキャッシュ 15 処理内容 Service Workerを知る ＞ Service Workerのライフサイクル OLD NEW

PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 PWA化の必要要件 Service Worker を作成する ウェブアプリマニフェストを作成する 16

ネットワーク 接続に 依存しない 常に最新 インストール 可能 17 PWAを実装する ＞ PWAの必要要件 の必要要件

ネットワーク 接続に 依存しない 常に最新 インストール 可能 18 の必要要件 PWAを実装する ＞ Service Workerを作成する

インストール時にアセットをキャッシュする アセットのリクエストを検知する データのリクエストを検知する アセットの更新時に古いキャッシュを削除する STEP 1 STEP 2 STEP 3 STEP 4 Service Worker を作成する 19 PWAを実装する ＞ Service Workerを作成する

if ('serviceWorker' in navigator) { // 対応しているブラウザでService Worker登録 navigator.serviceWorker .register('/service-worker.js') } 20 index.html PWAを実装する ＞ Service Workerを作成する service-worker.js を新規作成 STEP 0 HTMLに登録処理を実装 Service Worker 登録処理

var filesToCache = [ '/', // index.html '/app.js', '/manifest.json', '/style.css', '/jquery-3.3.1.min.js', ] self.addEventListener('install', function(e) { e.waitUntil( // cacheNameをキーにキャッシュ保存 caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); // or cache.add }) ) }) STEP 1 21 PWAを実装する ＞ Service Workerを作成する service-worker.js インストール時にアセットをキャッシュする インストールを検知 アセットをキャッシュ

STEP 2 self.addEventListener('fetch', function(e) { // 一致するものがあればキャッシュを返し // なければサーバーにリクエストする e.respondWith( caches.match(e.request) .then(function(response) { return response || fetch(e.request) }) ) }) 22 PWAを実装する ＞ Service Workerを作成する アセットのリクエストを検知する service-worker.js アセットのリクエスト検知 キャッシュからレスポンス返却

STEP 3-1 self.addEventListener('fetch', function(e) { var dataUrl = 'https://api...get.php' if (!e.request.url.indexOf(dataUrl)) { // データ取得URLの場合常にキャッシュを最新化 e.respondWith( fetch(e.request).then(function(response) { return caches.open(dataCacheName) .then(function(cache) { cache.put(e.request.url, response.clone()) return response }) }) ) // 以下省略 23 PWAを実装する ＞ Service Workerを作成する データのリクエストを検知する service-worker.js データのリクエスト検知 Service Workerの処理

STEP 3-2 const dataUrl = 'https://api.../get.php' let dataset = [] if ('caches' in window) { // まずキャッシュからデータを取得 caches.match(dataUrl).then(function (res) { dataset = res || [] }) } $.get(dataUrl, {fmt: 'json'}, function (res) { // 後からサーバーからデータを取得 dataset = res || [] }) 24 app.js PWAを実装する ＞ Service Workerを作成する データのリクエストを検知する キャッシュからデータを取得 サーバーからデータを取得

self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keys) { return Promise.all(keys.map(function(key) { if (key !== cacheName) { // キーが違う場合古いものを削除 return caches.delete(key) } })) }) ) }) 25 STEP 4 PWAを実装する ＞ Service Workerを作成する アセットの更新時に古いキャッシュを削除する service-worker.js Service Workerの差分を確認 キャッシュのキーが違う場合 古いキャッシュを削除

ネットワーク 接続に 依存しない 常に最新 インストール 可能 26 の必要要件 PWAを実装する ＞ ウェブアプリマニフェストを作成する

ウェブアプリマニフェストを作成する 27 マニフェストファイルを定義する HTMLから参照する STEP 1 STEP 2 PWAを実装する ＞ ウェブアプリマニフェストを作成する

28 ウェブアプリ マニフェスト = ● アイコン ● テーマカラー ● アプリ名 ・・・etc PWAを実装する ＞ ウェブアプリマニフェストを作成する アプリをインストールするための メタデータを定義するjsonファイル

29 { "icons": [{ "src": "/icon_512x512.png", "sizes": "512x512", "type": "image/png" }], "name": "My Progressive Web App", "short_name": "MyPWA", "display": "standalone", "start_url": ".", "description": "My awesome Progressive Web App!", "background_color": "#ffffff" } manifest.json STEP 1 マニフェストファイルを定義する PWAを実装する ＞ ウェブアプリマニフェストを作成する manifest.json を新規作成 JSON形式でメタデータを定義

30 index.html STEP 2 タグを設定する HTMLから参照する PWAを実装する ＞ ウェブアプリマニフェストを作成する

ネットワーク 接続に 依存しない 常に最新 インストール 可能 31 PWAを実装する の必要要件

PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 32 さらにProgressiveに 参考サイト

33 UI/UX さらにProgressiveに レスポンシブデザイン クロスブラウザ対応 アニメーション SNSシェア対応 Performance 初回ロードの高速化 キャッシュ戦略の最適化 アップデートの効率化 Others SEO対策 PUSH通知 オフライン状態通知

34 参考サイト ● はじめてのプログレッシブ ウェブアプリ - Google Developers ○ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja ● Service Worker の紹介 - Google Developers ○ https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja ● Progressive Web App Checklist - Google Developers ○ https://developers.google.com/web/progressive-web-apps/checklist ● PRPLパターン - Google Developers ○ https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ● Caching best practices & max-age gotchas - Jake Archibald ○ https://jakearchibald.com/2016/caching-best-practices/ ● What, Exactly, Makes Something A Progressive Web App? - Infrequently ○ https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/ ● ウェブアプリマニフェスト - MDN web docs ○ https://developer.mozilla.org/ja/docs/Web/Manifest

35