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

PWA とは

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

PWA を構成するもの

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

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

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

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

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

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

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

No content

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

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

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

参考 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

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

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

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