1

So I went through the whole firebase init process and a public folder was created with an index.html which I deleted and changed the firebase.json to match my index.html inside the flutter web folder. When I open the app it is a blank page but the flutter favicon and when I open dev tools is shows the correct index.html. I read a couple of posts that didn't exactly do the trick or executed their solutions poorly. Either way due to the first post I tried deploying with

<base href="$FLUTTER_BASE_HREF>
<base href="https://project_name.firebaseapp.com/">
<base href="https://project_name.web.app/">
<base href="/">
no href 

and as for the second post, I swapped the to before the service worker script

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn4vWGi9uYUW6nDLFm_mJ9m6ipkkKpyJg"></script>

Here's my index.html file

<!DOCTYPE html>
<html>
<head>
<!--base href="$FLUTTER_BASE_HREF"-->
<base href="https://project-name.firebaseapp.com/">


<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="app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>

<title>app</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 -->

<!-- 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-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 src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-performance.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>
<!--<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase.js"></script>-->

<script>
    const firebaseConfig = {
    apiKey: ":]",
    authDomain: "project-name.firebaseapp.com",
    projectId: "project-name",
    storageBucket: "project-name.appspot.com",
    messagingSenderId: ":]",
    appId: ":]",
    measurementId: ":]"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn4vWGi9uYUW6nDLFm_mJ9m6ipkkKpyJg"></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>

and firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "app/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

and my website my website

LINKS Here:

https://groups.google.com/g/flutter-dev/c/1U9HnWlG4q4

Flutter web app is returning blank page after being deployed to firebase hosting

Any help is appreciated, and thank you for taking the time to do so!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.