今更聞けないPWA

Transcript

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

2. PWA とは

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

4. PWA を構成するもの

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

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

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

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

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

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" }

11. service worker 記述する⾔語: JS JS だけど制約が⾊々ある 例: dom にアクセスできない o

    ine で表⽰可能などnative アプリっぽい挙動を可 能にする web のJS とは全く異なる制御をする
12. None

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); }); }

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); });

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

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

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

    cation もあるが、時間over のためここま で

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

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