Intégration de l'OS

Les applications Web ont une large portée. Elles fonctionnent sur plusieurs plates-formes. Ils sont faciles à partager via des liens. Mais traditionnellement, elles manquaient d’intégration avec le système d’exploitation. Il n'y a pas si longtemps, ils n'étaient même pas installables. Heureusement, cela a changé, et nous pouvons désormais profiter de cette intégration pour ajouter des fonctionnalités utiles à nos PWA. Explorons quelques-unes de ces options.

Travailler avec le système de fichiers

Voici à quoi ressemble un workflow utilisateur typique utilisant des fichiers:

• Choisissez un fichier ou un dossier sur l'appareil et ouvrez-le directement.
• Modifiez ces fichiers ou dossiers, puis enregistrez-les directement.
• Créer des fichiers et des dossiers

Avant l'API File System Access, les applications Web ne pouvaient pas effectuer cette opération. Pour ouvrir des fichiers, vous deviez importer des fichiers. Pour enregistrer les modifications, les utilisateurs devaient ensuite les télécharger. De plus, le Web ne pouvait pas du tout créer de nouveaux fichiers et dossiers dans le système de fichiers de l'utilisateur.

Ouvrir un fichier

Pour ouvrir un fichier, nous utilisons la méthode window.showOpenFilePicker(). Notez que cette méthode nécessite un geste de l'utilisateur, comme un clic sur un bouton. Voici le reste de la configuration pour ouvrir un fichier:

1. Capturez le poignée de fichier à partir de l'API de sélection de fichiers de l'accès au système de fichiers. Vous obtenez ainsi des informations de base sur le fichier.
2. La méthode getFile() de l'identifiant vous permet d'obtenir un type particulier de Blob appelé File qui inclut des propriétés en lecture seule supplémentaires (telles que le nom et la date de dernière modification) concernant le fichier. Étant donné qu'il s'agit d'un objet Blob, les méthodes Blob peuvent être appelées sur cet élément, par exemple text(), pour obtenir son contenu.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Enregistrement des modifications…

Pour enregistrer les modifications apportées à un fichier, vous devez également effectuer un geste de l'utilisateur. Ensuite:

1. Utilisez le handle de fichier pour créer un FileSystemWritableFileStream.
2. Apportez des modifications au flux. Le fichier en place n'est pas mis à jour, mais un fichier temporaire est généralement créé.
3. Enfin, lorsque vous avez terminé d'apporter des modifications, vous fermez le flux. Les modifications sont alors définitives.

Voyons cela dans le code:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Gestion des fichiers

L'API File System Access vous permet d'ouvrir des fichiers depuis votre application, mais qu'en est-il de l'inverse ? Les utilisateurs veulent définir leur application préférée comme application par défaut pour ouvrir les fichiers. L'API de gestion des fichiers est une API expérimentale qui permet aux PWA installées. Enregistrez-les en tant que gestionnaires de fichiers sur l'appareil d'un utilisateur, en spécifiant le type MIME et l'extension de fichier compatibles avec votre PWA dans le fichier manifeste de votre application Web. Vous pouvez spécifier des icônes de fichier personnalisées pour les extensions compatibles.

Une fois enregistrée, la PWA installée s'affiche en tant qu'option dans le système de fichiers de l'utilisateur, ce qui lui permet d'ouvrir le fichier directement dessus. Voici un exemple de configuration de fichier manifeste permettant à une PWA de lire des fichiers texte:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

Gestion des URL

Grâce à la gestion des URL, votre PWA peut capturer les liens qui font partie de son champ d'application à partir du système d'exploitation et les afficher dans une fenêtre de PWA, plutôt que dans l'onglet du navigateur par défaut. Par exemple, si vous recevez un message contenant un lien vers la PWA ou si vous cliquez sur un lien profond (URL qui pointe vers un contenu spécifique) dans votre PWA, le contenu s'ouvre dans une fenêtre distincte.

