今更聞けないPWA

 今更聞けないPWA

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

18ff61878467cbf8c00be0ccf974645a?s=128

kanayannet

August 01, 2020
Tweet

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