Une PWA en dehors du navigateur gère sa propre fenêtre. Découvrez les API et les fonctionnalités permettant de gérer une fenêtre dans le système d'exploitation.
L'exécution dans votre propre fenêtre, gérée par votre PWA, présente tous les avantages et les responsabilités de n'importe quelle fenêtre de ce système d'exploitation, par exemple:
- Possibilité de déplacer et de redimensionner la fenêtre dans les systèmes d'exploitation multifenêtres, tels que Windows ou ChromeOS.
- Partager l'écran avec d'autres fenêtres d'application, comme en mode Écran partagé iPadOS ou en mode Écran partagé Android
- Affichage dans les docks, les barres des tâches et le menu Alt+Tabulation sur ordinateur, ainsi que dans les listes de fenêtres multitâches sur les appareils mobiles.
- Possibilité de réduire, de déplacer la fenêtre entre les écrans et les bureaux, et de la fermer à tout moment.
Déplacer et redimensionner la fenêtre
La fenêtre de votre PWA peut être de n'importe quelle taille et se trouver n'importe où sur l'écran sur les systèmes d'exploitation pour ordinateur. Par défaut, lorsque l'utilisateur ouvre la PWA pour la première fois après l'installation, la taille de fenêtre par défaut est un pourcentage de l'écran actuel, avec une résolution maximale de 1 920 x 1 080 pixels en haut à gauche de l'écran.
L'utilisateur peut déplacer et redimensionner la fenêtre, et le navigateur mémorise la dernière préférence. La prochaine fois que l'utilisateur ouvrira l'application, la fenêtre conservera la taille et la position de l'utilisation précédente.
Il n'est pas possible de définir la taille et la position préférées de votre PWA dans le fichier manifeste. Vous ne pouvez repositionner et redimensionner la fenêtre qu'à l'aide de l'API JavaScript. À partir de votre code, vous pouvez déplacer et redimensionner votre propre fenêtre PWA à l'aide des fonctions moveTo(x, y)
et resizeTo(x, y)
de l'objet window
.
Par exemple, vous pouvez redimensionner et déplacer la fenêtre de votre PWA lorsqu'elle se charge à l'aide des éléments suivants:
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);
}
});
Vous pouvez interroger la taille et la position actuelles de l'écran à l'aide de l'objet window.screen
. Vous pouvez détecter quand la fenêtre est redimensionnée à l'aide de l'événement resize
de l'objet window
. Il n'existe aucun événement permettant de capturer le déplacement de la fenêtre. Vous pouvez donc interroger la position fréquemment.
Au lieu de déplacer et de redimensionner la fenêtre de manière absolue, vous pouvez le faire de manière relative à l'aide de moveBy()
et resizeBy()
.
Parcourir d'autres sites
Si vous souhaitez rediriger l'utilisateur vers un site externe qui n'entre pas dans le champ d'application de votre PWA, vous pouvez le faire à l'aide d'un élément HTML <a href>
standard. Utilisez location.href
ou ouvrez une nouvelle fenêtre sur les plates-formes compatibles.
Lorsque vous accédez à une URL qui n'entre pas dans le champ d'application de votre fichier manifeste, le moteur de navigateur de votre PWA affiche un navigateur intégré à l'application dans le contexte de votre fenêtre.
Voici quelques-unes des fonctionnalités des navigateurs intégrés:
- Ils s'affichent au-dessus de votre contenu.
- Elles comportent une barre d'adresse statique affichant l'origine actuelle, le titre de la fenêtre et un menu. En règle générale, ils sont thématisés avec le
theme_color
de votre fichier manifeste. - Dans le menu contextuel, vous pouvez ouvrir cette URL dans le navigateur.
- Les utilisateurs peuvent fermer le navigateur ou revenir en arrière.
Lorsque le navigateur intégré à l'application s'affiche à l'écran, votre PWA est en attente en arrière-plan, comme si une autre fenêtre l'obscurcissait.


