firebase / firebase/quickstart-js

Can not get FCM token because of DOM exception

Open
#384 1 comment 0 reactions 0 assignees View on GitHub
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"
![image](https://user-images.githubusercontent.com/44663784/68293169-fbb63f80-00bf-11ea-99b5-f329980c47b9.png)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.