20220803 https://pwanight.connpass.com/ PWA Night for Beginners Vol.15 ～基本をまなぼう～

.txt

- PWA 最新のブラウザ環境に合わせた Progressive Web Application
- https://pwanight.connpass.com/

- ブラウザの進化
 - CSS+JS+Ajax
 - ServiceWorker+Web App Manifest
 - And more

- PWA
 - ノーコード: https://blog.mbaas.nifcloud.com/entry/2020/05/15/190009
  - Glide
   - レイアウト切りはり、データソースはスプレッドシート
 - WorkPress
  - プラグインでPWA
 - フレームワーク
  - angular, react nextjs, vueなど

- PWAとネイティブアプリとの比較
 - 速度: PWAが遅い
 - インストール: PWA早い
 - 開発コスト: PWA楽
  - マルチプラットフォーム対応 (web)
 - リリースのタイミング: PWAは任意のタイミング
  - プラットフォーム側にリリース申請が要らない
  - プラットフォーム側に手数料を払う必要がない

- PWAの向く分野
 - PoC/スタートアップ
 - 既存のWebサービスの延長
 - ネイティブアプリを作るほどではないサイト

- ネイティブアプリあるある
 - ダウンロードの手間
  - ダウンロードの手間はリーチに響く
 - 運用が厳しい
 - 改修が厳しい

- ネイティブアプリメリット
 - エンゲージメントが求められるアプリ
 - ゲームなどパフォーマンスが必要なアプリ
- PWAはネイティブアプリとWebの間の層にリーチさせる

- Web→PWA事例
 - 日経電子版
 - Alibaba
 - Twitter
 - 元々のWebがイケてなかった可能性もあり

- PWAはあくまでWeb
- PWAの見積
 - 機能実装ごとに定義が必要(画面)

- PWAの実装
 - PWA LightHouseを使うとPWAに対応しているかどうかがすぐ分かるので、それを目標にする
 - PWAをインストール（ホーム画面に追加）できるようにする
  - アドレスバーが表示されなくなる
  - 端末上ではアプリとして認識される
  - manifest.json
   - start_url: パラメタに適当なデータ入れとけばホーム画面から起動したかが統計取れる
  - キャッシュ機能(serviceWorker)
   - Webページとは別にバックグラウンドで動くjs
   - https環境のみ対応(除くhttp://localhost/)
   - ホームに追加する機能だけであればfetchのみ
   - キャッシュ機能
    - プリキャッシュ: 最初のインストール時
    - ランタイムキャッシュ: ページ単位。細かい設定可能
    - GoogleのWorkboxを使うと良い
     - キャッシュ済のファイルはオフラインでも使えるようになる
    - 開発ツールでリロードすると分かる
    - キャッシュ容量はブラウザ依存
     - Wi-Fi環境やLTE環境を考慮しよう
  - プッシュ機能(onesignal SDKを使用)
   - 「通知の許可をしますか？」のアレ
   - 個別に許可をしなければ通知は来ない