export const db = firebase.firestore();
export const auth = firebase.auth();
Hello I am currently trying to implement push notification to my framework7 vue app. My goal is to send notification to all user once I add new news to the firebase. I am using firebase function cause i was unable to figure out how to do it diferently since I want it to be a background notification.
Does it mean that these lines should me in my origin firebase.js file since firebase-messaging-sw.js should be empty at start?? This is my src/js/firebase.js and at the moment my src/js/firebase-messaging-sw.js is empty. Where and how should I import these scripts?
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/messaging'
const firebaseConfig = {
};
firebase.initializeApp(firebaseConfig);
firebase.analytics().logEvent('notification_received');
// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();
messaging.usePublicVapidKey("BKuLJbRmsfeBizv8l7apc779sxVZjMmAhy6cdb5K4BfOs5EYgavvllPQ5PN_d40smzsNGvZuWYZ8vEvMM8KaF-s");
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('./firebase-messaging-sw.js')
// .then(function (registration) {
// console.log("Service Worker Registered");
// messaging.useServiceWorker(registration);
// });
// }
// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
if (currentToken) {
sendTokenToServer(currentToken);
updateUIForPushEnabled(currentToken);
} else {
// Show permission request.
console.log('No Instance ID token available. Request permission to generate one.');
// Show permission UI.
updateUIForPushPermissionRequired();
setTokenSentToServer(false);
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
setTokenSentToServer(false);
});
export const db = firebase.firestore();
export const auth = firebase.auth();
// Send the Instance ID token your application server, so that it can:
// - send messages back to this app
// - subscribe/unsubscribe the token from topics
function sendTokenToServer(currentToken) {
if (!isTokenSentToServer()) {
console.log('Sending token to server...');
// TODO(developer): Send the current token to your server.
setTokenSentToServer(true);
} else {
console.log('Token already sent to server so won\'t send it again ' +
'unless it changes');
}
}
function isTokenSentToServer() {
return window.localStorage.getItem('sentToServer') === '1';
}
function setTokenSentToServer(sent) {
window.localStorage.setItem('sentToServer', sent ? '1' : '0');
}
I have these file imported in my index.html but i am still getting:
FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8080/firebase-cloud-messaging-push-scope') with script ('http://localhost:8080/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
at ut.<anonymous> (https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:37074)
at https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:1982
at Object.throw (https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:2087)
at i (https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:884)
To store the firebase-messaging-sw.js file I’ve made some changes in the build/webpack.config.js file, to have a folder to add any file I want to have in the app root folder.
I’ve this in the end of the build/webpack.config.js file now:
new CopyWebpackPlugin({
patterns: [
{
noErrorOnMissing: true,
from: resolvePath('src/static'),
to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
},
//***ADDITION*** I add this lines to have a folder to store files I want in the root folder
{
noErrorOnMissing: true,
from: resolvePath('src/homefiles'),
to: resolvePath(isCordova ? 'cordova/www' : 'www'),
},
//***END ADDITION***
],
}),
Now you can make the src/homefiles folder and every file you store in this folder will be in the root folder, so if you store the firebase-messaging-sw.js file inside, you will not have this error.
Maybe there is another better solution, but i’ve find this…
you need to make the src/homefiles folder
add the firebase-messaging-sw.js file inside this folder
and make the changes inside the build/webpack.config.js file
¿it send you the same error or another diferent one?
After a few attempts it worked, thanks for the help.
I’m trying to generate the FCM Token now for Cordova (Android and IOS), I installed some more unsuccessful plugins using Framework7 + Cordova, have you reached this part yet?
