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.

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().

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'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.

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

Navigateur intégré à l'application sur un iPhone lorsque vous consultez une URL qui n'entre pas dans le champ d'application d'une PWA autonome.

Navigateur intégré à l'application sur Android lorsque vous consultez une URL qui n'entre pas dans le champ d'application d'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 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:

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é à l'application 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 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 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.

Attention :Le deuxième argument de open() est le nom de la fenêtre. Pour ouvrir toujours une nouvelle fenêtre, vous devez utiliser des valeurs de chaîne différentes pour un nom.

Remarque :Les fonctions open(), moveTo() et resizeTo() fonctionnent sans le préfixe window., car window. est un objet JavaScript global. À la place, vous pouvez appeler moveTo(0, 0), ce qui peut être plus facile à comprendre.

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.

Remarque :Pour réduire le hameçonnage, certains navigateurs pour ordinateur peuvent inclure des mesures supplémentaires dans 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, afin de mettre en évidence l'endroit où l'utilisateur a navigué.

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.

Remarque :Vous en apprendrez plus sur les fonctionnalités expérimentales dans le chapitre "Expérimental".

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.

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 garantir la compatibilité avec tous les appareils, le groupe de fichiers manifestes vous permet de remplacer la chaîne display de remplacement afin de spécifier la valeur display à utiliser si votre première option n'est pas disponible. En savoir plus sur les modes d'affichage

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.

Remarque :Dans certains navigateurs, l'appel de window.getScreenDetails() nécessite que l'utilisateur autorise 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 :Avec l'API Presentation, vous pouvez afficher du contenu Web via des appareils tels que des projecteurs et des téléviseurs connectés au réseau.

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() 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 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 sur auto ou manual, avec l'attribut HTML virtualkeyboardpolicy. 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 et keyboard-inset-top.

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