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

今更聞けないPWA

 今更聞けないPWA

PWAの基本となる部分をLTしました。(Gunma.web #38)

kanayannet

August 01, 2020
Tweet

More Decks by kanayannet

Other Decks in Programming

Transcript

  1. 今さら聞けない PWA
    Gunma.web #38
    Gunma.web #38
    @kanayannet
    @kanayannet

    View full-size slide

  2. PWA
    とは
    プログレッシブウェブアプリの略
    ネイティブアプリに近い動きをもたらすウェブアプ
    リのこと

    View full-size slide

  3. PWA
    を構成するもの

    View full-size slide

  4. PWA
    を構成するもの
    安全なコンテキスト
    manifest le
    service worker

    View full-size slide

  5. 安全なコンテキスト
    localhost
    か https

    View full-size slide

  6. 理由
    service worker (
    後述)
    を install
    出来ないため

    View full-size slide

  7. localhost?
    ⾃分の端末でテストする

    View full-size slide

  8. グローバルに公開するに
    はhttps

    View full-size slide

  9. manifest file
    {
    "name": "pwa gunmaweb",
    "short_name": "pwa-gunmaweb",
    "icons": [
    {
    "src": "/icons/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable"
    },
    {
    "src": "/icons/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
    }

    View full-size slide

  10. service worker
    記述する⾔語: JS
    JS
    だけど制約が⾊々ある
    例: dom
    にアクセスできない
    o ine
    で表⽰可能などnative
    アプリっぽい挙動を可
    能にする
    web
    のJS
    とは全く異なる制御をする

    View full-size slide

  11. service worker
    読込⽅法
    if ('serviceWorker' in navigator) {
    console.log('service worker is active');
    navigator.serviceWorker.register('/sw.js').then(function (regis
    // 登録成功
    console.log('ServiceWorker registration successful with scop
    }).catch(function (err) {
    // 登録失敗 :(
    console.log('ServiceWorker registration failed: ', err);
    });
    }

    View full-size slide

  12. service worker
    記述例
    //
    self.addEventListener('install', function (e) {
    console.info('install', e);
    });
    //
    self.addEventListener('activate', function (e) {
    console.info('activate', e);
    });
    //
    self.addEventListener('fetch', function (e) {
    console.info('fetch', e);
    });

    View full-size slide

  13. 少しだけデモを⾒せま
    す。
    https://pwa-gunmaweb-e6457.web.app/

    View full-size slide

  14. 参考
    Try PWA
    MDN
    google
    https://www.amazon.co.jp/dp/B07ZV4CPXQ/
    https://developer.mozilla.org/ja/docs/Web/API/Ser
    https://developers.google.com/web/fundamentals

    View full-size slide

  15. まとめ
    今回は最低限の実装
    最低限の実装でここまで出来る
    o ine
    対応などもあるが、今回は時間over
    どっか
    でハンズオンやりたい。
    push noti cation
    もあるが、時間over
    のためここま

    View full-size slide

  16. ご清聴ありが
    とうございま
    した。

    View full-size slide

  17. 質疑応答
    実は PWA
    の事を解りやすく解説する練習のために
    やりました。
    技術的なところもそうですが...
    ここ解りづらい的な
    ツッコミも歓迎です。

    View full-size slide