Gérer les fenêtres

Une PWA située en dehors du navigateur gère sa propre fenêtre. Dans ce chapitre, vous allez découvrir 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 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 :

• La 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 écran partagé iPadOS ou le mode Écran partagé Android
• S'affiche dans les docks, les barres des tâches et le menu Alt+Tabulation sur les ordinateurs, 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 placée 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. 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'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 lors de son chargement à l'aide de la commande suivante:

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 à quel moment la fenêtre est redimensionnée à l'aide de l'événement resize de l'objet window. Il n'existe pas d'événement pour capturer le déplacement de la fenêtre. Vous pouvez donc interroger fréquemment la position.

Remarque : Au lieu de déplacer et de redimensionner complètement la fenêtre, vous pouvez déplacer et redimensionner la fenêtre de manière relativement relative avec moveBy() et resizeBy().

Remarque : Sur les appareils mobiles, déplacer ou redimensionner votre fenêtre n'entraîne aucune modification à l'écran.

Parcourir d'autres sites

Si vous souhaitez rediriger l'utilisateur vers un site externe qui n'est pas concerné par 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'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 à l'application:

• Elles s'affichent par-dessus votre contenu.
• Elles comportent une barre d'URL 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.

Remarque : 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.

Sur iOS et iPadOS, le navigateur intégré à l'application utilise SafariViewController, un moteur de rendu Safari isolé de l'espace de stockage de votre PWA. Par conséquent, si l'utilisateur a une session dans Safari, elle n'apparaîtra pas dans votre PWA, mais dans un navigateur intégré à votre PWA.

Flux d'autorisation

De nombreux flux d'authentification et d'autorisation Web impliquent de rediriger l'utilisateur vers une URL différente, avec une origine différente, afin d'obtenir un jeton qui renverra à l'origine de votre PWA (par exemple, à l'aide d'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 "Se connecter".
2. 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é à 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 qui fait 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 l'affiche.

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>. Cette méthode 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 ordinateur, les utilisateurs peuvent ouvrir plusieurs fenêtres de la même PWA. Chaque fenêtre correspond à 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 "File" (Fichier), puis "New window" (Nouvelle fenêtre). Dans le code de la PWA, vous pouvez ouvrir une nouvelle fenêtre avec 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 PWA sur iOS ou iPadOS renvoie null et n'ouvre pas de fenêtre. L'ouverture de nouvelles fenêtres sur Android crée un navigateur intégré à l'application pour l'URL (même si l'URL entre dans le champ d'application de votre PWA), ce qui ne déclenche généralement pas de navigation externe.

Avertissement : Le deuxième argument de open() est le nom de la fenêtre. Si le nom que vous avez utilisé est déjà ouvert, le moteur remplacera la fenêtre ouverte avec ce nom par une nouvelle navigation. Si vous souhaitez toujours ouvrir une nouvelle fenêtre, vous devez utiliser des valeurs de chaîne différentes pour un nom.

Les fonctions open(), moveTo() et resizeTo() n'ont pas besoin du préfixe window. lorsque vous écrivez du code JavaScript, car window est l'objet global. Vous pouvez simplement appeler moveTo(0, 0). Toutefois, l'appel de window.moveTo(0, 0) facilite la compréhension du code.

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 à la fenêtre d'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 votre élément HTML <title> ;
• Modification dynamique de la propriété de chaîne document.title à tout moment

Pour les PWA de bureau, 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 le titre sur chaque route.

Remarque : Pour réduire le hameçonnage dans les PWA, certains navigateurs pour ordinateur peuvent prendre des mesures supplémentaires sur le titre de la fenêtre. Par exemple, si vous n'utilisez pas le nom de votre application dans le titre, le navigateur peut ajouter un préfixe avec le nom de votre PWA. D'autres navigateurs peuvent afficher l'origine actuelle dans la barre de titre pendant quelques secondes lorsque vous modifiez le titre pour indiquer où l'utilisateur a accédé à la page.

Mode par onglets

Une fonctionnalité expérimentale, appelée mode à onglets, permet à votre PWA d'avoir une conception basée sur des onglets, semblable à celle d'un navigateur Web. Dans ce cas, l'utilisateur peut ouvrir plusieurs onglets à partir de la même PWA, mais tous liés dans la même fenêtre du système d'exploitation, comme vous pouvez le voir dans la vidéo suivante :

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

Remarque : Dans le chapitre Expérimental, vous découvrirez comment commencer à utiliser les fonctionnalités expérimentales.

Superposition des commandes de fenêtre

Nous avons indiqué 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 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 disponible dans Microsoft Edge et Google Chrome pour les PWA pour ordinateur.

Remarque : Les fonctionnalités de superposition du mode à onglets et des commandes de fenêtre définissent de nouvelles valeurs pour le membre display du fichier manifeste. Pour assurer la compatibilité avec tous les appareils, le groupe de fichiers manifestes a créé un moyen de remplacer la chaîne display de remplacement. Vous pouvez ainsi spécifier la valeur display à utiliser si votre première option n'est pas disponible. Pour en savoir plus, consultez Se préparer aux modes d'affichage de demain.

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 disponible. Exemple :

• Les éditeurs graphiques multifenêtres à la Gimp peuvent placer divers outils d'édition dans des fenêtres positionnées avec précision.
• Les services de négociation virtuels peuvent afficher les tendances du marché dans plusieurs fenêtres, chacune pouvant être visualisée 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 d'effectuer ces opérations et bien d'autres.

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.

Dans certains navigateurs, pour appeler window.getScreenDetails(), l'utilisateur doit accorder les autorisations à vos PWA.

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.

Remarque : Vous pouvez également consulter l'API Presentation pour afficher du contenu Web sur de grands appareils de présentation tels que des projecteurs et des téléviseurs connectés au réseau.

Navigateurs pris en charge

• 47
• 79
• x
• x

Source

Verrouillage de l'écran

Imaginons que vous soyez dans la cuisine en train de suivre une recette sur votre tablette. Vous venez de terminer la préparation de vos ingrédients. Vous avez les mains en désordre et vous retournez vers votre appareil pour lire l'étape suivante. Catastrophe. L'écran est devenu 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.

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:

• Afficher et masquer le clavier virtuel avec les fonctions navigator.virtualKeyboard.show() et navigator.virtualKeyboard.hide()
• Vous indiquez au navigateur que vous allez 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 de clavier virtuel pour modifier les éléments hôtes (à l'aide de contenteditable) avec l'attribut HTML virtualkeyboardpolicy Une stratégie vous permet de choisir si le clavier virtuel doit être 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 la section Contrôle total avec l'API VirtualKeyboard.

Ressources

• Gérer plusieurs écrans avec l'API Window Management
• MDN : API Window Management
• Mode application à onglets pour les PWA
• Restez activé 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 le contenu dans la barre de titre