Баннер установки не отображается ⇐ Android

[Anonymous]

У меня проблема. Я хочу разработать PWA (прогрессивное веб-приложение) с помощью React.js. Я хочу помочь пользователю и хочу, чтобы пользователи могли видеть баннер установки. На данный момент для IOS все работает отлично. Но, к сожалению, для Android это не работает. Это всё белое. Вот и все.
В чем может быть проблема?
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 (


{showInstallInstructions ? (

) : (

)}

);
}

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

return (





);
};

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

if (isIosDevice) {
return ;
} else {
return ;
}
};

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 (

Installation

Press the button to install:

Installieren

oder

Tap the three-dot menu Settings at the top right and press Add to start screen.

);
};

export default InstallBanner;

service-worker.js
/* eslint-disable no-restricted-globals */
self.importScripts('https://storage.googleapis.com/workbox- ... kbox-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()
);


Подробнее здесь: https://stackoverflow.com/questions/791 ... ot-showing