Fensterverwaltung

Eine PWA außerhalb des Browsers verwaltet ihr eigenes Fenster. In diesem Kapitel werden die APIs und Funktionen zum Verwalten eines Fensters innerhalb des Betriebssystems beschrieben.

Das PWA-Fenster

Die Ausführung in Ihrem eigenen Fenster, das von Ihrer PWA verwaltet wird, bietet alle Vorteile und Verantwortlichkeiten jedes 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
  • Erscheint in Docks, Taskleisten und im Alt-Tab-Menü auf Computern und in Multitask-Fensterlisten auf Mobilgeräten.
  • Sie können das Fenster minimieren, auf andere Bildschirme und Desktops verschieben und jederzeit schließen.

Fenster verschieben und Größe ändern

Bei Desktop-Betriebssystemen kann das PWA-Fenster beliebig groß sein und überall auf dem Bildschirm positioniert werden. Wenn der Nutzer die PWA nach der Installation zum ersten Mal öffnet, erhält die PWA standardmäßig eine Fenstergröße für einen Prozentsatz des aktuellen Bildschirms. Die maximale Auflösung beträgt 1920 × 1080 links oben auf dem Bildschirm.

Der Nutzer kann das Fenster verschieben und seine Größe anpassen. Der Browser speichert die letzte Einstellung. Wenn der Nutzer die App das nächste Mal öffnet, behält das Fenster also die Größe und Position der vorherigen Verwendung bei.

Es gibt keine Möglichkeit, die bevorzugte Größe und Position Ihrer PWA im Manifest festzulegen. Sie können das Fenster nur mit der JavaScript API neu positionieren und die Größe ändern. Über den Code können Sie Ihr eigenes PWA-Fenster mit den Funktionen moveTo(x, y) und resizeTo(x, y) des window-Objekts verschieben und seine Größe anpassen.

So können Sie beispielsweise die Größe und das Verschieben des PWA-Fensters beim Laden der PWA ändern:

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 resize-Ereignis aus dem window-Objekt lässt sich feststellen, wann die Größe des Fensters angepasst 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.

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 und Sie eine URL aufrufen, die nicht im Gültigkeitsbereich Ihres Manifests liegt, rendert die Browser-Engine Ihrer PWA derzeit in allen Browsern einen In-App-Browser im Kontext des Fensters.

Einige Funktionen der In-App-Browser:

  • Sie werden über Ihren Inhalten angezeigt.
  • Sie haben eine statische URL-Leiste mit dem aktuellen Ursprung, dem Fenstertitel und einem Menü. In der Regel sind sie an die theme_color deines Manifests angepasst.
  • Über das Kontextmenü können Sie diese URL im Browser öffnen.
  • Nutzer können den Browser schließen oder zurückgehen.

Ein In-App-Browser in einer Desktop-PWA, wenn eine URL aufgerufen wird, die nicht in den Geltungsbereich fällt.

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 wird der Nutzer zu einer anderen URL in 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. Die 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. Dies funktioniert nur bei Desktop-PWAs. Auf Mobilgeräten gibt es keine Option, 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 über eine andere Navigation zur selben start_url, als ob du zwei Browsertabs mit derselben URL öffnest. Ü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");
}

Dieselbe installierte PWA mit mehreren geöffneten Fenstern auf einem Desktop-Betriebssystem.

Wenn open() innerhalb eines PWA-Fensters unter iOS oder iPadOS aufgerufen wird, 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. Dies löst in der Regel keine externe Browseransicht aus.

Fenstertitel

Das <title>-Element wurde hauptsächlich für SEO-Zwecke 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-Element <title>.
  • 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.

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 zusammengeführt werden, wie im folgenden Video zu sehen:

Weitere Informationen zu dieser experimentellen Funktion finden Sie unter Anwendungsmodus mit Tabs für PWA.

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 Wunsch 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 PWAs auf dem Computer.

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

Mit dem Overlay für Fenstersteuerelemente können Sie Inhalte in der Titelleiste rendern.

Fensterverwaltung

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

  • Grafikprogramme mit mehreren Fenstern wie Gimp können verschiedene Bearbeitungstools in genau positionierten Fenstern platzieren.
  • Virtuelle Handelsplattformen können Markttrends in mehreren Fenstern anzeigen, wobei jedes davon im Vollbildmodus angezeigt werden kann.
  • Mit Diashow-Apps können Vortragsnotizen auf dem internen Hauptbildschirm und die Präsentation auf einem externen Projektor angezeigt werden.

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.

Das zurückgegebene Objekt löst auch ein screenschange-Ereignis aus, wenn sich das screens-Array ändert. Dies geschieht 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.

Display-Wakelock

Stellen Sie sich Folgendes vor: Sie sind 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 Bildschirme 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

Touchscreen-Geräte wie Smartphones und Tablets bieten eine virtuelle Bildschirmtastatur, über die der Nutzer Text eingeben kann, wenn Formularelemente Ihrer PWA im Fokus sind.

Dank der VirtualKeyboard API kann Ihre PWA jetzt auf kompatiblen Plattformen über die navigator.virtualKeyboard-Oberflä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.
  • CSS-Umgebungsvariablen verwenden, um Informationen zur Darstellung der Bildschirmtastatur 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