Fensterverwaltung

Eine PWA außerhalb des Browsers verwaltet ihr eigenes Fenster. In diesem Kapitel erfahren Sie mehr über die APIs und Funktionen zum Verwalten eines Fensters im Betriebssystem.

Das PWA-Fenster

Wenn Sie ein eigenes Fenster verwenden, das von Ihrer PWA verwaltet wird, haben Sie alle Vorteile und Verantwortlichkeiten eines Fensters in diesem Betriebssystem, z. B.:

• Die Möglichkeit, das Fenster unter Betriebssystemen mit mehreren Fenstern wie Windows oder ChromeOS zu vergrößern und zu verschieben.
• 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 in Listen für Multitasking-Fenster auf Mobilgeräten angezeigt.
• Sie können das Fenster minimieren, auf andere Bildschirme und Desktops verschieben und jederzeit schließen.

Fenster verschieben und Größe ändern

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, wird ihr standardmäßig ein Fenster mit einem Prozentsatz des aktuellen Bildschirms zugewiesen. Die maximale Auflösung beträgt 1920 x 1080 Pixel und das Fenster 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, sodass das Fenster beim nächsten Öffnen der App die Größe und Position der vorherigen Nutzung beibehält.

Die bevorzugte Größe und Position Ihrer PWA kann nicht im Manifest definiert werden. 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 vergrößern 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.

Hinweis : 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 : Auf Mobilgeräten werden durch das Verschieben oder Ändern der Größe des Fensters keine Änderungen auf dem Bildschirm vorgenommen.

Andere Websites aufrufen

Wenn Sie den Nutzer zu einer externen Website weiterleiten möchten, die nicht zum Umfang Ihrer PWA gehört, können Sie dies mit einem standardmäßigen <a href>-HTML-Element, mit location.href oder durch Öffnen eines neuen Fensters auf kompatiblen Plattformen tun.

Wenn Ihre PWA installiert ist, wird derzeit in allen Browsern, wenn Sie eine URL aufrufen, die nicht zum Umfang Ihres Manifests gehört, von der Browser-Engine Ihrer PWA ein In-App-Browser im Kontext Ihres Fensters gerendert.

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

• Sie werden über Ihren Inhalten angezeigt.
• Sie haben eine statische URL-Leiste, 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.

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

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.

Autorisierungsabläufe

Bei vielen Webauthentifizierungs- und Autorisierungsabläufen wird der Nutzer zu einer anderen URL an einem anderen Ursprung weitergeleitet, um ein Token zu erhalten, das zum Ursprung Ihrer PWA zurückgegeben wird. Dies ist beispielsweise bei OAuth 2.0 der Fall.

In diesen Fällen folgt der In-App-Browser dem folgenden Verfahren:

1. Der Nutzer öffnet Ihre PWA und klickt auf „Anmelden“.
2. Ihre PWA leitet den Nutzer zu einer URL weiter, die nicht zum Umfang der PWA gehört. Dadurch öffnet das Rendering-Engine einen In-App-Browser in Ihrer PWA.
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.

Navigation des Browsers erzwingen

Wenn Sie den Browser mit einer URL und nicht mit einem In-App-Browser öffnen möchten, können Sie das _blank-Ziel 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 führt zu einer anderen Navigation zu derselben start_url, als würden Sie zwei Browsertabs mit derselben URL öffnen. Über das Menü in der PWA können Nutzer „Datei“ und dann „Neues Fenster“ auswählen. Über den PWA-Code können Sie ein neues Fenster mit der Funktion open() öffnen. Weitere Informationen finden Sie in der Dokumentation.

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 es wird 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. Das löst in der Regel kein externes Surfen aus.

Warnung : Das zweite Argument von open() ist der Name des Fensters. Wenn der von Ihnen verwendete Name bereits geöffnet ist, ersetzt die Suchmaschine das geöffnete Fenster mit diesem Namen durch eine neue Navigation. Wenn Sie immer ein neues Fenster öffnen möchten, müssen Sie unterschiedliche Stringwerte für einen Namen verwenden.

