0414

LOGS

• PWA with firebase Messaging をローカルでもやる

  • 昨晩やったので続きから
  • src/sw.ts を書いて，public/firebase-messaging-sw.js に esbuild を用いてビルド
    • ただ， vite とは別で動かしているので， vite との連携ができていない
    • つまり，import.meta.env.XXX が使えない
    • プラグインも使ったり，define オプションつけたりしてみたが，だめ -> undefined import.meta

  • ということで，結局別のアプローチとして，esbuild-sw.js を書いて，ビルドスクリプトを用意した

    import esbuild from 'esbuild';
    import dotenv from 'dotenv';
    
    // .envファイルから環境変数をロード
    dotenv.config();
    
    esbuild.build({
      entryPoints: ['src/sw.ts'],
      outfile: 'public/firebase-messaging-sw.js',
      bundle: true,
      minify: true,
      sourcemap: false,
      define: {
        'process.env.VITE_FIREBASE_API_KEY': JSON.stringify(process.env.VITE_FIREBASE_API_KEY),
        'process.env.VITE_FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.VITE_FIREBASE_AUTH_DOMAIN),
        'process.env.VITE_FIREBASE_PROJECT_ID': JSON.stringify(process.env.VITE_FIREBASE_PROJECT_ID),
        'process.env.VITE_FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.VITE_FIREBASE_STORAGE_BUCKET),
        'process.env.VITE_FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.VITE_FIREBASE_MESSAGING_SENDER_ID),
        'process.env.VITE_FIREBASE_APP_ID': JSON.stringify(process.env.VITE_FIREBASE_APP_ID),
      },
      platform: 'browser',
      target: ['esnext']
    }).catch(() => process.exit(1));
    

  • これでOK
  • あとはこれを実行する > node esbuild-sw.js
  • 忘れずに package.json の scripts にも記述
  • 続いて push 通知の諸々の実装
  • とりま，Web Push の可能性を確認
    • window, navigator オブジェクトに以下があるかを確認
      • 'Notification' in window
      • 'serviceWorker' in navigator
      • 'PushManager' in window

• なぜかこのタイミングで Linter を変更

  • VSCode で format が自動で効いていないのと，試したかった biomejs を使ってみる
  • 詳しくは公式ドキュメント

  > pnpm i biome -D
  
  # 初期化（これで biome.json が生成される）
  > pnpm biome init
  
  # 全ファイルをチェック，リント，修正をいっぺんにやるコマンド
  > pnpm biome check --apply src/**/*
  

  • 簡単．すぐ動くし速い👍
  • 細かなルールは適宜やるとして，一旦デフォルトで tabIndex になっているのでそれを space に変更する -

• 戻って FCM 使った Push 通知の続き

  • クライアントで permission を取得

      const permission = await Notification.requestPermission();
  
    // こっちではだめ
    // 単に今の permission を取得するだけなので，ちゃんとユーザーに聞く
    const permission = Notification.permission;
  

  • 諸々 ChatGPT が教えてくれて助かるー
  • 俺のブラウザデフォルトでは通知の設定をブロックしていたので，とりま localhost:5173 を許可したら，permission がちゃんと granted になった
  • service worker 周りの型がわからないので，悔しいが any を使う←

  // ↓↓こういうやつと
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
  declare let self: any; // ← 本当は ServiceWorkerGlobalScope と書き方買った
  const app = initializeApp(firebaseConfig);
  
  // ↓↓こういうやつ
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
  self.addEventListener("activate", (event: any) => {
    event.waitUntil(self.clients.claim());
  });
  

  • 今日はここで限界かも
  • とりま リポジトリ はここ

  • 一旦 PWA アプリから granted と登録のメッセージがきた！

  • 実機でも試したかったが，取得した token どうする問題

  • 雑に画面に表示することでお茶を濁す
• ここで眠くて終了