After adding these dependencies to my pubspec.yaml in my flutter WEB project
firebase_auth: ^0.18.4+1
cloud_firestore: ^0.14.4
firebase_core: ^0.5.3
and these below to my web/index.html file
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
when I try to rebuild the WEB app I get:
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
any error related to this?
additional error:
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at Object.f [as app] (https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js:1:16867)
at Object.app$ [as app] (http://localhost:40783/packages/firebase_core_web/src/interop/core.dart.lib.js:32:101)
at initializeApp (http://localhost:40783/packages/firebase_core_web/firebase_core_web.dart.lib.js:81:25)
at initializeApp.next (<anonymous>)
at runBody (http://localhost:40783/dart_sdk.js:37976:34)
at Object._async [as async] (http://localhost:40783/dart_sdk.js:38007:7)
at firebase_core_web.FirebaseCoreWeb.new.initializeApp (http://localhost:40783/packages/firebase_core_web/firebase_core_web.dart.lib.js:74:20)
at initializeApp (http://localhost:40783/packages/firebase_core/firebase_core.dart.lib.js:122:59)
at initializeApp.next (<anonymous>)
at runBody (http://localhost:40783/dart_sdk.js:37976:34)
at Object._async [as async] (http://localhost:40783/dart_sdk.js:38007:7)
at Function.initializeApp (http://localhost:40783/packages/firebase_core/firebase_core.dart.lib.js:121:20)
at main$ (http://localhost:40783/packages/vibeland/widgets/subscription_widget.dart.lib.js:9807:36)
at main$.next (<anonymous>)
at runBody (http://localhost:40783/dart_sdk.js:37976:34)
at Object._async [as async] (http://localhost:40783/dart_sdk.js:38007:7)
at main$ (http://localhost:40783/packages/vibeland/widgets/subscription_widget.dart.lib.js:9805:18)
at main (http://localhost:40783/web_entrypoint.dart.lib.js:34:27)
at main.next (<anonymous>)
at http://localhost:40783/dart_sdk.js:37956:33
at _RootZone.runUnary (http://localhost:40783/dart_sdk.js:37810:58)
at _FutureListener.thenAwait.handleValue (http://localhost:40783/dart_sdk.js:32771:29)
at handleValueCallback (http://localhost:40783/dart_sdk.js:33319:49)
at Function._propagateToListeners (http://localhost:40783/dart_sdk.js:33357:17)
at async._AsyncCallbackEntry.new.callback (http://localhost:40783/dart_sdk.js:33082:27)
at Object._microtaskLoop (http://localhost:40783/dart_sdk.js:38071:13)
at _startMicrotaskLoop (http://localhost:40783/dart_sdk.js:38077:13)
at http://localhost:40783/dart_sdk.js:33574:9
For Flutter web, There is a new setup for Firebase Plugins.
First of All, follow all the steps mentioned here https://firebase.flutter.dev/docs/installation/web
the below file is web/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
//register firebase-messaging service worker
navigator.serviceWorker.register("/firebase-messaging-sw.js");
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
</body>
</html>
View this setup at
https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example/web
Initialize it in the main() method
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
Related
I was trying to set firebase for and I follow all the procedures. But After running the app it went all white and showed this error
‘TypeError: Cannot read property ‘app’ of undefined’ In Flutter Web
I then went on to google to search for solution and did everything the way they asked but I ended up having the null safety error. After that I remove the null safety and this is now the error I am getting
Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
Debug service listening on ws://127.0.0.1:57090/YI8fSoqgm_w=/ws
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at Object.u [as app] (https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js:1:18836)
at Object.app$ [as app] (http://localhost:57026/packages/firebase_core_web/src/interop/core.dart.lib.js:31:101)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:57026/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:934:64)
at Function.registerWith (http://localhost:57026/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:834:73)
at Object.registerPlugins (http://localhost:57026/packages/tembea/generated_plugin_registrant.dart.lib.js:18:46)
at main (http://localhost:57026/web_entrypoint.dart.lib.js:31:35)
at main.next (<anonymous>)
at runBody (http://localhost:57026/dart_sdk.js:40666:34)
at Object._async [as async] (http://localhost:57026/dart_sdk.js:40697:7)
at main$ (http://localhost:57026/web_entrypoint.dart.lib.js:30:18)
at http://localhost:57026/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:57026/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:57026/dwds/src/injected/client.js:8452:21)
at http://localhost:57026/dwds/src/injected/client.js:24130:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:57026/dwds/src/injected/client.js:4461:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:57026/dwds/src/injected/client.js:11511:12)
at Object._asyncStartSync (http://localhost:57026/dwds/src/injected/client.js:4425:20)
at main__closure3.$call$body$main__closure (http://localhost:57026/dwds/src/injected/client.js:24142:16)
at main__closure3.call$1 (http://localhost:57026/dwds/src/injected/client.js:24069:19)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4823:18)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _ForwardingStreamSubscription._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12416:19)
at _ForwardingStreamSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12362:15)
at _ForwardingStreamSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12695:12)
at _MapStream._handleData$2 (http://localhost:57026/dwds/src/injected/client.js:12756:12)
at _ForwardingStreamSubscription._handleData$1 (http://localhost:57026/dwds/src/injected/client.js:12721:20)
at Object.eval (eval at Closure_forwardCallTo (http://localhost:57026/dwds/src/injected/client.js:1701:14), <anonymous>:3:44)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4823:18)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _ControllerSubscription._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12416:19)
at _ControllerSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12362:15)
at _SyncStreamController._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12201:32)
at _SyncStreamController.add$1 (http://localhost:57026/dwds/src/injected/client.js:12082:15)
at Object.eval (eval at Closure_forwardInterceptedCallTo (http://localhost:57026/dwds/src/injected/client.js:1781:14), <anonymous>:3:45)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4823:18)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _ControllerSubscription._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12416:19)
at _ControllerSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12362:15)
at _SyncStreamController._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12201:32)
at _SyncStreamController.add$1 (http://localhost:57026/dwds/src/injected/client.js:12082:15)
at _GuaranteeSink.add$1 (http://localhost:57026/dwds/src/injected/client.js:23581:25)
at HtmlWebSocketChannel_closure1.call$1 (http://localhost:57026/dwds/src/injected/client.js:23874:60)
at _EventStreamSubscription_closure.call$1 (http://localhost:57026/dwds/src/injected/client.js:18042:26)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4829:16)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _CustomZone_bindUnaryCallbackGuarded_closure.call$1 (http://localhost:57026/dwds/src/injected/client.js:13016:25)
at invokeClosure (http://localhost:57026/dwds/src/injected/client.js:1524:26)
at WebSocket.<anonymous> (http://localhost:57026/dwds/src/injected/client.js:1543:18)
Below is my main function
void main() async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
And the pubspec
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_signin_button: ^2.0.0
firebase_auth: ^3.1.4
firebase_core: ^1.8.0
cloud_firestore: ^2.5.4
provider: ^6.0.1
firebase_analytics: ^7.0.1
Finally the index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="tembea">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>tembea</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.2.0/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAQYkB8TMTJKMmdzmjVQwsyiQrfMaXqOao",
authDomain: "tembea-4d3c6.firebaseapp.com",
projectId: "tembea-4d3c6",
storageBucket: "tembea-4d3c6.appspot.com",
messagingSenderId: "909705170922",
appId: "1:909705170922:web:d034fefe33c9d0d2026c93",
measurementId: "G-11NNW6J10N"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
</html>
I do not know what I may have done wrong. Any help would be welcomed.
You have two seperate imports for Firebase, which may cause issues. Remove your <script type="module">... import...</script> and replace it with the different style of initialization like this:
<script>
const firebaseConfig = {
apiKey: "AIzaSyAQYkB8TMTJKMmdzmjVQwsyiQrfMaXqOao",
authDomain: "tembea-4d3c6.firebaseapp.com",
projectId: "tembea-4d3c6",
storageBucket: "tembea-4d3c6.appspot.com",
messagingSenderId: "909705170922",
appId: "1:909705170922:web:d034fefe33c9d0d2026c93",
measurementId: "G-11NNW6J10N"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
This is currently recommended way that can be found in Flutter Firebase docs.
Since you are initializing Firebase in the main function you may also want to move your app startup script below the script of Firebase initialization.
I'm trying to run my mobile flutter app on web, i think i did all of the config i needed to do but i get the error: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)." Does anyone know what should i do to fix it? I am initializing the firebase in main, i couldn't find what else i can do.
Here is my main.dart:
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:untitled1/quiz_app/sign_in.dart';
void main() async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MaterialApp(
//initialRoute: '/SignIn',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.indigo
),
routes: {
'/SignIn' :(context) => SignInPage(),
},
home: Scaffold(
resizeToAvoidBottomInset: false,
body: SignInPage()
),
));
}
And here is index.html:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="ahmett">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>ahmett</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "cencored",
authDomain: "cencored",
projectId: "cencored",
storageBucket: "cencored",
messagingSenderId: "cencored",
appId: "cencored",
measurementId: "cencored"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</script><script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
For Flutter web, There is a new setup for Firebase Plugins.
First of All, follow all the steps mentioned here https://firebase.flutter.dev/docs/installation/web
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
//register firebase-messaging service worker
navigator.serviceWorker.register("/firebase-messaging-sw.js");
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
</body>
</html>
View this setup at
https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example/web
In my app, for the web version, I use package firebase 7.3.0.
I first instantiate Firebase app with a singleton and then instantiate Messaging() as I have done with all other Firebase services I use in my app :
App firebase = FirebaseWeb.instance.app;
var firebaseMessaging = messaging();
I have subscribeToTopic() method which first calls getMessagingToken() method as it needs the returned token, but getMessagingToken() throws the error:
PlatformPushNotificationWeb.getMessagingToken() getToken error: FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:5000/firebase-cloud-messaging-push-scope') with script ('http://localhost:5000/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration). (messaging/failed-service-worker-registration)
Future<String> getMessagingToken() async {
String token;
await firebaseMessaging.requestPermission().timeout(Duration(seconds: 5)).then((value) {
print('PlatformPushNotificationWeb.getMessagingToken() requestPermission result is $value');
}).catchError((e) => print('PlatformPushNotificationWeb.getMessagingToken() requestPermission error: $e'));
await firebaseMessaging.getToken().then((value) {
print(' PlatformPushNotificationWeb.getMessagingToken() token is $value');
token = value;
}).catchError((e) => print('PlatformPushNotificationWeb.getMessagingToken() getToken error: $e'));
return token;
}
I checked and in my index.html firebase-messaging is present:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fixit cloud biking</title>
<!-- <meta name="google-signin-client_id" content="YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com">-->
<meta name="google-signin-client_id" content="xxxxxxxxxx.apps.googleusercontent.com">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
</head>
<!--<body>-->
<body id="app-container">
<script src="main.dart.js?version=45" type="application/javascript"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-remote-config.js"></script>
</body>
</html>
Now, the error says 'http://localhost:5000/firebase-messaging-sw.js' not firebase-messaging.js as the library in the index.htmlfile. I noticed that Messaging()is not directly available through firebase app instance as it would be for other services, for Storage would befirebase.storage()`.
Am I missing to setup something else for messaging?
Found this article https://medium.com/#rody.davis.jr/how-to-send-push-notifications-on-flutter-web-fcm-b3e64f1e2b76 and discovered that indeed there is a bit more setup for Firebase Cloud Messaging on web.
In index.html there is a script to add:
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
// navigator.serviceWorker.register("/flutter_service_worker.js");
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
In project web folder create a new file firebase-messaging-sw.js where you import the firebase packages (match index.html versions), initialize Firebase app , and set the BackgroundMessageHandler.
If I initialize Firebase app with the singleton then instantiating messaging() throws a syntax error, so it needs to be initialized with all parameters, otherwise on background messages won't work.
importScripts("https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.15.5/firebase-messaging.js");
//Using singleton breaks instantiating messaging()
// App firebase = FirebaseWeb.instance.app;
firebase.initializeApp({
apiKey: 'api-key',
authDomain: 'project-id.firebaseapp.com',
databaseURL: 'https://project-id.firebaseio.com',
projectId: 'project-id',
storageBucket: 'project-id.appspot.com',
messagingSenderId: 'sender-id',
appId: 'app-id',
measurementId: 'G-measurement-id',
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
const promiseChain = clients
.matchAll({
type: "window",
includeUncontrolled: true
})
.then(windowClients => {
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
windowClient.postMessage(payload);
}
})
.then(() => {
return registration.showNotification("New Message");
});
return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
console.log('notification received: ', event)
});
So now, getToken() and subscribeToTopic() and onMessage() work as expected.
In my bloc I have a listener on onMessage() which (on web) Stream I convert to a Stream<Map<String,Dynamic>> as the firebase_messaging(on device) returns from :
Stream<Map<String, dynamic>> onMessage() async* {
print('PlatformPushNotificationWeb.onMessage() started');
handleData(Payload payload, EventSink<Map<String, dynamic>> sink) {
Map<String,dynamic> message = {
'notification': {
'title': payload.notification.title,
'body': payload.notification.body,
'sound': true
},
'data': payload.data
};
sink.add(message);
}
final transformer = StreamTransformer<Payload, Map<String, dynamic>>.fromHandlers(
handleData: handleData);
yield* firebaseMessaging.onMessage.transform(transformer);
}
Hope it helps others.
Cheers.
It turns out you can just create a file called firebase-messaging-sw.js in your web project folder and have some commented out JavaScript in it and then Flutter stops complaining.
Also modify index.html with this:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
I really don't know why this works, but it's better than having some useless JavaScript code laying around.
As of December 2022, just creating an empty firebase-messaging-sw.js file at the root of the web directory in your flutter app will fix the issue.
Before that you of course follow the steps to add Firebase to your app: https://firebase.google.com/docs/flutter/setup
dart pub global activate flutterfire_cli
flutterfire configure
Then
In your lib/main.dart file, import the Firebase core plugin and the configuration file you generated earlier:
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
Finally
Also in your lib/main.dart file, initialize Firebase using the DefaultFirebaseOptions object exported by the configuration file:
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
i am using firebase in my react native project. when i am try to sign up user with email and password this error is comming.
i am using window OS and only andorid render
Note: i had read all questions related to this but nothing helped
newbiew to react native .please guide in proper way
package.json
"firebase": "^5.8.2",
"native-base": "^2.11.0",
"react": "16.6.3",
"react-native": "^0.57.8",
"react-native-elements": "^0.19.1",
"react-native-firebase": "^5.2.2",
"react-native-gesture-handler": "^1.0.15",
"react-native-maps": "^0.23.0",
"react-native-svg": "^8.0.10",
"react-native-vector-icons": "^6.2.0",
"react-navigation": "^3.2.1"
Code for sign up
import * as firebase from 'firebase'
//Intiazlize firebase
const firebaseConfig = {
apiKey: "AIzaSyCUK5QkcvTcvfCKlbwnnI8GskIgcLGMcqA",
authDomain: "trailertracker-da09c.firebaseapp.com",
databaseURL: "https://trailertracker-da09c.firebaseio.com",
projectId: "trailertracker-da09c",
storageBucket: "",
}
firebase.initializeApp(firebaseConfig)
signUpUser = (email,password) => {
try{
if(this.state.password.length < 6 ){
alert("Please Enter Valid Email and Password")
return
}
firebase.auth().createUserWithEmailAndPassword(email,password)
} catch(err){
console.log(err)
}
}
Complete error is
Loading dependency graph, done. error: bundling failed: SyntaxError:
Unexpected end of JSON input
at JSON.parse ()
at FileStore.get (F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro-cache\src\stores\FileStore.js:26:19)
at F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro-cache\src\Cache.js:76:40
at Generator.next ()
at step (F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro-cache\src\Cache.js:18:30)
at F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro-cache\src\Cache.js:37:14
at new Promise ()
at F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro-cache\src\Cache.js:15:12
at Cache.get (F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro-cache\src\Cache.js:102:7)
at F:\React Native\ReactProjects\trailer-tracker\TrailerTracker\node_modules\metro\src\DeltaBundler\Transformer.js:166:34
BUNDLE [android, dev] ....../index.js 68.2% (947/1147), failed.
is this another error or error in firebase ?
Help will be highly appreciated
Thanks
To get started with firebase in react native.
add firebase dependency
yarn add firebase
Goto Firebase and make a new project and going to the section
Add Firebase to your web app
Make a class for configation of Firebase like this
import firebase from "#firebase/app";
require("firebase/database");
require("firebase/storage");
require("firebase/auth");
let config = {
apiKey: "YOUR PROJECT apiKey",
authDomain: "YOUR PROJECT authDomain",
databaseURL: "YOUR PROJECT databaseURL",
projectId: "XXXXXXXX",
storageBucket: "",
messagingSenderId: "XXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXX"
};
export default class DBHandler {
static auth;
static database;
static init() {
firebase.initializeApp(config);
DBHandler.database = firebase.database();
DBHandler.auth = firebase.auth();
}
}
in App.js initialize Firebase
import DBHanlder from "./src/api/constants";
export default class App extends Component {
componentDidMount = () => {
DBHanlder.init();
};
render() {
return <YourApp />;
}
}
Your're done with initialization part .now you can use for auth like below
import DBHandler from "../api/constants";
class Login extends Component {
signinUser = () => {
DBHandler.auth.signInWithEmailAndPassword(email, password)
.then(() => {
//Do what you want
})
.catch((error) => {
//handle error
var errorCode = error.code;
var errorMessage = error.message;
alert(errorMessage);
console.log("ERROR");
console.log(errorCode, errorMessage);
});
}
}}
This is my code based on tutorial from firebase for web push notification:
<script type="text/javascript">
// Initialize Firebase
var config = {
apiKey: ".....................",
authDomain: "push-test-8e36f.firebaseapp.com",
databaseURL: "................",
projectId: "................",
storageBucket: "..................",
messagingSenderId: "SOME SENDER ID"
};
let a = firebase.initializeApp(config);
console.log(a);
</script>
<script type="text/javascript">
async function askForPermissioToReceiveNotifications(siteName) {
const messaging = firebase.messaging();
await messaging.requestPermission();
const token = await messaging.getToken();
console.log('user token: ' + token);
}
Notification.requestPermission().then(function (result) {
if (result === 'granted') {
askForPermissioToReceiveNotifications('somesite');
return;
} else {
console.log('The permission request was dismissed.');
return;
}
});
</script>
However, I always face with the problem involve in service worker, in every tutorial dont mention about that.
Any recommendations to fix this issue?