$30 off During Our Annual Pro Sale. View Details »

初めてのPWA開発.pdf

 初めてのPWA開発.pdf

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

アシアル株式会社

April 04, 2019
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. そこで重要なのが Service Worker
    8

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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
    インストール時にアセットをキャッシュする
    インストールを検知
    アセットをキャッシュ

    View Slide

  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
    アセットのリクエスト検知
    キャッシュからレスポンス返却

    View Slide

  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の処理

    View Slide

  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を作成する
    データのリクエストを検知する
    キャッシュからデータを取得
    サーバーからデータを取得

    View Slide

  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の差分を確認
    キャッシュのキーが違う場合
    古いキャッシュを削除

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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形式でメタデータを定義

    View Slide

  30. 30








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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  35. 35

    View Slide