PWAの基本となる部分をLTしました。(Gunma.web #38)
今さら聞けない PWAGunma.web #38Gunma.web #38@kanayannet@kanayannet
View Slide
PWAとは
PWAとはプログレッシブウェブアプリの略ネイティブアプリに近い動きをもたらすウェブアプリのこと
PWAを構成するもの
PWAを構成するもの安全なコンテキストmanifest leservice 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記述する⾔語: JSJSだけど制約が⾊々ある例: domにアクセスできないo ineで表⽰可能などnativeアプリっぽい挙動を可能にするwebのJSとは全く異なる制御をする
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 PWAMDNgooglehttps://www.amazon.co.jp/dp/B07ZV4CPXQ/https://developer.mozilla.org/ja/docs/Web/API/Serhttps://developers.google.com/web/fundamentals
まとめ今回は最低限の実装最低限の実装でここまで出来るo ine対応などもあるが、今回は時間overどっかでハンズオンやりたい。push noti cationもあるが、時間overのためここまで
ご清聴ありがとうございました。
質疑応答実は PWAの事を解りやすく解説する練習のためにやりました。技術的なところもそうですが...ここ解りづらい的なツッコミも歓迎です。