Flux d'autorisation
De nombreux flux d'authentification et d'autorisation Web nécessitent de rediriger l'utilisateur vers une autre URL sur une autre origine pour acquérir un jeton qui renvoie à l'origine de votre PWA, comme avec OAuth 2.0.
Dans ce cas, le navigateur intégré à l'application suit ce processus:
- L'utilisateur ouvre votre PWA et clique sur "Se connecter".
- Votre PWA redirige l'utilisateur vers une URL qui n'entre pas dans le champ d'application de la PWA afin que le moteur de rendu ouvre un navigateur intégré à l'application dans votre PWA.
- L'utilisateur peut annuler le navigateur intégré à l'application et revenir à votre PWA à tout moment.
- L'utilisateur se connecte au navigateur intégré à l'application. Le serveur d'authentification redirige l'utilisateur vers l'origine de votre PWA, en envoyant le jeton en tant qu'argument.
- Le navigateur intégré à l'application se ferme lorsqu'il détecte une URL qui fait partie du champ d'application de la PWA.
- Le moteur redirige la navigation dans la fenêtre principale de la PWA vers l'URL à laquelle le serveur d'authentification a accédé dans le navigateur intégré à l'application.
- Votre PWA obtient le jeton, le stocke et affiche la PWA.
Forcer la navigation d'un navigateur
Si vous souhaitez forcer l'ouverture du navigateur avec une URL et non un navigateur intégré à l'application, vous pouvez utiliser la cible _blank
des éléments <a href>
. Cette fonctionnalité ne fonctionne que sur les PWA pour ordinateur. Sur les appareils mobiles, il n'est pas possible d'ouvrir un navigateur avec une URL.
function openBrowser(url) {
window.open("url", "_blank", "");
}
Ouvrir de nouvelles fenêtres
Sur ordinateur, les utilisateurs peuvent ouvrir plusieurs fenêtres de la même PWA. Chaque fenêtre a une navigation différente pour le même start_url
, comme si vous ouvriez deux onglets de navigateur de la même URL.
Dans le menu de la PWA, les utilisateurs peuvent sélectionner File (Fichier), puis New window (Nouvelle fenêtre). À partir de votre code PWA, vous pouvez ouvrir une nouvelle fenêtre avec la fonction open()
.
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
Lorsque vous appelez open()
dans une fenêtre PWA sur iOS ou iPadOS, il renvoie null
et n'ouvre pas de fenêtre. L'ouverture de nouvelles fenêtres sur Android crée un nouveau navigateur intégré à l'application pour l'URL, même si l'URL est incluse dans le champ d'application de votre PWA. Cela ne déclenche généralement pas d'expérience de navigation externe.
Titre de la fenêtre
L'élément <title>
était principalement utilisé à des fins de référencement, car l'espace dans un onglet de navigateur est limité. Lorsque vous passez du navigateur à votre fenêtre dans une PWA, tout l'espace de la barre de titre est à votre disposition.
Vous pouvez définir le contenu de la barre de titre:
- De manière statique dans votre élément HTML
<title>
. - Modification dynamique de la propriété de chaîne
document.title
à tout moment.
Sur les PWA pour ordinateur, le titre est essentiel. Il est utilisé dans la barre de titre de la fenêtre et parfois dans le gestionnaire de tâches ou la sélection multitâche. Si vous disposez d'une application monopage, vous pouvez mettre à jour votre titre sur chaque route.
Mode à onglets
Le mode à onglets est une fonctionnalité expérimentale qui permet à votre PWA d'avoir une conception basée sur des onglets, semblable à un navigateur Web. Dans ce cas, l'utilisateur peut ouvrir plusieurs onglets dans la même PWA, mais tous liés dans la même fenêtre du système d'exploitation.
Pour en savoir plus sur cette fonctionnalité expérimentale, consultez la page Mode application à onglets pour les PWA.
Superposition des commandes de fenêtre
Nous avons mentionné que vous pouvez modifier le titre de la fenêtre en définissant la valeur de l'élément <title>
ou de la propriété document.title
. Mais il s'agit toujours d'une valeur de chaîne. Que se passerait-il si nous pouvions concevoir la barre de titre avec du code HTML, CSS et des images ?
La superposition des commandes de fenêtre, une fonctionnalité expérimentale dans Microsoft Edge et Google Chrome pour les PWA pour ordinateur, peut vous aider.
Pour en savoir plus sur cette fonctionnalité, consultez Personnaliser la superposition des commandes de fenêtre de la barre de titre de votre PWA.
Gérer les fenêtres
Avec plusieurs écrans, les utilisateurs veulent utiliser tout l'espace disponible. Exemple :
- Les éditeurs graphiques multifenêtres, tels que Gimp, peuvent placer divers outils de retouche dans des fenêtres positionnées avec précision.
- Les plates-formes de trading virtuelles peuvent afficher les tendances du marché dans plusieurs fenêtres, chacune pouvant être affichée en plein écran.
- Les applications de diaporama peuvent afficher les notes du présentateur sur l'écran principal interne et la présentation sur un projecteur externe.
L'API Window Management permet aux PWA de faire exactement cela, et plus encore.
Obtenir les détails de l'écran
L'API Window Management ajoute une nouvelle méthode, window.getScreenDetails()
, qui renvoie un objet avec des écrans sous la forme d'un tableau immuable d'écrans associés. Un objet en direct est également accessible à partir de ScreenDetails.currentScreen
, correspondant à l'window.screen
actuel.
L'objet renvoyé déclenche également un événement screenschange
lorsque le tableau screens
change. (Cela ne se produit pas lorsque les attributs de certains écrans sont modifiés.) Les écrans individuels, window.screen
ou un écran de la matrice screens
, déclenchent également un événement change
lorsque leurs attributs changent.
// 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;
});
Si l'utilisateur ou le système d'exploitation déplace la fenêtre de votre PWA d'un écran à un autre, un événement currentscreenchange
est également déclenché à partir de l'objet d'informations sur l'écran.
Verrouillage de l'écran
Imaginez cela. Vous êtes dans la cuisine et vous suivez une recette sur votre tablette. Vous venez de terminer de préparer vos ingrédients. Vos mains sont toutes sales, et vous vous tournez vers votre appareil pour lire l'étape suivante. Catastrophe. L'écran est noir ! L'API Screen Wake Lock vous permet d'empêcher les écrans de s'assombrir, de passer en veille ou de se verrouiller. Les utilisateurs peuvent ainsi arrêter, démarrer, quitter et revenir à leur application sans problème.
// 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();
Clavier virtuel
Les appareils tactiles, tels que les téléphones et les tablettes, proposent un clavier virtuel à l'écran pour que l'utilisateur puisse saisir du texte lorsque les éléments de formulaire de votre PWA sont sélectionnés.
Avec l'API VirtualKeyboard, votre PWA peut mieux contrôler le clavier sur les plates-formes compatibles à l'aide de l'interface navigator.virtualKeyboard
.
- Afficher et masquer le clavier virtuel avec
navigator.virtualKeyboard.show()
etnavigator.virtualKeyboard.hide()
. - Indiquez au navigateur que vous fermez vous-même le clavier virtuel en définissant
navigator.virtualKeyboard.overlaysContent
surtrue
. - Sachez quand le clavier apparaît et disparaît avec l'événement
geometrychange
. - Définissez la stratégie du clavier virtuel sur la modification des éléments hôtes en définissant
contenteditable
surauto
oumanual
, avec l'attribut HTMLvirtualkeyboardpolicy
. Une règle vous permet de choisir si le clavier virtuel doit être géré automatiquement par le navigateur (auto
) ou par votre script (manual
). - Utilisez des variables d'environnement CSS pour obtenir des informations sur l'apparence du clavier virtuel, telles que
keyboard-inset-height
etkeyboard-inset-top
.
Pour en savoir plus sur cette API, consultez Contrôle total avec l'API VirtualKeyboard.