Fensterverwaltung

Eine PWA außerhalb des Browsers verwaltet ihr eigenes Fenster. Informationen zu den APIs und Funktionen zum Verwalten eines Fensters im Betriebssystem.

Wenn die App in einem eigenen Fenster ausgeführt wird, das von Ihrer PWA verwaltet wird, hat sie alle Vorteile und Verantwortlichkeiten eines Fensters in diesem Betriebssystem, z. B.:

• Die Möglichkeit, das Fenster in Betriebssystemen mit mehreren Fenstern wie Windows oder ChromeOS zu verschieben und die Größe anzupassen.
• Bildschirm mit anderen App-Fenster teilen, z. B. im Splitscreen-Modus von iPadOS oder Android
• Sie werden auf Computern in Docks, Taskbars und im Alt-Tab-Menü sowie auf Mobilgeräten in Listen für Multitasking-Fenster angezeigt.
• Sie können das Fenster minimieren, auf andere Bildschirme und Desktops verschieben und jederzeit schließen.

Fenster verschieben und Größe anpassen

Das PWA-Fenster kann auf Desktop-Betriebssystemen beliebig groß sein und an einer beliebigen Stelle auf dem Bildschirm platziert werden. Wenn der Nutzer die PWA nach der Installation zum ersten Mal öffnet, erhält sie standardmäßig eine Fenstergröße, die einem Prozentsatz des aktuellen Bildschirms entspricht. Die maximale Auflösung beträgt 1920 x 1080 Pixel und wird links oben auf dem Bildschirm angezeigt.

Der Nutzer kann das Fenster verschieben und die Größe anpassen. Der Browser merkt sich die letzte Einstellung. Wenn der Nutzer die App das nächste Mal öffnet, behält das Fenster die Größe und Position bei, die es bei der vorherigen Nutzung hatte.

Es ist nicht möglich, die bevorzugte Größe und Position Ihrer PWA im Manifest zu definieren. Sie können das Fenster nur mit der JavaScript API neu positionieren und die Größe ändern. Über den Code können Sie das PWA-Fenster mit den Funktionen moveTo(x, y) und resizeTo(x, y) des window-Objekts verschieben und die Größe ändern.

Sie können das PWA-Fenster beispielsweise beim Laden der PWA mit folgenden Methoden anpassen und verschieben:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

Sie können die aktuelle Bildschirmgröße und -position mit dem window.screen-Objekt abfragen. Mit dem Ereignis resize des window-Objekts können Sie erkennen, wann die Größe des Fensters geändert wird. Es gibt kein Ereignis, mit dem sich das Verschieben des Fensters erfassen lässt. Sie können also nur die Position häufig abfragen.

Anstatt das Fenster absolut zu verschieben und die Größe absolut zu ändern, können Sie es mit moveBy() und resizeBy() relativ verschieben und die Größe relativ ändern.

Hinweis: Wenn Sie das Fenster auf einem Mobilgerät verschieben oder die Größe ändern, werden keine Änderungen auf dem Bildschirm vorgenommen.

Andere Websites aufrufen

Wenn Sie den Nutzer zu einer externen Website weiterleiten möchten, die nicht in den Zuständigkeitsbereich Ihrer PWA fällt, können Sie dies mit einem standardmäßigen <a href>-HTML-Element tun. Verwende location.href oder öffne auf kompatiblen Plattformen ein neues Fenster.

Wenn Sie eine URL aufrufen, die nicht in den Umfang Ihres Manifests fällt, rendert die Browser-Engine Ihrer PWA einen In-App-Browser im Kontext Ihres Fensters.

Zu den Funktionen der In-App-Browser gehören:

• Sie werden über Ihren Inhalten angezeigt.
• Sie haben eine statische Adressleiste, in der der aktuelle Ursprung, der Titel des Fensters und ein Menü angezeigt werden. Normalerweise haben sie das gleiche Design wie die theme_color Ihres Manifests.
• Über das Kontextmenü können Sie diese URL im Browser öffnen.
• Nutzer können den Browser schließen oder zurückgehen.

Solange der In-App-Browser auf dem Bildschirm angezeigt wird, wartet Ihre PWA im Hintergrund, als würde sie von einem anderen Fenster verdeckt.

Hinweis: Unter iOS und iPadOS verwendet der In-App-Browser SafariViewController, eine Safari-Rendering-Engine, die vom PWA-Speicher getrennt ist. Wenn der Nutzer also eine Sitzung in Safari hat, wird sie nicht in Ihrer PWA angezeigt, sondern in einem In-App-Browser in Ihrer PWA.

Ein In-App-Browser auf einem iPhone, wenn eine URL aufgerufen wird, die nicht in den Geltungsbereich einer eigenständigen PWA fällt.

Ein In-App-Browser auf Android-Geräten, wenn eine URL aufgerufen wird, die nicht in den Geltungsbereich einer eigenständigen PWA fällt.

Autorisierungsabläufe

Bei vielen Webauthentifizierungs- und Autorisierungsabläufen muss der Nutzer zu einer anderen URL mit einem anderen Ursprung weitergeleitet werden, um ein Token zu erhalten, das an den Ursprung Ihrer PWA zurückgegeben wird, z. B. bei OAuth 2.0.

