今更聞けないPWA

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

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 とは全く異なる制御をする
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。