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.
2
Answers
I have solved the issue changing index.html as follows:
And then on main.dart, I have updated the piece of code:
try deleting [base href="/freelife/"] from the index.html file
It should stay like this.