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 ausführen, das von Ihrer PWA verwaltet wird, haben Sie alle Vorteile und Verantwortlichkeiten eines anderen Fensters in diesem Betriebssystem, z. B.:

• Die Möglichkeit, Fenster in Mehrfenster-Betriebssystemen wie Windows oder ChromeOS zu verschieben und ihre Größe anzupassen
• Sie können den Bildschirm mit anderen App-Fenstern teilen, z. B. im Split-Modus von iPadOS oder im Splitscreen-Modus unter Android.
• Werden in Docks, Taskleisten und im Alt-Tab-Menü auf Computern und in Multi-Task-Fensterlisten auf Mobilgeräten angezeigt.
• Die Möglichkeit, das Fenster zu minimieren, zwischen Bildschirmen und Desktops zu verschieben und es jederzeit zu schließen

Fenster verschieben und seine Größe anpassen

Bei Desktop-Betriebssystemen kann das PWA-Fenster beliebig groß sein und an einer beliebigen Stelle auf dem Bildschirm positioniert werden. Wenn der Nutzer die PWA nach der Installation zum ersten Mal öffnet, erhält sie standardmäßig eine Standardfenstergröße von einem Prozentsatz des aktuellen Bildschirms mit einer maximalen Auflösung von 1920 × 1080, die oben links auf dem Bildschirm positioniert ist.

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

Es ist nicht möglich, die bevorzugte Größe und Position Ihrer PWA im Manifest zu definieren. Sie können die Position und Größe des Fensters nur mit der JavaScript API neu positionieren. Mit den Funktionen moveTo(x, y) und resizeTo(x, y) des window-Objekts können Sie Ihr eigenes PWA-Fenster aus Ihrem Code verschieben und seine Größe anpassen.

So können Sie beispielsweise die Größe des PWA-Fensters anpassen und es verschieben, wenn die PWA geladen wird. Verwenden Sie dazu Folgendes:

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);
   }
});

Du kannst die aktuelle Bildschirmgröße und -position mit dem window.screen-Objekt abfragen. Mithilfe des resize-Ereignisses aus dem window-Objekt lässt sich erkennen, wann die Größe des Fensters geändert wird. Es gibt kein Ereignis zum Erfassen der Fensterverschiebung, daher sollten Sie die Position häufig abfragen.

Hinweis: Anstatt das Fenster zu verschieben und seine Größe zu ändern, können Sie es auch mit moveBy() und resizeBy() relativ verschieben und seine Größe anpassen.

Hinweis : Auf Mobilgeräten wirkt sich das Verschieben oder Ändern der Fenstergröße nicht auf den Bildschirm aus.

Andere Websites aufrufen

Wenn Sie Nutzer auf eine externe Website weiterleiten möchten, die nicht in Ihrer PWA enthalten ist, können Sie ein standardmäßiges <a href>-HTML-Element verwenden oder location.href verwenden oder auf kompatiblen Plattformen ein neues Fenster öffnen.

Wenn Ihre PWA installiert ist und Sie eine URL aufrufen, die nicht in Ihrem Manifest enthalten ist, rendert die Browser-Engine Ihrer PWA derzeit in allen Browsern einen In-App-Browser im Kontext des Fensters.

Einige Funktionen der In-App-Browser sind:

• Sie werden über deinen Inhalten eingeblendet.
• Sie haben eine statische URL-Leiste, die den aktuellen Ursprung, den Titel des Fensters und ein Menü anzeigt. Normalerweise sind sie mit dem theme_color deines Manifests gestaltet.
• Über das Kontextmenü können Sie diese URL im Browser öffnen.
• Nutzer können den Browser schließen oder zur vorherigen Seite zurückkehren.

Hinweis : Während der In-App-Browser auf dem Bildschirm angezeigt wird, wartet Ihre PWA im Hintergrund, als ob sie von einem anderen Fenster verdeckt wird.

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 diese nicht in Ihrer PWA angezeigt, wohl aber in einem In-App-Browser innerhalb Ihrer PWA.

Autorisierungsabläufe

Bei vielen Webauthentifizierungs- und Autorisierungsabläufen werden Nutzer zu einer anderen URL an einem anderen Ursprung weitergeleitet, um ein Token zu erhalten, das zum Ursprung Ihrer PWA zurückkehrt, z. B. über OAuth 2.0.

In diesen Fällen geht der In-App-Browser so vor:

