firebase / firebase/quickstart-js
Can not get FCM token because of DOM exception
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 3.7k
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 6
Description
I am using React JS with Typescript
Today, I register Firebase Cloud Messaging into my app but I get an error that showing "QuotaExceededError"

firebase-messaging-sw.js
````js
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js");
firebase.initializeApp({
messagingSenderId: "xxxxxxxxx"
});
const messaging = firebase.messaging();
// [START background_handler]
messaging.setBackgroundMessageHandler(function(payload) {
console.log(
"[firebase-messaging-sw.js] Received background message ",
payload
);
// Customize notification here
const notificationTitle = "Background Message Title";
const notificationOptions = {
body: "Background Message body.",
icon: "/firebase-logo.png"
};
return self.registration.showNotification(
notificationTitle,
notificationOptions
);
});
````
index.tsx
````ts
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.js";
import "font-awesome/css/font-awesome.min.css";
import "../src/assets/css/style.css";
import i18next from "i18next";
import "./cores/utils/i18n";
i18next.init({
interpolation: { escapeValue: false } // React already does escaping
});
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./firebase-messaging-sw.js")
.then(function(registration) {
console.log("Registration successful, scope is:", registration.scope);
})
.catch(function(err) {
console.log("Service worker registration failed, error:", err);
});
}
ReactDOM.render(
,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();
````
Get token in App.tsx
````ts
componentDidMount() {
messaging
.requestPermission()
.then(() => {
console.log(messaging.getToken());
return messaging.getToken();
})
.then(token => {
console.log(token);
})
.catch(function(err) {
console.log("Unable to get permission to notify.", err);
});
navigator.serviceWorker.addEventListener("message", message =>
console.log(message)
);
localStorage.setItem("lang", "en");
}
````
Thanks you!
Contributor guide
Assessment
This issue has not been assessed yet.