In diesen Fällen folgt der In-App-Browser diesem Prozess:

1. Der Nutzer öffnet Ihre PWA und klickt auf „Anmelden“.
2. Ihre PWA leitet den Nutzer auf eine URL weiter, die nicht zum Umfang der PWA gehört, sodass das Rendering-Engine einen In-App-Browser in Ihrer PWA öffnet.
3. Der Nutzer kann den In-App-Browser jederzeit schließen und zu Ihrer PWA zurückkehren.
4. Der Nutzer meldet sich im In-App-Browser an. Der Authentifizierungsserver leitet den Nutzer an den PWA-Ursprung weiter und sendet das Token als Argument.
5. Der In-App-Browser wird geschlossen, wenn eine URL erkannt wird, die zum Umfang der PWA gehört.
6. Die Engine leitet die Navigation im Hauptfenster der PWA an die URL weiter, auf die der Authentifizierungsserver im In-App-Browser zugegriffen hat.
7. Ihre PWA ruft das Token ab, speichert es und rendert die PWA.

Browsernavigation erzwingen

Wenn Sie den Browser mit einer URL und nicht mit einem In-App-Browser öffnen möchten, können Sie das Ziel _blank von <a href>-Elementen verwenden. Das funktioniert nur auf Desktop-PWAs. Auf Mobilgeräten gibt es keine Möglichkeit, einen Browser mit einer URL zu öffnen.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Neue Fenster öffnen

Auf dem Computer können Nutzer mehrere Fenster derselben PWA öffnen. Jedes Fenster hat eine andere Navigation für dieselbe start_url, als würden Sie zwei Browsertabs mit derselben URL öffnen. Im Menü der PWA können Nutzer Datei und dann Neues Fenster auswählen. Über den PWA-Code können Sie mit der Funktion open() ein neues Fenster öffnen.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

Wenn Sie open() in einem PWA-Fenster auf iOS oder iPadOS aufrufen, wird null zurückgegeben und kein Fenster geöffnet. Wenn Sie auf Android-Geräten neue Fenster öffnen, wird ein neuer In-App-Browser für die URL erstellt, auch wenn die URL in den Geltungsbereich Ihrer PWA fällt, was normalerweise nicht zu einem externen Browser führt.

Achtung :Das zweite Argument von open() ist der Name des Fensters. Wenn Sie immer ein neues Fenster öffnen möchten, müssen Sie unterschiedliche Stringwerte für einen Namen verwenden.

Tipp :Die Funktionen open(), moveTo() und resizeTo() funktionieren auch ohne das Präfix window., da window. ein globales JavaScript-Objekt ist. Sie können stattdessen moveTo(0, 0) anrufen, was möglicherweise verständlicher ist.

Fenstertitel

Das <title>-Element wurde hauptsächlich zu SEO-Zwecken verwendet, da der Platz auf einem Browsertab begrenzt ist. Wenn Sie in einer PWA vom Browser zum Fenster wechseln, steht Ihnen der gesamte Platz in der Titelleiste zur Verfügung.

Sie können den Inhalt der Titelleiste definieren:

• Statisch im HTML-<title>-Element
• Die Stringeigenschaft document.title kann jederzeit dynamisch geändert werden.

Bei Desktop-PWAs ist der Titel unerlässlich. Er wird in der Titelleiste des Fensters und manchmal im Task-Manager oder in der Auswahl für mehrere Aufgaben verwendet. Wenn Sie eine Single-Page-Anwendung haben, sollten Sie den Titel auf jeder Route aktualisieren.

Hinweis: Um Phishing zu reduzieren, enthalten einige Desktop-Browser möglicherweise zusätzliche Maßnahmen im Fenstertitel. Wenn Sie beispielsweise den Namen Ihrer App nicht im Titel verwenden, fügt der Browser möglicherweise ein Präfix mit dem Namen Ihrer PWA hinzu. Bei anderen Browsern wird der aktuelle Ursprung möglicherweise einige Sekunden lang in der Titelleiste gerendert, wenn Sie den Titel ändern, um hervorzuheben, wo der Nutzer navigiert ist.

Tab-Modus

Der Tab-Modus ist eine experimentelle Funktion, mit der Ihre PWA ein tabbasiertes Design haben kann, ähnlich wie ein Webbrowser. In diesem Fall kann der Nutzer mehrere Tabs in derselben PWA öffnen, die aber alle im selben Betriebssystemfenster verknüpft sind.

Weitere Informationen zu dieser experimentellen Funktion finden Sie unter Tab-Modus für PWAs.

Hinweis: Weitere Informationen zu experimentellen Funktionen finden Sie im Kapitel zu experimentellen Funktionen.

Overlay für Fenstersteuerelemente

Wie bereits erwähnt, können Sie den Titel des Fensters ändern, indem Sie den Wert des <title>-Elements oder der document.title-Property definieren. Es ist jedoch immer ein Stringwert. Was wäre, wenn wir die Titelleiste mit HTML, CSS und Bildern gestalten könnten? Das Fensterkontroll-Overlay, eine experimentelle Funktion in Microsoft Edge und Google Chrome für Desktop-PWAs, kann hilfreich sein.

