Intégration de l'OS

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

Utiliser le système de fichiers

Un workflow utilisateur type utilisant des fichiers se présente comme suit:

• Sélectionnez un fichier ou un dossier sur l'appareil et ouvrez-le directement.
• Apportez les modifications souhaitées à ces fichiers ou dossiers, puis enregistrez les modifications directement.
• créer des fichiers et des dossiers ;

Avant l'utilisation de l'API File System Access, les applications Web ne pouvaient pas le faire. L'ouverture des fichiers nécessitait une importation de fichier, l'enregistrement des modifications obligeait les utilisateurs à les télécharger et le Web n'avait aucun accès pour 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 la poignée de fichier à partir de l'API de sélection de fichiers permettant d'accéder au système de fichiers. Vous obtenez ainsi des informations de base sur le fichier.
2. La méthode getFile() du handle vous permet d'obtenir un type spécial 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) du fichier. Comme il s'agit d'un objet Blob, des méthodes Blob peuvent être appelées sur celui-ci, comme 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 faire un geste de l'utilisateur : puis:

1. Utilisez le handle de fichier pour créer un FileSystemWritableFileStream.
2. Modifiez le flux. Le fichier en place ne sera pas mis à jour. à la place, un fichier temporaire est généralement créé.
3. Enfin, lorsque vous avez terminé d'apporter des modifications, vous fermez le flux, ce qui les rend permanentes.

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 de 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 souhaitent définir leur application préférée comme application par défaut pour ouvrir des fichiers. L'API de gestion des fichiers est une API expérimentale qui permet aux PWA installées: Enregistrez-vous en tant que gestionnaire de fichiers sur l'appareil d'un utilisateur, en spécifiant le type et l'extension de fichier MIME 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 apparaîtra en tant qu'option dans le système de fichiers de l'utilisateur, ce qui lui permettra d'ouvrir directement le fichier dans celle-ci. Voici un exemple de configuration du 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 des liens inclus dans 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 (une URL pointant vers un contenu spécifique) dans votre PWA, le contenu s'ouvre dans une fenêtre autonome.

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 des URL sur les PWA installées sur iOS et iPadOS à partir de Safari.

Pour les navigateurs pour ordinateur, la communauté des navigateurs Web a créé une nouvelle spécification. Cette spécification est actuellement expérimentale. il ajoute un membre du fichier manifeste: url_handlers. Cette propriété attend un tableau des origines que la PWA souhaite capturer. L'origine de votre PWA sera attribué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, cela 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 le traitement 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 du protocole 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://. Sur plusieurs systèmes d'exploitation, les applications installées acquièrent 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 vous enregistrer, vous pouvez utiliser la méthoderegisterProtocolHandler() ou utiliser le membre protocol_handlers dans votre fichier manifeste, avec le schéma souhaité et l'URL que vous souhaitez 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 avec échappement 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 à toute autre application installée (PWA ou non) dans les appareils sur toutes les plateformes. 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 la forme d'une URL échappée.

Vous pouvez utiliser des schémas standards bien connus, tels que tel: pour les appels téléphoniques, mailto: pour l'envoi d'e-mails ou sms: pour les SMS. ou vous pouvez en apprendre davantage sur les Schémas d'URL provenant, par exemple, de systèmes 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 connus.

Partage sur le Web

Avec l'API Web Share, votre PWA peut envoyer du contenu aux 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, vous devez vérifier la présence de la méthode navigator.share(). Pour partager les fichiers, vous devez vérifier 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 qui la rejette 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, et 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 lorsque l'application est installée.

Vous configurez une cible de partage Web dans le fichier manifeste avec le membre share_target défini dans la spécification 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 censée recevoir les données partagées.

method

La méthode de verbe 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 les méthodes telles que POST.

params

Objet qui mappe les données de partage (à partir des clés title, text, url et files de Web Share) aux arguments que le navigateur transmet à l'URL (sur method: 'GET') ou dans le corps de la requête avec 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 dans 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 sélectionne 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 est le 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 de votre fichier manifeste pour alimenter l'entrée de partage du système d'exploitation. Vous ne pouvez pas en choisir un autre à 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 qu'il puisse en choisir un ou plusieurs. Votre PWA peut alors recevoir les données que vous souhaitez 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 disponibles à interroger avec navigator.contacts.getProperties(), et demander la sélection d'un ou de plusieurs contacts avec une liste de 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 de propriétés que vous souhaitez obtenir en retour.

L'exemple suivant liste 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
• Autoriser les applications Web installées à gérer des fichiers
• Gérer les fichiers dans les progressive web apps
• Intégrer l'interface utilisateur OS Partage à l'API Web Share
• Partager du contenu avec d'autres applications
• Recevoir des données partagées avec l'API Web Share Target
• Sélecteur de contacts pour le Web