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 comprendre les API et les fonctionnalités permettant de gérer une fenêtre au sein du système d'exploitation.

Fenêtre PWA

L'exécution sur votre propre fenêtre, gérée par votre PWA, présente tous les avantages et responsabilités de n'importe quelle fenêtre dans 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, tels que 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 stations d'accueil, dans les barres des tâches et dans le menu de l'onglet alternatif sur ordinateur, ainsi que dans les listes de fenêtres multitâches sur les appareils mobiles.
• Possibilité de réduire la fenêtre, de la déplacer entre les écrans et les ordinateurs, et de la fermer à tout moment.

Déplacer et redimensionner la fenêtre

La fenêtre de la PWA peut être de n'importe quelle taille et 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 la fenêtre par défaut correspond à un pourcentage de l'écran actuel, avec une résolution maximale de 1 920 x 1 080 pixels placée dans l'angle supérieur gauche de l'écran.

L'utilisateur peut déplacer et redimensionner la fenêtre, et le navigateur se souviendra de 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. Seule l'API JavaScript permet de repositionner et redimensionner la fenêtre. À 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, le déplacement ou le redimensionnement de la fenêtre n'a aucun effet sur l'affichage à l'écran.

Navigation vers 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, sur 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 de navigateur de votre PWA affiche un navigateur intégré dans le contexte de votre fenêtre.

Voici quelques-unes des fonctionnalités des navigateurs intégrés à l'application:

• Elles s'affichent en haut de votre contenu.
• Ils disposent d'une barre d'URL statique indiquant l'origine actuelle, le titre de la fenêtre et un menu. En général, ils sont associés au theme_color de votre fichier manifeste.
• Vous pouvez ouvrir cette URL dans le navigateur à partir du menu contextuel.
• Les utilisateurs peuvent fermer le navigateur ou revenir en arrière.

Remarque : Tant que le navigateur intégré à l'application est à l'écran, votre PWA attend en arrière-plan, comme si une autre fenêtre masquant l'écran.

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 ouvert une session dans Safari, celle-ci ne s'affichera pas dans votre PWA, mais dans le navigateur intégré à votre PWA.

Flux d'autorisations

De nombreux flux d'authentification et d'autorisation Web impliquent de rediriger l'utilisateur vers une URL d'origine différente afin d'obtenir un jeton qui retournera à 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 se connecte.
2. Votre PWA redirige l'utilisateur vers une URL qui n'entre pas dans le champ d'application de la PWA, de sorte que le moteur de rendu ouvre un navigateur intégré dans 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 votre origine 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 l'affiche.

Forcer la navigation dans un navigateur

Si vous souhaitez forcer l'ouverture du navigateur à l'aide d'une URL et non d'un navigateur intégré à l'application, vous pouvez utiliser la cible _blank des éléments <a href>. Cela ne fonctionne que sur les PWA de bureau. 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 proposera 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 de votre code PWA, vous pouvez ouvrir une nouvelle fenêtre avec la fonction open(). Consultez la documentation pour en savoir plus.

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 est comprise 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. lors de l'écriture de code JavaScript, car window est l'objet global. Vous pouvez simplement appeler moveTo(0, 0). Toutefois, appeler window.moveTo(0, 0) facilite la compréhension du code.

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 à 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:

• Statiquement 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 votre application ne comporte qu'une seule page, nous vous conseillons de modifier votre titre pour chaque itinéraire.

Remarque : Pour réduire l'hameçonnage dans les PWA, certains navigateurs pour ordinateur peuvent appliquer des mesures supplémentaires au titre de la fenêtre. Par exemple, si vous n'utilisez pas le nom de votre application dans le titre, le navigateur peut y ajouter un préfixe portant 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 à quel endroit l'utilisateur a accédé à la page.

Mode par onglets

Une fonctionnalité expérimentale, appelée mode avec onglets, permet à votre PWA de se présenter sous forme d'onglets, comme dans 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 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 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 c'est toujours 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. Il s'agit d'une nouvelle fonctionnalité expérimentale disponible dans Microsoft Edge et Google Chrome pour les PWA de bureau.

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

Pour en savoir plus sur cette fonctionnalité, consultez l'article 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 positionnées avec précision.
• Les bureaux 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 informations à 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 depuis ScreenDetails.currentScreen, correspondant au 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 d'écrans individuels sont modifiés.) Les écrans individuels (window.screen ou un écran du 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 "Screen Details" (Détails de l'écran).

Remarque : Vous pouvez également utiliser l'API Presentation pour afficher du contenu Web à l'aide d'appareils de présentation de grande taille, tels que des projecteurs et des téléviseurs connectés au réseau.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 47
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> X
• <ph type="x-smartling-placeholder"></ph> X

Source

Verrouillage de l'écran

Imaginez ceci: 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. 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 est là pour vous. Elle permet à une PWA d'empêcher les écrans de s'assombrir, de se mettre en veille ou de se verrouiller, ce qui permet aux utilisateurs d'arrêter, de démarrer, de quitter et de retourner sans souci.

// 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 qui permet à l'utilisateur de saisir du texte lorsque des éléments 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:

• 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 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 application à onglets pour les PWA
• Restez activé avec l'API Screen Wake Lock
• Contrôle total avec l'API VirtualKeyboard
• Personnalisez la superposition des commandes de fenêtre de la barre de titre de votre PWA
• Afficher le contenu dans la barre de titre