Eine PWA außerhalb des Browsers verwaltet ihr eigenes Fenster. In diesem Kapitel erfahren Sie, die APIs und Funktionen zum Verwalten eines Fensters im Betriebssystem.
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 auf Mehrfenster-Betriebssystemen wie Windows oder ChromeOS zu verschieben und die Größe des Fensters anzupassen.
- Gemeinsame Nutzung des Bildschirms mit anderen App-Fenstern, z. B. im Split-Modus von iPadOS oder im Splitscreen-Modus von Android
- Erscheint in Docks, Taskleisten und im Alt-Tab-Menü auf Computern und in Multitask-Fensterlisten auf Mobilgeräten.
- Fenster können minimiert, zwischen Bildschirmen und Desktops verschoben und jederzeit geschlossen werden.
Fenster verschieben und seine Größe anpassen
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 seine Größe anpassen. Ü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 des PWA-Fensters anpassen und es verschieben, wenn die PWA geladen wird:
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. können Sie mit dem resize-Ereignis aus dem window-Objekt ermitteln, wann die Größe des Fensters angepasst wird. Es gibt kein Ereignis zum Erfassen der Fensterbewegung. Sie können die Position also häufig abfragen.
Andere Websites aufrufen
Wenn du den Nutzer auf eine externe Website weiterleiten möchtest, die nicht im Umfang deiner PWA liegt, kannst du das mit einem standardmäßigen <a href>-HTML-Element, mit location.href oder auf kompatiblen Plattformen in einem neuen Fenster 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 deinen Inhalten eingeblendet.
- Sie haben eine statische URL-Leiste mit dem aktuellen Ursprung, dem Fenstertitel und einem Menü. In der Regel sind sie an die
theme_colordeines Manifests angepasst. - Über das Kontextmenü können Sie diese URL im Browser öffnen.
- Nutzer können den Browser schließen oder zur vorherigen Seite zurückkehren.
Autorisierungsverfahren
Bei vielen Webauthentifizierungs- und Autorisierungsabläufen wird der Nutzer an eine andere URL mit 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:
- Der Nutzer öffnet Ihre PWA und klickt auf „Anmelden“.
- Ihre PWA leitet den Nutzer zu einer URL weiter, die außerhalb des Geltungsbereichs der PWA liegt, sodass das Rendering-Modul einen In-App-Browser in Ihrer PWA öffnet.
- Der Nutzer kann den In-App-Browser jederzeit kündigen und zu Ihrer PWA zurückkehren.
- 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.
- Der In-App-Browser schließt sich selbst, wenn er eine URL erkennt, die zum Bereich der PWA gehört.
- Die Engine leitet die Hauptnavigation des PWA-Fensters an die URL weiter, die vom Authentifizierungsserver im In-App-Browser aufgerufen wurde.
- Die PWA ruft das Token ab, speichert es und rendert die PWA.
Erzwingen der Navigation eines Browsers
Wenn Sie das Öffnen des Browsers über eine URL und nicht über einen In-App-Browser erzwingen möchten, können Sie das _blank-Ziel von <a href>-Elementen verwenden. Das funktioniert nur bei Desktop-PWAs. Auf Mobilgeräten ist es nicht möglich, einen Browser mit einer URL zu öffnen.
function openBrowser(url) {
window.open("url", "_blank", "");
}
Neue Fenster werden geöffnet
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.
Im Menü der PWA können Nutzer „Datei“ und dann „Neues Fenster“ auswählen. Über den PWA-Code können Sie dann mit der Funktion open() ein neues Fenster öffnen. Weitere Informationen finden Sie in der Dokumentation.
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
Wenn open() innerhalb eines PWA-Fensters unter iOS oder iPadOS aufgerufen wird, wird null zurückgegeben und kein Fenster geöffnet. Wenn Sie unter Android ein neues Fenster öffnen, wird für die URL ein neuer In-App-Browser erstellt, selbst wenn die URL im Bereich Ihrer PWA liegt. Dadurch wird normalerweise kein externes Surfen ausgelöst.
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 in Ihr Fenster wechseln, steht Ihnen der gesamte Titelleistenbereich zur Verfügung.
Sie können den Inhalt der Titelleiste definieren:
- Statisch im HTML-Element
<title>. - Sie können das Stringattribut
document.titlejederzeit dynamisch ändern.
Bei PWAs für Computer ist der Titel wichtig. Er wird in der Titelleiste des Fensters und manchmal im Task-Manager oder bei der Multitasking-Auswahl verwendet. Wenn Sie eine einseitige Anwendung haben, sollten Sie Ihren Titel für jede Route aktualisieren.
Tab-Modus
Mit einer experimentellen Funktion, dem Tab-Modus , hat Ihre PWA ein tabellarisches Design, das einem Webbrowser ähnelt. In diesem Fall kann der Nutzer mehrere Tabs aus derselben PWA öffnen, die jedoch alle im selben Betriebssystemfenster geöffnet sind, wie im folgenden Video zu sehen ist:
Weitere Informationen zu dieser experimentellen Funktion finden Sie unter Anwendungsmodus mit Tabs für PWA.
Overlay der Fenstersteuerelemente
Wie bereits erwähnt, kannst du den Fenstertitel ändern, indem du den Wert des <title>-Elements oder der document.title-Eigenschaft festlegst. Aber es ist immer ein Stringwert. Was wäre, wenn wir die Titelleiste nach Wunsch mit HTML, CSS und Bildern gestalten könnten?
Hier kommt das Overlay der Fenstersteuerelemente ins Spiel, eine neue experimentelle Funktion in Microsoft Edge und Google Chrome für Desktop-PWAs.
Weitere Informationen zu dieser Funktion finden Sie im Hilfeartikel Overlay der Fenstersteuerelemente der Titelleiste Ihrer PWA anpassen.
Fensterverwaltung
Bei mehreren Bildschirmen möchten die Nutzenden den gesamten verfügbaren Platz nutzen. Beispiel:
- Mit Mehrfenster-Grafikeditoren wie Gimp lassen sich 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 werden abgerufen
Die Window Management API fügt die neue Methode window.getScreenDetails() hinzu, die ein Objekt mit Bildschirmen als unveränderliches Array angehängter Bildschirme zurückgibt. Es gibt auch ein Live-Objekt, auf das über ScreenDetails.currentScreen zugegriffen werden kann, 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 ebenfalls 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].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 Bildschirmdetailobjekt ausgelöst.
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. Deine Hände sind chaotisch und du drehst dich wieder auf dein Gerät, um den nächsten Schritt zu lesen. Was für eine Katastrophe! Der Bildschirm ist schwarz! Mit der Screen Wake Lock API können Sie verhindern, dass Bildschirme in einer PWA gedimmt, in den Ruhemodus versetzt oder gesperrt werden. So können Nutzer die App unbesorgt anhalten, starten, verlassen und 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 Nutzer Text eingeben können, wenn Formularelemente Ihrer PWA im Fokus sind.
Dank der VirtualKeyboard API können Sie mit Ihrer PWA jetzt auf kompatiblen Plattformen die Tastatur über die navigator.virtualKeyboard-Oberfläche besser steuern, darunter:
- Bildschirmtastatur mit den Funktionen
navigator.virtualKeyboard.show()undnavigator.virtualKeyboard.hide()ein- und ausblenden. - Teile dem Browser mit, dass du die Bildschirmtastatur selbst schließen möchtest, indem du
navigator.virtualKeyboard.overlaysContentauftruesetzt. - Es wird erkannt, wann die Tastatur mit dem Ereignis
geometrychangevonnavigator.virtualKeyboardangezeigt und verschwindet. - Sie können die Bildschirmtastatur-Richtlinie für das Bearbeiten von Hostelementen (mithilfe von
contenteditable) mit dem HTML-Attributvirtualkeyboardpolicyfestlegen. Mit einer Richtlinie können Sie festlegen, ob die Bildschirmtastatur automatisch über den Wertautovom Browser oder vom Script mit dem Wertmanualverarbeitet werden soll. - CSS-Umgebungsvariablen verwenden, um Informationen zur Darstellung der Bildschirmtastatur abzurufen, z. B.
keyboard-inset-heightundkeyboard-inset-top.
Weitere Informationen zu dieser API finden Sie unter Vollständige Kontrolle 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
- Vollständige Kontrolle mit der VirtualKeyboard API
- Overlay der Fenstersteuerelemente der Titelleiste Ihrer PWA anpassen
- Inhalte in der Titelleiste anzeigen