Les applications Web ont une grande couverture. Ils s'exécutent sur plusieurs plates-formes. Elles sont faciles à partager via des liens. Toutefois, elles n'étaient généralement pas intégrées au 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 désormais profiter de cette intégration pour ajouter des fonctionnalités utiles à nos PWA. Examinons certaines de ces options.
Utiliser le système de fichiers
Voici un workflow utilisateur type utilisant des fichiers:
- Sélectionnez un fichier ou un dossier sur l'appareil, puis ouvrez-le directement.
- Apportez des modifications à ces fichiers ou dossiers, puis enregistrez-les directement.
- Créez des fichiers et des dossiers.
Avant l'API File System Access, les applications Web ne pouvaient pas le faire. L'ouverture de fichiers nécessitait une importation, l'enregistrement des modifications obligeait les utilisateurs à les télécharger, et le Web n'avait aucun accès pour créer des fichiers et des 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:
- Capturez le handle de fichier à partir de l'API de sélecteur de fichiers de l'accès au système de fichiers. Vous obtenez ainsi des informations de base sur le fichier.
- En utilisant la méthode
getFile()
du handle, vous obtiendrez un type spécial deBlob
appeléFile
qui inclut des propriétés en lecture seule supplémentaires (telles que le nom et la date de dernière modification) sur le fichier. Étant donné qu'il s'agit d'un Blob, vous pouvez appeler des méthodes Blob dessus, telles quetext()
, 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 avez également besoin d'un geste utilisateur. Ensuite:
- Utilisez le descripteur de fichier pour créer un
FileSystemWritableFileStream
. - Apportez des modifications au flux. Le fichier ne sera pas mis à jour en place. Un fichier temporaire est généralement créé à la place.
- Enfin, lorsque vous avez terminé, vous fermez le flux, ce qui rend les modifications temporaires 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 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 souhaitent 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 de : S'enregistrer en tant que gestionnaire 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 vos extensions compatibles.
Une fois enregistrée, votre PWA installée s'affichera comme une option dans le système de fichiers de l'utilisateur, ce qui lui permettra d'ouvrir le fichier directement dans celle-ci. Voici un exemple de configuration du fichier manifeste pour qu'une PWA lise 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, au lieu de 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 qui pointe 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 de bureau, la communauté des navigateurs Web a créé une nouvelle spécification. Cette spécification est actuellement expérimentale. Elle ajoute un nouveau membre de fichier manifeste: url_handlers
. Cette propriété attend un tableau d'origines que la PWA souhaite capturer. L'origine de votre PWA sera accordée automatiquement, et chaque autre origine doit accepter cette gestion 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, il se présente comme suit:
"url_handlers": [
{"origin": "https://app.web.dev"},
]
Dans ce cas, le navigateur vérifie si un fichier existe à l'emplacement app.web.dev/.well-known/web-app-origin-association
, en acceptant la gestion des URL à partir de l'URL de portée 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 de 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 obtiennent cette capacité en enregistrant leurs schémas.
Pour les applications Web progressives, cette fonctionnalité est activée à l'aide de l'API URL Protocol Handler, disponible uniquement sur les ordinateurs. Vous ne pouvez autoriser des protocoles personnalisés que pour les appareils mobiles en distribuant votre PWA sur des plates-formes de téléchargement d'applications.
Pour vous enregistrer, vous pouvez utiliser la méthode registerProtocolHandler() ou 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 échappée qui a déclenché l'opération. Par conséquent, si vous avez un lien quelque part, comme <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, sur 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 au format d'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. Vous pouvez également découvrir les schémas d'URL d'autres applications, par exemple 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 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
ettext
) - 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()
. Pour partager des fichiers, vérifiez la présence de la méthode navigator.canShare()
.
Vous demandez l'action de partage en appelant navigator.share(objectToShare)
. Cet appel renvoie une promesse qui se résout avec undefined
ou est refusée avec une exception.
Cible de partage sur le 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 d'une PWA ou non. 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 que lorsque 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 la spécification provisoire 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
ouPUT
. enctype
- (Facultatif) Type d'encodage des paramètres. Par défaut, il est défini sur
application/x-www-form-urlencoded
, mais il peut également être défini surmultipart/form-data
pour des méthodes telles quePOST
. params
- Objet qui met en correspondance les données de partage (à partir des clés
title
,text
,url
etfiles
de Web Share) avec les arguments que le navigateur transmettra dans l'URL (surmethod: 'GET'
) ou dans le corps de la requête à l'aide de l'encodage sélectionné.
Par exemple, vous pouvez définir pour votre PWA que vous souhaitez recevoir des données partagées (titre et URL uniquement) en ajoutant les éléments suivants 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 nouvelle navigation vers le /receive-share/?shared_title=AAA&shared_url=BBB
de votre origine, où AAA est le titre partagé et BBB l'URL partagée. Vous pouvez utiliser JavaScript pour lire ces données à partir de la chaîne window.location
en l'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 choisir un autre ensemble à cette fin.
Pour obtenir des exemples plus détaillés et découvrir 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 sélectionner un ou plusieurs. Votre PWA peut ensuite recevoir les données souhaitées de ces contacts.
L'API Sélecteur de contacts est principalement disponible sur les appareils mobiles. Tout se passe 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 une sélection de contacts unique ou multiple avec une liste des propriétés souhaitées.
Exemples de propriétés : name
, email
, address
et tel
. Lorsque vous demandez à l'utilisateur de sélectionner 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 à être des gestionnaires de fichiers
- Gérer les fichiers dans les progressive web apps
- Intégrer l'UI de partage de l'OS avec 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