1. Der Nutzer öffnet Ihre PWA und klickt auf „Anmelden“.
2. Ihre PWA leitet den Nutzer zu einer URL weiter, die nicht in den Bereich der PWA fällt, sodass die Rendering-Engine einen In-App-Browser innerhalb Ihrer PWA öffnet.
3. Der Nutzer kann jederzeit den In-App-Browser schließen und zu Ihrer PWA zurückkehren.
4. Der Nutzer meldet sich im In-App-Browser an. Der Authentifizierungsserver leitet den Nutzer zum Ursprung der PWA weiter und sendet das Token als Argument.
5. Der In-App-Browser schließt sich selbst, wenn eine URL erkannt wird, die Teil der PWA ist.
6. Die Engine leitet die Navigation des PWA-Hauptfensters an die URL weiter, die der Authentifizierungsserver im In-App-Browser aufgerufen hat.
7. Ihre PWA ruft das Token ab, speichert es und rendert es.

Navigation eines Browsers erzwingen

Wenn du das Öffnen des Browsers mit einer URL und nicht mit einem In-App-Browser erzwingen möchtest, kannst du 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 ist eine andere Navigation zur selben start_url, als ob zwei Browsertabs mit derselben URL geöffnet würden. Nutzer können im Menü der PWA „Datei“ und dann „Neues Fenster“ auswählen. Über Ihren PWA-Code können Sie dann 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-Geräten aufrufen, wird null zurückgegeben und kein Fenster geöffnet. Beim Öffnen neuer Fenster auf Android-Geräten wird für die URL ein neuer In-App-Browser erstellt, der normalerweise keinen externen Browser auslöst, selbst wenn die URL in den Bereich Ihrer PWA fällt.

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 durch diesen Namen durch eine neue Navigation. Wenn Sie immer ein neues Fenster öffnen möchten, müssen Sie andere Stringwerte für den Namen verwenden.

Die Funktionen open(), moveTo() und resizeTo() benötigen beim Schreiben von JavaScript nicht das Präfix window., da window das globale Objekt ist. Du kannst einfach moveTo(0, 0) anrufen. Durch das Aufrufen von window.moveTo(0, 0) wird der Code jedoch leichter verständlich.

Fenstertitel

Das <title>-Element wurde in erster Linie für SEO-Zwecke verwendet, da der Platz innerhalb eines Browsertabs begrenzt ist. Wenn Sie in einer PWA vom Browser zu Ihrem Fenster wechseln, haben Sie Zugriff auf den gesamten Bereich der Titelleiste.

Sie können den Inhalt der Titelleiste definieren:

• Statisch im HTML-<title>-Element
• Die Eigenschaft document.title des Strings 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 Multitasking-Auswahl verwendet. Wenn Sie eine Single-Page-Anwendung haben, können Sie den Titel für jede Route aktualisieren.

Hinweis : Um Phishing in PWAs zu verhindern, haben einige Desktop-Browser möglicherweise zusätzliche Maßnahmen im Titel des Fensters. Wenn Sie beispielsweise im Titel nicht den Namen Ihrer App verwenden, fügt der Browser möglicherweise ein Präfix mit dem Namen Ihrer PWA hinzu. Andere Browser stellen den aktuellen Ursprung möglicherweise für einige Sekunden in der Titelleiste dar, wenn Sie den Titel ändern, um hervorzuheben, wohin der Nutzer navigiert ist.

Tab-Modus

Mit einer experimentellen Funktion, dem Tab-Modus , hat Ihre PWA ein tabbasiertes Design, das einem Webbrowser ähnelt. In diesem Fall kann der Nutzer mehrere Tabs aus derselben PWA öffnen, aber alle im selben Betriebssystemfenster geöffnet sein, wie im folgenden Video gezeigt:

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

Hinweis : Im Kapitel „Experimentell“ erfahren Sie, wie Sie experimentelle Funktionen 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-Eigenschaft definieren. Es ist aber immer ein String-Wert. Wie wäre es, wenn wir die Titelleiste mit HTML, CSS und Bildern so gestalten könnten, wie wir es uns wünschen? Hier kommt das Overlay für Fenstersteuerelemente ins Spiel, eine neue experimentelle Funktion in Microsoft Edge und Google Chrome für Desktop-PWAs.

Hinweis : Über die Overlay-Funktionen im Tab-Modus und den Fenstersteuerelementen werden neue Werte für das display-Mitglied des Manifests definiert. Die Manifestgruppe hat eine Möglichkeit, die Fallback-Kette display zu ersetzen, um Kompatibilität mit allen Geräten zu schaffen. So können Sie angeben, welcher display-Wert verwendet werden soll, wenn die erste Option nicht verfügbar ist. Weitere Informationen dazu finden Sie unter Vorbereitung auf die Anzeigemodi von morgen.