Bei den Funktionen open(), moveTo() und resizeTo() ist beim Schreiben von JavaScript kein Präfix window. erforderlich, da window das globale Objekt ist. Sie können einfach moveTo(0, 0) anrufen. Durch das Aufrufen von window.moveTo(0, 0) wird der Code jedoch verständlicher.

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 für jede Route aktualisieren.

Hinweis : Um Phishing in PWAs zu reduzieren, haben einige Desktop-Browser möglicherweise zusätzliche Maßnahmen für den 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. In 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 hat.

Tab-Modus

Mit einer experimentellen Funktion, dem sogenannten Tab-Modus, können Sie Ihrer PWA ein tabbasiertes Design ähnlich wie bei einem Webbrowser geben. In diesem Fall kann der Nutzer mehrere Tabs aus derselben PWA öffnen, die aber alle im selben Betriebssystemfenster verknüpft sind, wie im folgenden Video zu sehen:

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

Hinweis : Im Kapitel zu experimentellen Funktionen erfahren Sie, wie Sie diese nutzen können.

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 nach Belieben mit HTML, CSS und Bildern gestalten könnten? Hier kommt das Fensterkontroll-Overlay ins Spiel, eine neue experimentelle Funktion in Microsoft Edge und Google Chrome für Desktop-PWAs.

Hinweis : Mit den Overlay-Funktionen für den Tab-Modus und die Fenstersteuerung werden neue Werte für das display-Element des Manifests definiert. Um die Kompatibilität mit allen Geräten zu ermöglichen, hat die Manifest-Gruppe eine Möglichkeit zum Ersetzen der display-Fallback-Kette entwickelt. So können Sie angeben, welcher display-Wert verwendet werden soll, wenn die erste Option nicht verfügbar ist. Weitere Informationen finden Sie unter Auf die Displaymodi der Zukunft vorbereiten.

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:

• Mit 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.

In einigen Browsern muss der Nutzer beim Aufrufen von window.getScreenDetails() Berechtigungen für Ihre PWAs 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 „Bildschirmdetails“ ausgelöst.

Hinweis : Sie können auch die Presentation API verwenden, um Webinhalte auf großen Präsentationsgeräten wie Projektoren und netzwerkverbundenen Fernsehern anzuzeigen.

Browser Support

• 47
• 79
• x
• x

Source

Display-Wakelock

Stellen Sie sich 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. 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 Bildschirmtastatur, damit Nutzer tippen können, wenn Formularelemente Ihrer PWA im Fokus sind.

Dank der VirtualKeyboard API kann Ihre PWA jetzt auf kompatiblen Plattformen über die navigator.virtualKeyboard-Benutzeroberfläche mehr Kontrolle über die Tastatur haben, z. B.:

• Die Bildschirmtastatur mit den Funktionen navigator.virtualKeyboard.show() und navigator.virtualKeyboard.hide() ein- und ausblenden
• Sie teilen dem Browser mit, dass Sie die virtuelle Tastatur selbst schließen, indem Sie navigator.virtualKeyboard.overlaysContent auf true setzen.
• Sie wissen, wann die Tastatur mit dem Ereignis geometrychange von navigator.virtualKeyboard angezeigt und ausgeblendet wird.
• Festlegen der Richtlinie für die virtuelle Tastatur beim Bearbeiten von Hostelementen (mit contenteditable) mit dem HTML-Attribut virtualkeyboardpolicy Mit einer Richtlinie können Sie festlegen, ob die virtuelle Tastatur automatisch vom Browser mit dem Wert auto oder von Ihrem Script mit dem Wert manual verarbeitet werden soll.
• Verwendung von CSS-Umgebungsvariablen, um Informationen zur Darstellung der virtuellen Tastatur abzurufen, z. B. keyboard-inset-height und keyboard-inset-top.

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

Ressourcen

• Mehrere Displays mit der Window Management API verwalten
• MDN: Window Management API
• Tab-Modus für PWAs
• Mit der Screen Wake Lock API aktiv bleiben
• Vollständige Kontrolle mit der VirtualKeyboard API
• Overlay für Fenstersteuerelemente der Titelleiste Ihrer PWA anpassen
• Inhalte in der Titelleiste anzeigen