Erstellen Sie eine eigenständige App
Progressive Web Apps (PWAs), die auf dem Gerät eines Nutzers installiert sind, können definieren, wie sie beim Start angezeigt werden. Sie können sich dafür entscheiden, in einem Webbrowser angezeigt zu werden, genau wie Websites, oder ihre eigenen dedizierten Fenster zu haben, ähnlich wie es bei nativen OS-Anwendungen der Fall ist.
Benutzer haben in der Regel spezifische Erwartungen daran, wie installierte Anwendungen auf ihren Geräten funktionieren. Eine dieser Erwartungen ist, dass Anwendungen ihre eigenen dedizierten Fenster haben.
Indem Sie das display
-Element des Web-App-Manifests verwenden, können Sie definieren, ob die installierte PWA in einem Browser angezeigt oder ein eigenes dediziertes Fenster hat, wenn die PWA vom Gerät des Nutzers aus gestartet wird.
Verwenden Sie den Standalone-Anzeigemodus
Um einen Standalone-Anzeigemodus zu verwenden und Ihrer PWA ein eigenes dediziertes Fenster zu geben, fügen Sie das display
-Element zu Ihrem Web-App-Manifest hinzu und setzen Sie seinen Wert auf standalone
:
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "48x48",
"type": "image/webp"
}
],
"display": "standalone"
}
Beachten Sie, dass es andere Anzeigemodi gibt, wie browser
, minimal-ui
und fullscreen
. Der gewählte Anzeigemodus ändert, wie viel von der Browser-Benutzeroberfläche dem Nutzer gezeigt wird, von der vollständigen Anzeige bis hin zu einem eigenen dedizierten Fenster. Um mehr über alle verfügbaren Anzeigemodi und ihre Rückfalleigenschaften zu erfahren, sehen Sie sich die Dokumentation über das display
-Element an.
Beste Praktiken
Umgang mit Mehrseiten-Navigation
Wenn Ihre Anwendung aus mehreren navigierbaren HTML-Seiten besteht, stellen Sie sicher, dass Benutzeroberflächenelemente vorhanden sind, um die Navigation innerhalb Ihrer Anwendung zu steuern.
Wenn Sie keine eigenen Navigationselemente haben, verwenden Sie den minimal-ui
-Anzeigemodus, um sicherzustellen, dass Benutzer dennoch zwischen Seiten mit den im Titelbereich Ihrer App angezeigten Vorwärts- und Rückwärts-Buttons des Browsers navigieren können.
Passen Sie Ihre App abhängig vom Anzeigemodus an
Wenn Sie einen anderen Anzeigemodus als browser
in Ihrem Web-App-Manifest definieren, gilt dieser nur, wenn die Anwendung installiert ist. Wie jede andere Webseite hat das display
-Element eines Manifests keine Wirkung, wenn die PWA nicht installiert ist. Sie können den Anzeigemodus zur Laufzeit überprüfen, um festzustellen, ob die App installiert ist oder nicht.
Mithilfe der CSS-display-mode
-Medienfunktion oder der JavaScript-Funktion Window.matchMedia()
können Sie basierend auf dem Anzeigemodus selektiv CSS-Stile anwenden oder JavaScript-Code in Ihrer App ausführen.
Hier ist ein Beispiel, das zeigt, wie man die @media
-CSS-Anweisung verwendet, um ein Element auf einer Webseite nur dann sichtbar zu machen, wenn der standalone
-Anzeigemodus aktiviert ist:
.app-button {
display: none;
}
@media (display-mode: standalone) {
.app-button {
display: block;
}
}
In diesem Beispiel wird das .app-button
-Element standardmäßig ausgeblendet, es sei denn, der Anzeigemodus ist auf standalone
gesetzt, was eintritt, wenn das display
-Element im Manifest auf standalone
eingestellt wurde und die App auf dem Gerät des Benutzers installiert ist.
Hier ist ein weiteres Beispiel, das zeigt, wie die Methode window.matchMedia()
verwendet wird, um zu erkennen, ob der standalone
-Anzeigemodus aktiviert ist:
function isStandaloneApp() {
return window.matchMedia("(display-mode: standalone)").matches;
}
Siehe auch
- Web-App-Manifeste.
- Anzeigemodi.
- Passen Sie die Titelleiste Ihrer App auf Desktop-Betriebssystemen mithilfe der Window Controls Overlay API an.