Weitere Informationen zu dieser Funktion finden Sie unter Overlay für Fenstersteuerelemente in der Titelleiste Ihrer PWA anpassen.

Fensterverwaltung

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

• Mit den Mehrfenster-Grafikeditoren à la Gimp kannst du verschiedene Bearbeitungstools in genau positionierten Fenstern platzieren.
• Virtuelle Handelsplattformen können Markttrends in mehreren Fenstern anzeigen, von denen jedes im Vollbildmodus angezeigt werden kann.
• Diashow-Apps können Vortragsnotizen auf dem internen Hauptbildschirm und die Präsentation auf einem externen Projektor anzeigen.

Mit der Window Management API ist das und noch viel mehr möglich.

Bildschirmdetails werden abgerufen

Die Window Management API fügt die neue Methode window.getScreenDetails() hinzu, die ein Objekt mit Bildschirmen als unveränderliches Array verknüpfter Bildschirme zurückgibt. Es gibt auch ein Liveobjekt, auf das über ScreenDetails.currentScreen zugegriffen werden kann, das der aktuellen window.screen entspricht.

In einigen Browsern muss der Nutzer zum Aufrufen von window.getScreenDetails() die entsprechende Berechtigung für Ihre PWAs erteilen.

Das zurückgegebene Objekt löst außerdem 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 Array screens, lösen auch ein change-Ereignis aus, wenn sich deren 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].pointerTypes;  // e.g. ["touch"]
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 über das Objekt „Bildschirmdetails“ ausgelöst.

Hinweis : Überprüfe auch die Presentation API, um Webinhalte über große Präsentationsgeräte wie Projektoren und netzwerkgesteuerte Fernseher anzuzeigen.

Unterstützte Browser

• 47
• 79
• x
• x

Quelle

Display-Wakelock

Stellen Sie sich Folgendes vor: Sie sind in der Küche und folgen einem Rezept auf Ihrem Tablet. Du hast gerade die Zutaten vorbereitet. Ihre Hände sind ein Chaos und Sie greifen wieder zu Ihrem Gerät, um den nächsten Schritt zu lesen. Was für eine Katastrophe! Der Bildschirm ist schwarz! Die Screen Wake Lock API ist genau das Richtige für dich. Eine PWA verhindert, dass Bildschirme gedimmt, in den Ruhemodus versetzt oder gesperrt werden. So können Nutzer ganz einfach anhalten, 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

Geräte mit Touchscreen, z. B. Smartphones und Tablets, bieten eine virtuelle Bildschirmtastatur. So können Nutzer etwas eingeben, wenn Formularelemente Ihrer PWA im Fokus sind.

Dank der VirtualKeyboard API kann deine PWA auf kompatiblen Plattformen über die navigator.virtualKeyboard-Oberfläche mehr Tastaturfunktionen nutzen, darunter:

• Bildschirmtastatur mit den Funktionen navigator.virtualKeyboard.show() und navigator.virtualKeyboard.hide() ein- und ausblenden
• Teile dem Browser mit, dass du die Bildschirmtastatur selbst schließen möchtest, indem du navigator.virtualKeyboard.overlaysContent auf true setzt.
• Wissen, wann die Tastatur mit dem Ereignis geometrychange von navigator.virtualKeyboard ein- und ausgeblendet wird.
• Die Richtlinie für die Bildschirmtastatur beim Bearbeiten von Hostelementen (mit contenteditable) wird mit dem HTML-Attribut virtualkeyboardpolicy festgelegt. Mit einer Richtlinie kannst du festlegen, ob die Bildschirmtastatur automatisch vom Browser mit dem Wert auto oder von deinem Script mit dem Wert manual gehandhabt werden soll.
• Verwendung von CSS-Umgebungsvariablen, um Informationen zur Darstellung der virtuellen Tastatur zu erhalten, z. B. keyboard-inset-height und keyboard-inset-top.

Weitere Informationen zu dieser API finden Sie unter Vollzugriff mit der VirtualKeyboard API.

Ressourcen

• Mehrere Bildschirme mit der Multi-Screen Window Placement API verwalten
• Anwendungsmodus mit Tabs für PWAs
• Mit der Screen Wake Lock API aktiv bleiben
• Uneingeschränkte Kontrolle über die VirtualKeyboard API
• Overlay für Fenstersteuerelemente der Titelleiste deiner PWA anpassen
• Inhalte in der Titelleiste anzeigen