Ce comportement est automatiquement disponible sur Android lorsque WebAPK est utilisé, par exemple lorsque les utilisateurs installent une PWA avec Chrome. Il est impossible de capturer les URL des PWA installées sur iOS et iPadOS depuis Safari.

La communauté des navigateurs Web a créé une nouvelle spécification pour les navigateurs pour ordinateur. Cette spécification est actuellement expérimentale et ajoute un nouveau membre au fichier manifeste: url_handlers. Cette propriété attend un tableau des origines que la PWA souhaite capturer. L'origine de votre PWA sera accordée automatiquement, et chaque autre origine doit accepter ce traitement via un fichier nommé web-app-origin-association. Par exemple, si le fichier manifeste de votre PWA est hébergé sur web.dev et que vous souhaitez ajouter l'origine app.web.dev, le code se présente comme suit:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

Dans ce cas, le navigateur vérifie si un fichier existe à l'adresse app.web.dev/.well-known/web-app-origin-association et accepte la gestion des URL à partir de l'URL du champ d'application de la PWA. Le développeur doit créer ce fichier. Dans l'exemple suivant, le fichier se présente comme suit:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

Gestion des protocoles d'URL

La gestion des URL fonctionne avec les URL du protocole https standards, mais il est possible d'utiliser des schémas d'URI personnalisés, tels que pwa://. Dans plusieurs systèmes d'exploitation, les applications installées bénéficient de cette capacité en enregistrant leurs schémas.

Pour les PWA, cette fonctionnalité est activée à l'aide de l'API du gestionnaire de protocoles d'URL, disponible uniquement sur les ordinateurs. Vous ne pouvez autoriser des protocoles personnalisés pour les appareils mobiles qu'en distribuant votre PWA sur des plates-formes de téléchargement d'applications.

Pour ce faire, vous pouvez utiliser la méthoderegisterProtocolHandler() ou le membre protocol_handlers dans votre fichier manifeste, avec le schéma et l'URL à charger dans le contexte de votre PWA, par exemple:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Vous pouvez acheminer l'URL from-protocol vers le gestionnaire approprié et obtenir la chaîne de requête value dans votre PWA. %s est un espace réservé pour l'URL échappée qui a déclenché l'opération. Par conséquent, si vous disposez d'un lien tel que <a href="web+pwa://testing">, votre PWA ouvrira /from-protocol?value=testing.

Appeler d'autres applications

Vous pouvez utiliser des schémas d'URI pour vous connecter à n'importe quelle autre application installée (PWA ou non) sur les appareils des utilisateurs de toutes les plates-formes. Il vous suffit de créer un lien ou d'utiliser navigator.href et de pointer vers le schéma d'URI souhaité, en transmettant les arguments sous forme d'échappement dans l'URL.

Vous pouvez utiliser des schémas standards connus, tels que tel: pour les appels téléphoniques, mailto: pour l'envoi d'e-mails ou sms: pour les messages texte. Vous pouvez également vous renseigner sur les schémas d'URL d'autres applications, par exemple dans des applications de messagerie, de cartes, de navigation, de réunions en ligne, de réseaux sociaux et de plates-formes de téléchargement d'applications bien connues.

Partage Web

Avec l'API Web Share, votre PWA peut envoyer du contenu à d'autres applications installées sur l'appareil via le canal partagé.

L'API n'est disponible que sur les systèmes d'exploitation dotés d'un mécanisme share, y compris Android, iOS, iPadOS, Windows et ChromeOS. Vous pouvez partager un objet contenant:

• Texte (propriétés title et text)
• Une URL (propriété url)
• Fichiers (propriété files).

Pour vérifier si l'appareil actuel peut partager des données simples, comme du texte, vérifiez la présence de la méthode navigator.share() afin de partager les fichiers pour lesquels vous vérifiez la présence de la méthode navigator.canShare().

