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 Slide

  2. PWA
    とは

    View Slide

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

    View Slide

  4. PWA
    を構成するもの

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 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 Slide

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

    View Slide

  12. View Slide

  13. 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 Slide

  14. 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 Slide

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

    View Slide

  16. 参考
    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 Slide

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

    View Slide

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

    View Slide

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

    View Slide