Gérer les fenêtres

Une PWA en dehors du navigateur gère sa propre fenêtre. Dans ce chapitre, vous découvrirez les API et les fonctionnalités permettant de gérer une fenêtre dans le système d'exploitation.

Fenêtre de la PWA

L'exécution sur 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 redimensionner et de déplacer la fenêtre sur les systèmes d'exploitation multifenêtres comme Windows ou ChromeOS
• Partager l'écran avec d'autres fenêtres d'applications, comme le mode iPadOS ou le mode Écran partagé Android
• Ils s'affichent sur les stations d'accueil, les barres des tâches et dans le menu de l'onglet alternatif sur les ordinateurs, et dans les listes des fenêtres multitâches sur les appareils mobiles.
• Possibilité de réduire la fenêtre, de la déplacer sur un écran ou d'un ordinateur de bureau, 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 être positionnée n'importe où sur l'écran sur les systèmes d'exploitation de bureau. Par défaut, lorsque l'utilisateur ouvre la PWA pour la première fois après son installation, la taille de fenêtre par défaut correspond à un pourcentage de l'écran actuel, avec une résolution maximale de 1 920 x 1 080 dans l'angle supérieur 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. Ainsi, 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'existe aucun moyen de définir la taille et la position souhaité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 de 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 lors du chargement de la PWA en utilisant:

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 le moment où la fenêtre est redimensionnée à l'aide de l'événement resize de l'objet window. Aucun événement ne permet d'enregistrer le déplacement de la fenêtre. Vous pouvez donc interroger fréquemment la position.

Navigation vers d'autres sites

Si vous souhaitez rediriger l'utilisateur vers un site externe hors du champ d'application de votre PWA, vous pouvez le faire avec un élément HTML <a href> standard, en utilisant location.href ou en ouvrant une nouvelle fenêtre sur les plates-formes compatibles.

Actuellement, dans tous les navigateurs, si votre PWA est installée, lorsque vous accédez à une URL qui n'est pas dans le champ d'application de votre fichier manifeste, le moteur du navigateur de votre PWA affiche un navigateur intégré à l'application dans le contexte de votre fenêtre.

Voici quelques fonctionnalités des navigateurs intégrés aux applications:

• Elles s'affichent en haut de votre contenu.
• Elles disposent d'une barre d'URL statique indiquant l'origine actuelle, le titre de la fenêtre et un menu. En règle générale, ils sont associés au 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.

Flux d'autorisation

De nombreux flux d'authentification et d'autorisation Web impliquent de rediriger l'utilisateur vers une URL différente dans une origine différente afin d'obtenir un jeton qui reviendra à l'origine de votre PWA, par exemple en utilisant OAuth 2.0.

Dans ce cas, le navigateur intégré à l'application suit le processus suivant:

1. L'utilisateur ouvre votre PWA et clique sur le bouton de connexion.
2. Votre PWA redirige l'utilisateur vers une URL qui n'est pas incluse dans la PWA afin que le moteur de rendu ouvre un navigateur intégré à l'application au sein de votre PWA.
3. L'utilisateur peut annuler le navigateur intégré à l'application et revenir à votre PWA à tout moment.
4. 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.
5. Le navigateur intégré à l'application se ferme lorsqu'il détecte une URL faisant partie du champ d'application de la PWA.
6. 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.
7. Votre PWA récupère le jeton, le stocke et affiche la PWA.

Forcer la navigation dans 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>. Cela 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", "");
}

Ouverture de nouvelles fenêtres

Sur un ordinateur, les utilisateurs peuvent ouvrir plusieurs fenêtres de la même PWA. Chaque fenêtre est une navigation différente vers le même start_url, comme si vous ouvriez deux onglets de navigateur avec la même URL. Dans le menu de la PWA, les utilisateurs peuvent sélectionner "Fichier", puis "Nouvelle fenêtre". À partir du code de votre PWA, vous pouvez ouvrir une nouvelle fenêtre à l'aide de la fonction open(). Pour en savoir plus, consultez la documentation.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

