Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初めてのPWA開発.pdf

 初めてのPWA開発.pdf

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

200f7b54477ac809555e8e690ff3162a?s=128

アシアル株式会社

April 04, 2019
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

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
  35. 35