Installation banner is not showing

I have a problem. I want to develop a PWA (Progressive-Web-App) with React.js. I want to help the user and I want that the users are able to see an installion banner. For now, for IOS is everything working perfectly. But unfortunately for Android it is not working. It is everything white. Thats all.

What could be the problem for this?

App.js

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import WelcomePage from './pages/Welcome';
import InstallBanner from "./components/installation/InstallBanner";
import IosInstallInstructions from "./components/installation/IosInstallInstructions";
import NavigationBar from './components/NavigationBar'; 
import { useLocation } from 'react-router-dom';

function App() {
  const [showInstallInstructions, setShowInstallInstructions] = useState(false);

  useEffect(() => {
    const userAgent = window.navigator.userAgent;
    const isMobile = /Mobi|Android/i.test(userAgent);
    const isIosDevice = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
    const isInPwaMode = ("standalone" in window.navigator) && window.navigator.standalone;

   
    if (isMobile || isIosDevice) {
      setShowInstallInstructions(!isInPwaMode);
    } else {
      setShowInstallInstructions(false);
    }
  }, []);

  return (
    <Router>
    
      {showInstallInstructions ? (
        <InstallInstructionsOrBanner />
      ) : (
        <MainApp />
      )}
    </Router>
  );
}

const MainApp = () => {
  const location = useLocation();

  return (
    <>
      <Routes>
        <Route path="/" element={<InitialRoute />} />
      </Routes>     
    </>
  );
};

const InstallInstructionsOrBanner = () => {
  const userAgent = window.navigator.userAgent;
  const isIosDevice = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;

  if (isIosDevice) {
    return <IosInstallInstructions />;
  } else {
    return <InstallBanner />;
  }
};

export default App;

InstallBanner.js

import React, { useState, useEffect } from 'react';
import { FaFileAlt } from 'react-icons/fa'; // Importiere das Icon aus react-icons

const InstallBanner = () => {
  const [installPromptEvent, setInstallPromptEvent] = useState(null);

  useEffect(() => {
    const beforeInstallPromptHandler = (event) => {
      event.preventDefault();
      setInstallPromptEvent(event);
    };

    window.addEventListener('beforeinstallprompt', beforeInstallPromptHandler);
    return () => {
      window.removeEventListener('beforeinstallprompt', beforeInstallPromptHandler);
    };
  }, []);

  const handleInstallClick = () => {
    if (!installPromptEvent) return;

    installPromptEvent.prompt();

    installPromptEvent.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        setInstallPromptEvent(null);
      }
    });
  };

  if (!installPromptEvent) return null;

  return (
    <div className="install-banner alert alert-primary text-center">
      <h4>Installation</h4>
      <p className="mb-3">Press the button to install:</p>
      <button
        className="btn btn-primary mb-3"
        onClick={handleInstallClick}
      >
        Installieren
      </button>
      <p className="mb-0">oder</p>
      <hr />
      <p>Tap the three-dot menu Settings <FaFileAlt /> at the top right and press Add to start screen.</p>
    </div>
  );
};

export default InstallBanner;

service-worker.js

/* eslint-disable no-restricted-globals */
self.importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');

workbox.setConfig({ debug: false });

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'script' || request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate()
);

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'document',
  new workbox.strategies.NetworkFirst()
);

You need to sign in to view this answers