L'appel de open() dans une fenêtre de PWA sur iOS ou iPadOS renvoie null et n'ouvre pas de fenêtre. L'ouverture de nouvelles fenêtres sur Android entraîne la création d'un navigateur intégré à l'application pour l'URL (même si celle-ci fait partie du champ d'application de votre PWA) qui ne déclenche généralement pas d'expérience de navigation externe.

Titre de la fenêtre

L'élément <title> a été principalement utilisé à des fins de SEO, 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 disponible.

Vous pouvez définir le contenu de la barre de titre:

• De manière statique dans l'élément HTML <title>.
• Changer dynamiquement la propriété de chaîne document.title à tout moment.

Dans 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 dans la sélection multitâche. Si votre application ne comporte qu'une seule page, nous vous conseillons de modifier votre titre pour chaque itinéraire.

Mode par onglets

Une fonctionnalité expérimentale, appelée mode par onglets, offre à votre PWA une interface basée sur des onglets semblable à celle d'un navigateur Web. Dans ce cas, plusieurs onglets de la même PWA peuvent être ouverts à l'utilisateur, mais tous assemblés dans la même fenêtre de système d'exploitation, comme vous pouvez le voir dans la vidéo suivante:

Pour en savoir plus sur cette fonctionnalité expérimentale, consultez Mode d'application par onglets pour les PWA.

Superposition des commandes de fenêtre

Comme indiqué précédemment, 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. Et si nous pouvions concevoir la barre de titre comme nous le souhaitons, avec du code HTML, CSS et des images ? C'est là qu'intervient la superposition des commandes de fenêtre, une nouvelle fonctionnalité expérimentale proposée dans Microsoft Edge et les PWA Google Chrome pour ordinateur.

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 voudront utiliser tout l'espace dont ils disposent. Exemple :

• Les éditeurs graphiques multifenêtres à la Gimp peuvent placer divers outils d'édition dans des fenêtres bien positionnées.
• Les services de négociation virtuels peuvent afficher les tendances du marché dans plusieurs fenêtres pouvant être consultées en mode plein écran.
• Les applications de diaporama peuvent afficher les commentaires du présentateur sur l'écran principal interne et la présentation sur un projecteur externe.

L'API de gestion des fenêtres permet aux PWA de le faire, entre autres.

Obtenir des informations sur 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. Il existe également un objet actif accessible à partir de ScreenDetails.currentScreen, qui correspond au 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 sur des écrans individuels sont modifiés. Les écrans individuels, window.screen ou un écran dans le tableau 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].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;
});

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étails de l'écran".

Activation du verrouillage de l'écran

Imaginez que vous êtes dans la cuisine en train de suivre une recette sur votre tablette. Vous venez de terminer la préparation de vos ingrédients. Vos mains sont en désordre et vous retournez à votre appareil pour lire l'étape suivante. Catastrophe. L'écran devient noir ! L'API Screen Wake Lock est conçue pour vous. Elle permet à une PWA d'empêcher l'assombrissement, la mise en veille ou le verrouillage des écrans. Les utilisateurs peuvent ainsi arrêter, démarrer, quitter et revenir sans crainte.

// 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. L'utilisateur peut ainsi saisir du texte lorsque des éléments du formulaire de votre PWA sont actifs.

Grâce à l'API VirtualKeyboard, votre PWA peut désormais contrôler davantage le clavier sur les plates-formes compatibles à l'aide de l'interface navigator.virtualKeyboard, y compris:

• Affichage et masquage du clavier virtuel avec les fonctions navigator.virtualKeyboard.show() et navigator.virtualKeyboard.hide().
• Indiquez au navigateur que vous souhaitez fermer vous-même le clavier virtuel en définissant navigator.virtualKeyboard.overlaysContent sur true.
• Savoir quand le clavier apparaît et disparaît avec l'événement geometrychange de navigator.virtualKeyboard.
• Définir la règle du clavier virtuel pour modifier les éléments hôtes (à l'aide de contenteditable) avec l'attribut HTML virtualkeyboardpolicy Une règle vous permet de décider si vous souhaitez que le clavier virtuel soit géré automatiquement par le navigateur à l'aide de la valeur auto ou par votre script à l'aide de la valeur manual.
• Utiliser des variables d'environnement CSS pour obtenir des informations sur l'apparence du clavier virtuel, telles que keyboard-inset-height et keyboard-inset-top

Pour en savoir plus sur cette API, consultez Contrôle total avec l'API VirtualKeyboard.

Ressources

• Gérer plusieurs écrans avec l'API Multi-Screen Window Placement
• Mode d'application par onglets pour les PWA
• Restez éveillé avec l'API Screen Wake Lock
• Contrôle total avec l'API VirtualKeyboard
• Personnaliser la superposition des commandes de fenêtre de la barre de titre de votre PWA
• Afficher du contenu dans la barre de titre