Pour demander l'action de partage, appelez navigator.share(objectToShare). Cet appel renvoie une promesse qui se résout avec undefined ou un rejet avec une exception.

Cible de partage Web

L'API Web Share Target permet à votre PWA d'être la cible d'une opération de partage à partir d'une autre application sur cet appareil, qu'il s'agisse ou non d'une PWA. Votre PWA reçoit les données partagées par une autre application.

Elle est actuellement disponible sur Android avec WebAPK et ChromeOS. Elle ne fonctionne qu'une fois que l'utilisateur a installé votre PWA. Le navigateur enregistre la cible de partage dans le système d'exploitation lors de l'installation de l'application.

Vous configurez la cible de partage Web dans le fichier manifeste avec le membre share_target défini dans les spécifications du brouillon de la cible de partage Web. share_target est défini sur un objet avec certaines propriétés:

action

URL qui sera chargée dans une fenêtre PWA devant recevoir les données partagées.

method

Une méthode verbale HTTP sera utilisée pour l'action, par exemple GET, POST ou PUT.

enctype

(Facultatif) Le type d'encodage des paramètres est application/x-www-form-urlencoded par défaut, mais il peut également être défini sur multipart/form-data pour des méthodes telles que POST.

params

Objet qui mappe les données partagées (à partir des clés title, text, url et files du partage Web) avec les arguments que le navigateur transmet dans l'URL (sur method: 'GET') ou dans le corps de la requête à l'aide de l'encodage sélectionné.

Par exemple, vous pouvez indiquer à votre PWA que vous souhaitez recevoir des données partagées (titre et URL uniquement) en ajoutant les éléments suivants à votre fichier manifeste:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Dans l'exemple précédent, si une application du système partage une URL avec un titre et que l'utilisateur choisit votre PWA dans la boîte de dialogue, le navigateur crée une navigation vers le /receive-share/?shared_title=AAA&shared_url=BBB de votre origine, où AAA correspond au titre partagé et BBB est l'URL partagée. Vous pouvez utiliser JavaScript pour lire ces données à partir de la chaîne window.location en les analysant avec le constructeur URL.

Le navigateur utilisera le nom et l'icône de la PWA issus de votre fichier manifeste pour alimenter l'entrée de partage du système d'exploitation. Vous ne pouvez pas choisir un autre ensemble à cette fin.

Pour obtenir des exemples plus détaillés et savoir comment recevoir des fichiers, consultez Recevoir des données partagées avec l'API Web Share Target

Sélecteur de contacts

Avec l'API Contact Picker, vous pouvez demander à l'appareil d'afficher une boîte de dialogue native avec tous les contacts de l'utilisateur, afin que celui-ci puisse en choisir un ou plusieurs. Votre PWA peut alors recevoir les données qui vous intéressent de la part de ces contacts.

L'API Contact Picker est principalement disponible sur les appareils mobiles. Tout se fait via l'interface navigator.contacts sur les plates-formes compatibles.

Vous pouvez demander les propriétés à interroger avec navigator.contacts.getProperties(), et la sélection d'un ou de plusieurs contacts avec la liste des propriétés souhaitées.

Voici quelques exemples de propriétés : name, email, address et tel. Lorsque vous demandez à l'utilisateur de choisir un ou plusieurs contacts, vous pouvez appeler navigator.contacts.select(properties) en transmettant un tableau des propriétés que vous souhaitez obtenir en retour.

L'exemple suivant répertorie les contacts reçus par le sélecteur.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Ressources

• API File System Access: simplifier l'accès aux fichiers locaux
• Utiliser les applications Web installées comme gestionnaires de fichiers
• Gérer les fichiers des progressive web apps
• Intégrer l'interface utilisateur de partage du système d'exploitation à l'aide de l'API Web Share
• Partager du contenu avec d'autres applications
• Recevoir des données partagées avec l'API Web Share Target
• Un outil de sélection de contacts pour le Web