【PWA】Firebaseを使ってスマホのトークンを取得してプッシュ通知を送る仕組みを作成する（Part3）
Firebaseを使用してスマートフォンのトークンを取得し、PWAでプッシュ通知を送るシステムを構築してみます。前回の続きです。
目次
エラー発生？
前回のコードのままだと、何かエラーが発生して、うまくトークンが取得できないようなので、内容を変更してみたいと思います。
Uncaught ReferenceError: firebase is not definedエラーは、スクリプトがfirebaseオブジェクトを使用しようとしている時点で、Firebase SDKがまだロードされていない、または正しくロードされていないことを示しています。
この問題を解決するためには以下のステップを確認してください。
1. Firebase SDKのロードを確認する
firebaseはFirebase SDKのグローバルオブジェクトです。このオブジェクトを使用する前に、Firebase SDKがHTMLファイルに正しくロードされている必要があります。
HTMLファイルにFirebase SDKへの参照が含まれていることを確認してください。これは通常、<head>タグ内または<body>タグの終わり近くに配置されます。
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js"></script>
Firebase SDKがロードされた後にmain.jsがロードされていることを確認してください。順序が逆だと、firebaseオブジェクトが未定義のままになってしまいます。
Firebaseの初期化コードを確認する
firebase.initializeApp(firebaseConfig);が実行されていることを確認してください。
コードはfirebaseConfigオブジェクトの後、かつFirebase SDKのロード後に実行する必要があります。
モジュールバンドラーを使用している場合
WebpackやRollupなどのモジュールバンドラーを使用している場合は、firebaseをプロジェクトにインポートしていることを確認してください。
import firebase from 'firebase/app';
import 'firebase/messaging';これらのステップを確認し、必要に応じて修正した後、アプリケーションを再読み込みしてエラーが解消されたかを確認してください。
Firebaseでウェブアプリケーション内でプッシュ通知を実装する
このコードを実行することで、ウェブアプリケーションがFirebase Messagingを使用してプッシュ通知を実装できるようになります。
いいなと思ったら応援しよう！