Hinweis :Mit den Funktionen für den Tab-Modus und die Fenstersteuerung werden neue Werte für das display-Element des Manifests definiert. Um für die Kompatibilität mit allen Geräten zu sorgen, kannst du in der Manifestgruppe die display-Fallback-Kette ersetzen. So kannst du angeben, welcher display-Wert verwendet werden soll, wenn die erste Option nicht verfügbar ist. Weitere Informationen zu Anzeigemodi

Weitere Informationen zu dieser Funktion finden Sie unter Hier finden Sie weitere Informationen zum Anpassen des Overlays für Fenstersteuerelemente der Titelleiste Ihrer PWA.

Fensterverwaltung

Bei mehreren Bildschirmen möchten Nutzer den gesamten verfügbaren Platz nutzen. Beispiel:

• In Grafikeditoren mit mehreren Fenstern wie Gimp können verschiedene Bearbeitungstools in genau positionierten Fenstern platziert werden.
• Virtuelle Trading Desks können Markttrends in mehreren Fenstern anzeigen, die alle im Vollbildmodus geöffnet werden können.
• Mit einer Diashow-App können Sie die Vortragsnotizen auf dem internen Hauptbildschirm und die Präsentation auf einem externen Projektor anzeigen.

Mit der Window Management API können PWAs genau das und noch mehr tun.

Bildschirmdetails abrufen

Die Window Management API enthält die neue Methode window.getScreenDetails(), die ein Objekt mit Bildschirmen als unveränderliches Array angeschlossener Bildschirme zurückgibt. Außerdem gibt es ein Liveobjekt, auf das über ScreenDetails.currentScreen zugegriffen werden kann und das dem aktuellen window.screen entspricht.

Hinweis: In einigen Browsern muss der Nutzer beim Aufrufen von window.getScreenDetails() Ihren PWAs die Berechtigung erteilen.

Das zurückgegebene Objekt löst auch ein screenschange-Ereignis aus, wenn sich das screens-Array ändert. Das passiert nicht, wenn Attribute auf einzelnen Bildschirmen geändert werden. Einzelne Bildschirme, entweder window.screen oder ein Bildschirm im screens-Array, lösen auch ein change-Ereignis aus, wenn sich ihre Attribute ändern.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Wenn der Nutzer oder das Betriebssystem das Fenster Ihrer PWA von einem Bildschirm auf einen anderen verschiebt, wird auch ein currentscreenchange-Ereignis vom Objekt „screen_details“ ausgelöst.

Hinweis: Mit der Presentation API können Sie Webinhalte auf Geräten wie Projektoren und netzwerkverbundenen Fernsehern anzeigen.

Display-Wakelock

Stellen Sie sich Folgendes vor: Sie stehen in der Küche und folgen einem Rezept auf Ihrem Tablet. Sie haben gerade die Zutaten vorbereitet. Ihre Hände sind schmutzig und Sie kehren zu Ihrem Gerät zurück, um den nächsten Schritt zu lesen. Was für eine Katastrophe! Das Display ist schwarz geworden. Mit der Screen Wake Lock API können Sie verhindern, dass Displays gedimmt, in den Ruhemodus versetzt oder gesperrt werden. So können Nutzer die App jederzeit beenden, starten, verlassen und wieder zurückkehren.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Bildschirmtastatur

Touchbasierte Geräte wie Smartphones und Tablets bieten eine virtuelle Tastatur auf dem Bildschirm, damit Nutzer tippen können, wenn Formularelemente Ihrer PWA den Fokus haben.

Mit der VirtualKeyboard API kann Ihre PWA auf kompatiblen Plattformen über die navigator.virtualKeyboard-Benutzeroberfläche die Tastatur besser steuern.

• Sie können die Bildschirmtastatur mit navigator.virtualKeyboard.show() und navigator.virtualKeyboard.hide() ein- und ausblenden.
• Sie können dem Browser mitteilen, dass Sie die virtuelle Tastatur selbst schließen, indem Sie navigator.virtualKeyboard.overlaysContent auf true setzen.
• Mit dem Ereignis geometrychange können Sie feststellen, wann die Tastatur angezeigt und ausgeblendet wird.
• Legen Sie die Richtlinie für die virtuelle Tastatur beim Bearbeiten von Hostelementen fest, indem Sie contenteditable mit dem HTML-Attribut virtualkeyboardpolicy auf auto oder manual setzen. Mit einer Richtlinie können Sie festlegen, ob die virtuelle Tastatur automatisch vom Browser (auto) oder von Ihrem Script (manual) verwaltet werden soll.
• Mit CSS-Umgebungsvariablen wie keyboard-inset-height und keyboard-inset-top können Sie Informationen zum Erscheinungsbild der virtuellen Tastatur abrufen.

Weitere Informationen zu dieser API finden Sie unter Vollständige Kontrolle mit der VirtualKeyboard API.