MENU
暮らしを少し便利にするアプリとサービスを作っています
  1. ホーム
  2. Flutter
  3. PWAを体験

PWAを体験

Flutter

PWAの学習をいよいよ開始します

目次

X (Twitter) をPWAとしてインストール

手順（PCの場合）:


ステップ1: Chromeでアクセス

  1. Google Chromeを開く
  2. https://twitter.com/ にアクセス
  3. ログインする

ステップ2: インストールボタンを探す
アドレスバーの右側に:
📱 インストールアイコン（＋マーク or パソコンマーク）が表示される

または:

右上の「︙」（3点メニュー）をクリック
→ 「Twitter をインストール…」というメニューが出る

ステップ3: インストール

  1. 「インストール」をクリック
  2. ダイアログが出る
    「Twitter をインストールしますか?」
  3. 「インストール」をクリック

→ 数秒で完了! 🎉

ステップ4: 確認
インストール後:
✅ デスクトップにアイコンができる
✅ Dock/タスクバーに追加される
✅ 独立したウィンドウで開く
✅ アプリっぽい！

手順（スマホの場合）:
iPhoneの場合:

  1. Safari で https://twitter.com/ を開く
  2. 下部の「共有」ボタン（□↑）をタップ
  3. 「ホーム画面に追加」をタップ
  4. 「追加」をタップ

→ ホーム画面にアイコンができる! 📱

Androidの場合:

  1. Chrome で https://twitter.com/ を開く
  2. 右上の「︙」をタップ
  3. 「ホーム画面に追加」をタップ
  4. 「追加」をタップ

→ ホーム画面にアイコンができる! 📱

オフライン動作を確認

やり方:

1. X (Twitter) PWAを開く
2. いくつかツイートを見る
3. タイムラインをスクロール
4. Wi-Fiをオフにする（機内モード）
   ↓
5. もう一度スクロールしてみる
   
結果:
✅ すでに見たツイートは表示される!
✅ 画像もキャッシュされている!
✅ 「オフラインです」エラーが出ない!
   （新しいツイートだけ読み込めない）

→ これがService Workerの力!

Chrome DevToolsでService Workerを観察

手順:
ステップ1: DevToolsを開く

  1. Chrome で https://twitter.com/ を開く
  2. 右クリック → 「検証」

→ DevToolsが開く

ステップ2: Applicationタブ

  1. DevToolsの上部タブ
    Elements | Console | Sources | Network | …
  2. 「Application」タブをクリック
    （見つからない場合は「>>」をクリック）
  3. 左サイドバーで「Service Workers」をクリック

→ Service Workerの情報が表示される!

ステップ3: 確認できること
Service Workers セクションに表示される情報:

✅ Status: activated and is running
→ Service Workerが動いている!

✅ Source: sw.js （ファイル名）
→ これがService Workerのコード

✅ Update on reload
→ リロード時に更新するか

✅ Offline
→ オフラインモードをシミュレート

✅ Update
→ Service Workerを更新

ステップ4: キャッシュを見る

  1. 左サイドバーで「Cache Storage」をクリック
  2. 展開すると複数のキャッシュが表示される

例:
▼ Cache Storage
▼ twitter-assets-v1
– https://abs.twimg.com/…
– https://pbs.twimg.com/…
▼ twitter-offline
– /offline.html

→ これが Service Worker が保存したキャッシュ!

ステップ5: オフラインモードを試す

  1. DevToolsの「Application」タブ
  2. 「Service Workers」セクション
  3. 「Offline」にチェックを入れる

→ オフラインモードになる

  1. ページをリロードしてみる

結果:
✅ ページが表示される!
✅ キャッシュから読み込まれている!

PWAとネイティブアプリの比較

比較1: 起動速度
□ X PWA を起動
□ X ネイティブアプリ（スマホ）を起動
→ どちらが速い?

比較2: オフライン
□ 両方でオフラインにしてみる
→ 両方とも過去のデータは見られる!

比較3: 通知
□ PWAでも通知が来る!
（ブラウザの通知許可が必要）

比較4: 容量
□ PWAは軽い（キャッシュのみ）
□ ネイティブアプリは重い（全データ）

他のPWAも試してみる

  1. Spotify Web Player
    URL: https://open.spotify.com/

試すこと:
✅ インストール
✅ 音楽再生
✅ オフラインでも過去の画面が見られる

  1. Google Maps（スマホ）
    URL: https://www.google.com/maps

試すこと:
✅ ホーム画面に追加
✅ 地図を見る
✅ 検索
✅ オフラインでも過去に見た場所は見られる

  1. Pinterest
    URL: https://www.pinterest.com/

試すこと:
✅ インストール
✅ 画像のブラウジング
✅ スムーズなスクロール

これはPinterestのPWAをインストールしてできたアイコン

今日のポイント

  1. PWAはインストールできる
    ▪️アドレスバーの「インストール」ボタン
    ▪️デスクトップ/ホーム画面にアイコン
    ▪️独立したウィンドウで動く
    ▪️アプリっぽい体験
  2. オフラインで動く
    ▪️ キャッシュされたデータは見られる
    ▪️ 完全なオフライン対応
    ▪️ネットワークエラーが出にくい
  3. Service Workerが裏で働いている
    ▪️ リクエストをインターセプト
    ▪️キャッシュに保存
    ▪️キャッシュから返す
    ▪️バックグラウンドで動く
  4. DevToolsで確認できる
    ▪️ Application タブ
    ▪️ Service Workers
    ▪️Cache Storage
    ▪️オフラインモード
Flutter
目次