今更聞けないPWA

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

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