初めてのPWA開発.pdf

4月8日開催のアシアル技術セミナー Vo.2
Webフロントエンド開発最前線　～SPAおよびPWA開発プロジェクトの現場から～
「はじめてのPWA開発」

Transcript

1. 初めての あなたのWebサイトがPWAになるまで 小椋 陽太 <youta@asial.co.jp> アシアル株式会社 開発 1 Youta OGURA
2. PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 2
3. PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 PWAとは PWAが実現すること 3
4. PWAの基礎知識を知る ＞ PWAとは • Reliable • Fast • Engaging 低速なネットワークや無線状態でも利用できる コンテンツやアニメーションを高速で描画できる ネイティブアプリのように直感的に操作ができる = 4 Googleが推進する先進的な モバイルウェブのユーザー体験の指針
5. 段階的 レスポンシブ ネットワーク 接続に 依存しない アプリ 感覚 常に 最新 安全 再エンゲージ メント可能 リンク 可能 PWAの基礎知識を知る ＞ PWAが実現すること インストール 可能 発見 しやすい 5
6. 段階的 レスポンシブ ネットワーク 接続に 依存しない アプリ 感覚 常に 最新 安全 再エンゲージ メント可能 リンク 可能 PWAの基礎知識を知る ＞ PWAが実現すること インストール 可能 発見 しやすい 6
7. オフラインでも、遅いネットワーク環境でも 高速で動作 面倒な再インストールなしで 自動アップデート ネイティブアプリのように端末に インストール 常に 最新 PWAの基礎知識を知る ＞ PWAが実現すること 7 ネットワーク 接続に 依存しない インストール 可能
8. そこで重要なのが Service Worker 8
9. PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 Service Workerとは Service Workerを利用した PWAの基本構造 Service Workerの ライフサイクル 9
10. • アプリとサーバとの間でネットワークリクエストを監視 • アプリに必要なリソースをキャッシュストレージから提供 • キャッシュストレージを最新に維持 Service Worker = Service Workerを知る ＞ Service Workerとは 10 アプリごとにブラウザに登録され、 バックグラウンドで動くスクリプト
11. Service Worker のイベント 11 Service Workerを知る ＞ Service Workerを利用したPWAの基本構造 Uninstall Activate Install Wait ブラウザへ登録される 更新の登録待ちをする ブラウザへの登録を解除される アプリを制御できる状態になる
12. Server Client Application Service Worker & Cache Storage 12 Activate Service Workerを利用したPWAの基本構造 － アクティベートされている場合
13. Server Client Application Service Worker & Cache Storage 13 Install Service Workerを利用したPWAの基本構造 － 初めて登録される場合
14. Client Application Service Worker & Cache Storage 14 Server Uninstall Wait Service Workerを利用したPWAの基本構造 － 更新された場合
15. wait 初回 2回目以降 更新あり uninstall 起動 状態遷移 install activate activate install ・アセットをキャッシュ ・リクエストを監視 ・データをキャッシュ ・アセットを再キャッシュ ・リクエストを監視 ・データをキャッシュ 15 処理内容 Service Workerを知る ＞ Service Workerのライフサイクル OLD NEW
16. PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 PWA化の必要要件 Service Worker を作成する ウェブアプリマニフェストを作成する 16
17. ネットワーク 接続に 依存しない 常に最新 インストール 可能 17 PWAを実装する ＞ PWAの必要要件 の必要要件
18. ネットワーク 接続に 依存しない 常に最新 インストール 可能 18 の必要要件 PWAを実装する ＞ Service Workerを作成する
19. インストール時にアセットをキャッシュする アセットのリクエストを検知する データのリクエストを検知する アセットの更新時に古いキャッシュを削除する STEP 1 STEP 2 STEP 3 STEP 4 Service Worker を作成する 19 PWAを実装する ＞ Service Workerを作成する
20. <script> if ('serviceWorker' in navigator) { // 対応しているブラウザでService Worker登録 navigator.serviceWorker .register('/service-worker.js') } </script> 20 index.html PWAを実装する ＞ Service Workerを作成する service-worker.js を新規作成 STEP 0 HTMLに登録処理を実装 Service Worker 登録処理
21. 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 インストール時にアセットをキャッシュする インストールを検知 アセットをキャッシュ
22. 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 アセットのリクエスト検知 キャッシュからレスポンス返却
23. 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の処理
24. 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を作成する データのリクエストを検知する キャッシュからデータを取得 サーバーからデータを取得
25. 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. ネットワーク 接続に 依存しない 常に最新 インストール 可能 26 の必要要件 PWAを実装する ＞ ウェブアプリマニフェストを作成する
27. ウェブアプリマニフェストを作成する 27 マニフェストファイルを定義する HTMLから参照する STEP 1 STEP 2 PWAを実装する ＞ ウェブアプリマニフェストを作成する
28. 28 ウェブアプリ マニフェスト = • アイコン • テーマカラー • アプリ名 ・・・etc PWAを実装する ＞ ウェブアプリマニフェストを作成する アプリをインストールするための メタデータを定義するjsonファイル
29. 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. 30 <!DOCTYPE html> <html> <head> <!-- 省略 --> <link rel="manifest" href="/manifest.json"> <!-- 省略 --> </head> <!-- 省略 --> index.html STEP 2 <link> タグを設定する HTMLから参照する PWAを実装する ＞ ウェブアプリマニフェストを作成する
31. ネットワーク 接続に 依存しない 常に最新 インストール 可能 31 PWAを実装する の必要要件
32. PWAの基礎知識を知る Service Workerを知る PWAを実装する 参考 32 さらにProgressiveに 参考サイト
33. 33 UI/UX さらにProgressiveに レスポンシブデザイン クロスブラウザ対応 アニメーション SNSシェア対応 Performance 初回ロードの高速化 キャッシュ戦略の最適化 アップデートの効率化 Others SEO対策 PUSH通知 オフライン状態通知
34. 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