I have a code like below, initially I used this code for iOS and Android applications, now I want the application to run on the web, but when I run I get this error
runZonedGuarded: Caught error in my root zone.
pluginConstants['isCrashlyticsCollectionEnabled'] != null is not true
someone suggested using kisweb, I've used it, but I still get the same error, please help, here's my code
void main() async {
WidgetsFlutterBinding.ensureInitialized();
if(!kIsWeb) {
await Firebase.initializeApp();
}
runZonedGuarded(() async {
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
}else{
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
runApp(App(
authenticationRepository: AuthenticationRepository(),
userRepository: UserRepository(),
));
}, (error, stackTrace) async {
print('runZonedGuarded: Caught error in my root zone. $error');
});
}
index.html
<!DOCTYPE html>
<html>
<head>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<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-auth.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-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx,
databaseURL: "xxx",
projectId: "xxxx",
storageBucket: "xxx,
messagingSenderId: "xxx",
appId: "xxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<!--
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.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<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="cashbac_biz">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>cashbac_biz</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>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Replace:
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
} else {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
with:
if (!kIsWeb) {
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
} else {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
}
Calling setCrashlytics() will produce the error because Crashlytics is not supported on web.
I had the same problem. I solved it by following the install directions here, specifically these steps to add a build phase into XCode:
From Xcode select Runner from the project navigation.
Select the Build Phases tab, then click + > New Run Script Phase.
Add ${PODS_ROOT}/FirebaseCrashlytics/run to the Type a script... text box.
Optionally you can also provide your app's built Info.plist location to the build phase's Input Files field: For example:
$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)
Related
I need to publish my Flutter web app on a web server folder.
Here you have the index.html file:
<!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="/freelife/">
<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="capenergy_ns">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Freelife</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIz...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:538....",
measurementId: "G-X..."
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
Here you have firebase-messaging-sw.js:
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging.js");
firebase.initializeApp({
apiKey: "AIz...",
authDomain: "free...",
projectId: "free...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:53...",
measurementId: "G-X..."
});
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)
});
The issue is that publishing the created web folder inside build folder in the app, launching the web in the browser shows a blank page.
Lookin the output of the web console debugger, it throws a lot of errors:
The web app was working fine until I inserted all Firebase dependencies.
try deleting [base href="/freelife/"] from the index.html file
It should stay like this.
<!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="/freelife/"> -->
<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="capenergy_ns">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Freelife</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIz...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:538....",
measurementId: "G-X..."
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
I have solved the issue changing index.html as follows:
<!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="/webapp/">
<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="freelife">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>capenergy_ns</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
<script type="module">
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIza...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "538...",
appId: "1:...",
measurementId: "G-..."
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
And then on main.dart, I have updated the piece of code:
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
await Firebase.initializeApp(
options: const FirebaseOptions(
apiKey: "AIza....",
appId: "1:5389...",
messagingSenderId: "...",
projectId: "...")
);
Error
Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:54558/firebase-cloud-messaging-push-scope') with script ('http://localhost:54558/firebase-messaging-sw.js'): ServiceWorker script evaluation failed .
I have tried everything including firebase-messaging-sw.js and index.html but not sending text message on the web-page. Please help. Trying to fix it but not getting FCM messaging text.
Firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js");
// const firebaseConfig = {
// apiKey: "AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
// authDomain: "matabwebadmin.firebaseapp.com",
// projectId: "matabwebadmin",
// storageBucket: "matabwebadmin.appspot.com",
// messagingSenderId: "104162661195",
// appId: "1:104162661195:web:896bdc9088fd54884b4ece"
// };
Firebase.initializeApp({
// name: "matabmaindatabase",
apiKey:"AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
appId: '1:104162661195:web:896bdc9088fe54884b4ece',
messagingSenderId: "104162661195",
projectId: "matabwebadmin",
storageBucket: "matabwebadmin.appspot.com",
});
const messaging = firebase.messaging();
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);
});
}
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="matabweb">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>matabweb</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
// navigator.serviceWorker.register("/flutter_service_worker.js");
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
<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');
});
}
</script>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
Main.dart:
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
const firebaseConfig = {
"apiKey": "AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
"authDomain": "matabwebadmin.firebaseapp.com",
"projectId": "matabwebadmin",
"storageBucket": "matabwebadmin.appspot.com",
"messagingSenderId": "104162661195",
"appId": "1:104162661195:web:896bdc9088fd54884b4ece"
};
FirebaseApp app = await Firebase.initializeApp(
// name: "matabmaindatabase",
options: FirebaseOptions(
apiKey: FirebaseConfiurations.apiKey,
appId: FirebaseConfiurations.appId,
messagingSenderId: FirebaseConfiurations.messagingSenderId,
projectId: FirebaseConfiurations.projectId,
storageBucket: "matabwebadmin.appspot.com",
));
//print(app);
// FirebaseApp app = await Firebase.initializeApp(
// name: 'matabweb',
// options: const FirebaseOptions(
// appId: '1:104162661195:web:896bdc9088fd54884b4ece',
// apiKey: 'AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA',
// messagingSenderId: '104162661195',
// projectId: 'matabwebadmin'));
debugPrint(app.toString());
// Get.put(BookController(), tag: 'bookController');
// Get.lazyPut(() => UserController(), tag: 'userController');
runApp(MyApp());
FirebaseMessaging.instance.getToken().then((print));
}
I have an error that has been appearing in my last few deploys and I am unable to trace it.
It only happens when I deploy to firebase website, debug works without any issues.
Uncaught SyntaxError: Unexpected token '<' (at flutter.js:1:1)
(index):50 Uncaught ReferenceError: _flutter is not defined
at (index):50:7
This shows up in the browser console.
This is my 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="Trading made easy">
<meta name="google-signin-client_id"
content="xxx.apps.googleusercontent.com">
<!-- 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="tornmarket">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>Torn Market</title>
<link rel="manifest" href="manifest.json">
<!-- <script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script> -->
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
You should try to rebuild your application with:
flutter clean
and then
flutter build web
I tried to delete build folder manually, but it didn't work. It's preferable to use flutter clean.
Here's a solution that worked for me.
In index.html
Change this
<base href="/">
To this
<base href="./">
Open the index.html file in your_project_name/build/web path and put this script after the body tag :
<script src="main.dart.js" type="application/javascript"></script>.
If it didn't work so maybe flutter.js is missing from the build directory so clean your project by flutter clean in the terminal then build it again
using flutter build web after that add the tag I mentioned above. Now deploy your web to the host.
You're most likely missing the flutter.js file in the build/web folder
don't know whether below code works or not. try to implement the same and revert back. please change your body tag as below
<body>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
For more than 3 days I tried to connect my web app to firestore and try to run my web app but i can't. Please help me to solve my problem and grow my start-up faster.
Showing error like this: TypeError: Cannot read properties of undefined (reading 'app')
How can I fix this problem?
My Flutter (index.html) code blew.
<!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="jaitun_admin">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>jaitun_admin</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 src="https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyDmv2oj8958mbUg07FW316IxOAiOdYhPTg",
authDomain: "jaituncustomaer.firebaseapp.com",
databaseURL: "https://jaituncustomaer-default-rtdb.firebaseio.com",
projectId: "jaituncustomaer",
storageBucket: "jaituncustomaer.appspot.com",
messagingSenderId: "771594380318",
appId: "1:771594380318:web:aa0a3b61483d19dc2bfa0f",
measurementId: "G-B064R6Q9GJ"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</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 () {
// 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>
Sol.1
On firebase init.
What do you want to use as your public directory?
use build/web instead of public for the public directory.
If it still not working...
Sol.2
Replace the base href link ($FLUTTER_BASE_HREF) in index.html with repository's location.
<base href="$FLUTTER_BASE_HREF"> to <base href="/"> or <base href="/your-repository/">
Right click and view page source to get the idea.
I've a flutter web app that'll run on the localhost perfectly but when I deploy it to firebase I get a blank page. In setting up firebase hosting I selected build/web as my public directory. I ran flutter build web which compiles the app. The build directory is created. My firebase.json file looks fine.(pos-ap/build/web for the public directory is correct)
{
"hosting": {
"public": "pos-app/build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<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="pos">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>pos</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>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxx",
databaseURL: "xxxxxxxxx",
projectId: "xxxxxx",
storageBucket: "sxxxxxxxxxx",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxxxxxxx7bc",
measurementId: "G-xxxxxxxxx"
};
// Initialize Firebase
// firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I'm not really familiar with web stuff. And apologies I can't really offer any more info. I suppose the only clue is that it works on localhost but not when deployed.
My root directory is..
|-pos-app
|-consumer-app
|-firebase.json
I'm trying to deploy pos-app which is a flutter app.