Gérer les fenêtres

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.

Exécutée dans sa propre fenêtre, gérée par votre PWA, elle présente tous les avantages et toutes les responsabilités de n'importe quelle fenêtre de ce système d'exploitation, par exemple :

  • La possibilité de déplacer et de redimensionner la fenêtre dans les systèmes d'exploitation multifenêtres, tels que Windows ou ChromeOS.
  • Partage de l'écran avec d'autres fenêtres d'application, comme en mode Écran partagé sur iPadOS ou Android.
  • Elles s'affichent dans les docks, les barres des tâches et le menu Alt+Tab sur ordinateur, ainsi que dans les listes de fenêtres multitâches sur les appareils mobiles.
  • La possibilité de réduire ou de déplacer la fenêtre sur différents écrans et 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 positionnée n'importe où sur l'écran des systèmes d'exploitation pour ordinateur. Par défaut, lorsque l'utilisateur ouvre la PWA pour la première fois après l'installation, elle obtient une taille de fenêtre par défaut correspondant à un pourcentage de l'écran actuel, avec une résolution maximale de 1 920 x 1 080, positionnée en haut à 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. La prochaine fois que l'utilisateur ouvrira l'application, la fenêtre conservera la taille et la position de la dernière utilisation.

Il n'existe aucun moyen 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 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 lorsqu'elle se charge à l'aide de :

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 redimensionnement de la fenêtre à 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 devez donc interroger fréquemment la position.

Au lieu de déplacer et de redimensionner la fenêtre de manière absolue, vous pouvez la déplacer et la redimensionner 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 ne fait pas partie du champ d'application de votre PWA, vous pouvez le faire avec 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 ne fait pas partie du 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.

Navigateur intégré à une PWA pour ordinateur de bureau lors de la navigation sur une URL hors champ d&#39;application.

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

  • Elles s'affichent au-dessus de votre contenu.
  • Elles disposent d'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 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.

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

Navigateur intégré à une application sur un iPhone lors de la navigation sur une URL hors champ d'application dans une PWA autonome.
Navigateur intégré à une application sur Android lors de la navigation sur une URL hors champ d'application dans une PWA autonome.

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 obtenir un jeton qui revient à l'origine de votre PWA, comme avec 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 ne fait pas partie du champ d'application de la PWA. Le moteur de rendu ouvre donc 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 obtient le jeton, le stocke et l'affiche.

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>. 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", "");
}

Ouvrir de nouvelles fenêtres

Sur ordinateur, les utilisateurs peuvent ouvrir plusieurs fenêtres de la même PWA. Chaque fenêtre possède 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 Fichier, puis 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");
}

La même PWA installée avec plusieurs fenêtres ouvertes sur un système d&#39;exploitation pour ordinateur.

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é pour l'URL, même si l'URL se trouve dans le champ d'application de votre PWA, ce qui 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 naturel, 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 <title> de votre code HTML.
  • Modifier dynamiquement 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 des tâches ou la sélection multitâche. Si vous avez 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, comme un navigateur Web. Dans ce cas, l'utilisateur peut ouvrir plusieurs onglets dans la même PWA, mais tous sont liés dans la même fenêtre du système d'exploitation.

Pour en savoir plus sur cette fonctionnalité expérimentale, consultez 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. Et si nous pouvions concevoir la barre de titre avec HTML, CSS et des images ? L'overlay de contrôles de fenêtre, une fonctionnalité expérimentale de Microsoft Edge et Google Chrome pour les PWA sur 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.

La superposition des commandes de fenêtre vous permet d&#39;afficher du contenu dans la barre de titre.

Gérer les fenêtres

Avec plusieurs écrans, les utilisateurs veulent utiliser tout l'espace disponible. Exemple :

  • Les éditeurs graphiques multi-fenêtres, tels que Gimp, peuvent placer différents outils d'édition dans des fenêtres positionnées avec précision.
  • Les bureaux de trading virtuels peuvent afficher les tendances du marché dans plusieurs fenêtres, dont chacune peut être affichée en mode 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 des informations sur un é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 depuis ScreenDetails.currentScreen et correspond à la window.screen actuelle.

L'objet renvoyé déclenche également un événement screenschange lorsque le tableau screens change. (Cela ne se produit pas lorsque les attributs des écrans individuels sont modifiés.) Les écrans individuels, qu'il s'agisse de window.screen ou d'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].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 de détails de l'écran.

Wakelock forçant l'activation de l'écran

Imaginez ceci. Vous êtes dans la cuisine et suivez une recette sur votre tablette. Vous venez de préparer vos ingrédients. Vos mains sont sales, et vous vous tournez vers votre appareil pour lire l'étape suivante. Catastrophe. L'écran est devenu noir ! L'API Screen Wake Lock est là pour vous aider. Elle permet à une PWA d'empêcher l'écran de s'assombrir, de se mettre en veille ou de se verrouiller, ce qui permet aux utilisateurs de s'arrêter, de démarrer, de quitter et de revenir 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 pour que l'utilisateur puisse saisir du texte lorsque les éléments de formulaire de votre PWA sont sélectionnés.

L'API VirtualKeyboard permet à votre PWA de mieux contrôler le clavier sur les plates-formes compatibles à l'aide de l'interface navigator.virtualKeyboard.

  • Affichez et masquez le clavier virtuel avec navigator.virtualKeyboard.show() et navigator.virtualKeyboard.hide().
  • Indiquez au navigateur que vous fermez vous-même le clavier virtuel en définissant navigator.virtualKeyboard.overlaysContent sur true.
  • Sachez quand le clavier apparaît et disparaît grâce à l'événement geometrychange.
  • Définissez la stratégie de clavier virtuel sur les éléments hôtes d'édition en définissant contenteditable sur auto ou manual, 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 (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 et keyboard-inset-top.

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