Partager via

Activer les actions d’application sur Windows pour un PWA

Vous pouvez créer et tester une action d’application pour l’infrastructure Actions d’application sur Windows, pour une application web progressive (PWA) que vous avez créée. Une action d’application sur Windows est une unité de comportement individuelle qu’une application Windows peut implémenter et inscrire. L’action d’application est ensuite accessible à partir d’autres applications et expériences, en s’intégrant en toute transparence dans les workflows utilisateur.

Une application génère et inscrit chaque action d’application, puis les applications et les expériences Windows peuvent recommander des actions d’application inscrites à l’utilisateur à des moments et emplacements contextuels pertinents dans le flux de travail de l’utilisateur.

Vous pouvez créer Windows App Actions pour améliorer la détectabilité et l’engagement des fonctionnalités de votre application.

Voir aussi :

Contenu détaillé :

L’infrastructure Actions Windows App permet d’exposer et d’exécuter des éléments clés des fonctionnalités de l’application, et non des activités utilisateur génériques telles que l’ouverture d’un menu contextuel avec le bouton droit. Consultez Scénarios recommandés pour les actions d’application dans La vue d’ensemble des actions d’application sur Windows.

Définir des actions d’application dans le manifeste de définition d’action

Vous définissez des actions d’application que votre PWA prend en charge dans un fichier manifeste de définition d’action (par ActionsManifest.jsonexemple, ). Il s’agit d’un fichier JSON de définition d’action pour les actions d’application sur Windows.

Le présent article explique comment créer une action d’application qui utilise l’exemple PWA, wami, l’application web pour manipuler des images. La démonstration wami prend en charge les tâches de manipulation d’images, telles que le redimensionnement ou l’application de styles de post-traitement.

L’exemple suivant de fichier manifeste de définition d’action (nommé ActionsManifest.json), définit une action d’application Paint pour la fonctionnalité Paint de l’exemple d’application wami. La fonctionnalité Paint, référencée par l’action d’application Paint , génère une version de style peinture à l’huile de l’image.

{
   "version": 1,
   "actions": [{
      "id": "Wami.Paint",
      "description": "Convert the image to oil paint style",
      "kind": "Search",
      "inputs": [{
         "name": "File",
         "kind": "Photo"
        }],
      "outputs": [],
      "invocation": {
         "type": "Uri",
         "uri": "web+wami://paint"
      },
      "inputCombinations": [{
         "inputs": [ "File" ],
         "description": "Photo to be converted to oil paint style."
      }]
   }]
}

En tant qu’entrée, l’action d’application Paint accepte le fichier image sélectionné par l’utilisateur.

L’action d’application Paint retourne la sortie stylisée.

Propriétés prises en charge dans un manifeste de définition d’action

Le fichier manifeste de définition d’action (tel que ActionsManifest.json) est un fichier descriptif utilisé par Windows App Runtime d’actions pour une application, afin de déclarer les actions d’application prises en charge par l’application.

Pour la définition de chaque propriété JSON prise en charge, consultez Propriétés JSON de définition d’action dans Schéma JSON de définition d’action pour les actions d’application sur Windows.

Sous Invocation, seul le uri type est pris en charge. Le com type n’est pas applicable aux PWA.

Types d’entités pris en charge pour les actions d’application pour les PWA

Dans le fichier manifeste de définition d’action (tel que ActionsManifest.json), l’énumération ActionEntityKind spécifie les types d’entités pris en charge par Les actions d’application sur Windows.

Dans le contexte d’une définition d’action d’application JSON, les types d’entités sont des littéraux de chaîne qui respectent la casse. Les entités prises en charge sont répertoriées dans l’énumération ActionEntityKind dans le schéma JSON de définition d’action pour Les actions d’application sur Windows.

StreamingText et RemoteFile ne sont pas encore pris en charge pour les PWA. Pour Fileles types d’entités , PhotoDocument et Text , consultez Propriétés d’entité dans le schéma JSON de définition d’action pour les actions d’application sur Windows.

Comment une PWA est lancée via l’activation d’URI

Quand une action d’application PWA est appelée, l’action d’application PWA est lancée par Windows via l’activation d’URI de protocole personnalisé. Un PWA doit s’inscrire pour la gestion de protocole personnalisée à l’aide du protocol_handlers champ dans le manifeste de l’application web PWA, tel que Demos/wami/manifest.json.

La méthode Windows est utilisée par l’Infrastructure d’action pour l’activation d’URI LaunchUriAsync(Uri, LauncherOptions, ValueSet) . LaunchUriAsyncne retourne pas de valeur ou d’erreur status.

uri dans le manifeste de définition d’action

Utilisez un URI de protocole personnalisé, et non un URI HTTPS.

Pour une PWA qui a plusieurs actions d’application, utilisez la syntaxe suivante :

"uri": "web+{app name}://{custom action name}"

Par exemple :

"uri": "web+wami://paint"

La ligne ci-dessus est affichée en contexte dans Définir des actions d’application dans le manifeste de définition d’action, ci-dessus.

Recevoir des ValueSet données et les mapper à une cible de partage

L’URI du protocole activé est mappé au url champ des données cibles du partage.

L’entrée ValueSet est convertie en chaîne JSON valide et mappée au text champ des données cibles du partage. Cela permet à Microsoft Edge de déterminer que le lancement du gestionnaire de protocole représente une action d’application.

Le manifeste d’application web de l’application (par exemple , Demos/wami/manifest.json) doit configurer correctement le champ pour permettre le share_target lancement en tant que cible de partage pour une action d’application. Consultez share_target le manifeste de l’application web ci-dessous.

Conditions préalables à la prise en charge des actions d’application par votre PWA

Pour intégrer correctement votre PWA à l’infrastructure Actions d’application sur Windows, les membres de manifeste d’application web suivants sont requis :

  • share_target
  • protocol_handlers
  • launch_handler

share_target dans le manifeste de l’application web

Pour qu’une PWA utilise des actions d’application, le share_target champ doit être présent dans le fichier manifeste de l’application web de PWA, tel que Demos/wami/manifest.json.

  • La méthode doit être « POST ».
  • doit enctype être multipart/form-data.
  • text et url dans sont requis pour prendre en params charge les actions d’application.
  • files est facultatif. Vous pouvez omettre files si vous ne souhaitez pas que votre PWA prend en charge la fonctionnalité cible de partage normal.

Exemple share_target de déclaration de Demos/wami/manifest.json :

"share_target": {
   "action": "./share-target",
   "method": "POST",
   "enctype": "multipart/form-data",
   "params": {
      "title": "title",
      "text": "text",
      "url": "url"
   }
}

Voir aussi :

Gérer l’entité d’une action d’application

L’entité d’une action d’application est passée à la PWA par le biais de données de partage POST. Pour gérer les données de partage POST, vous pouvez utiliser ou combiner les approches suivantes :

Le code suivant provient de l’exemple de gestionnaire de service worker de la démonstration wami dans Demos/wami/sw.js, pour prendre en charge le lancement de l’action d’application pour l’application :

// Extract data
const data = {
   text: formData.get('text') || '',
   url: formData.get('url') || ''
};
const files = formData.getAll('windowsActionFiles');

Explication des formData clés :

  • SMS: Chaîne JSON qui répertorie toutes les entités d’entrée. La valeur du paramètre d’entrée doit être identique à la valeur que vous avez définie dans le manifeste share_target.params.textde votre application web PWA. Les chemins d’accès aux fichiers contenus dans du texte sont utilisables en toute sécurité. Pour protéger la confidentialité des utilisateurs, Edge nettoie toutes les informations de chemin d’accès fournies par l’utilisateur avant qu’elles n’atteignent votre service Worker, en laissant uniquement le nom de fichier.

  • URL: URI de protocole (par exemple, web+wami://paint dans l’exemple) qui identifie l’action d’application qui a déclenché le lancement. La valeur du paramètre d’entrée doit être identique à la valeur que vous avez définie dans le manifeste share_target.params.urlde l’application web PWA.

  • Fichiers: Objets fichier joints à l’appel de l’action d’application.

protocol_handlers dans le manifeste de l’application web

Pour qu’une PWA utilise des actions d’application, le protocol_handlers champ doit être présent dans le fichier manifeste de l’application web PWA (par exemple , Demos/wami/manifest.json). Le protocol_handlers.protocol champ doit correspondre à la première partie du invocation.uri dans le fichier manifeste de définition d’action (par ActionsManifest.jsonexemple, ).

Exemple protocol_handlers de déclaration de Demos/wami/manifest.json :

"protocol_handlers": [{
   "protocol": "web+wami",
   "url": "./?url=%s"
}]

Champ correspondant invocation.uri de ActionsManifest.json:

"invocation": {
   "type": "Uri",
   "uri": "web+wami://paint"
},

L’extrait de code ci-dessus est présenté en contexte dans Définir des actions d’application dans le manifeste de définition d’action, ci-dessus.

Voir aussi :

launch_handler dans le manifeste de l’application web

Si vous souhaitez conserver une seule fenêtre PWA, vous pouvez définir launch_handler comme navigate-existing dans le fichier manifeste de votre application web PWA (par exemple , Demos/wami/manifest.json).

Exemple de déclaration :

"launch_handler": {
   "client_mode": " navigate-existing"
}

Le code ci-dessus n’est pas dans Demos/wami/manifest.json.

Empaqueter un magasin PWA dans Edge Stable

Ensuite, votre PWA doit être empaqueté en tant que PWA du Microsoft Store, pour être appelé par l’infrastructure Windows App Actions.

Pour empaqueter votre PWA en tant que PWA du Microsoft Store :

  1. Empaqueter votre PWA pour PWABuilder.com ; consultez Empaqueter votre PWA pour le Store dans Publier un PWA sur le Microsoft Store.

  2. Dans Tous les paramètres, faites défiler jusqu’à Actions – Activer les actions en bas.

  3. Vérifiez que le fichier manifeste de votre application web PWA (par exemple , Demos/wami/manifest.json) contient protocol_handlers des champs et share_target . PWABuilder.com exécutez un case activée, et si l’un des champs est manquant dans le manifeste de l’application web de l’application, la case Activer les actions est grisée.

  4. Dans la section Actions , cliquez sur Choisir un fichier, puis chargez le fichier manifeste de définition d’action (tel que ActionsManifest.json) que vous avez préparé pour votre PWA.

  5. Cliquez sur le bouton Télécharger .

  6. Décompressez votre archive de téléchargement. Installez-le en exécutant install.ps1.

  7. Lancez votre PWA en cliquant sur l’icône PWA.

  8. Testez vos actions PWA localement en suivant Actions de test d’application pour un PWA ci-dessous pour valider la fonctionnalité.

  9. Ouvrez le fichier manifeste de définition d’action (tel que ActionsManifest.json) que vous avez utilisé lors de l’empaquetage dans PWAbuilder.com.

  10. Définissez la disponibilité initiale de chacune des actions falsede l’application sur , comme décrit dans Définir la disponibilité initiale dans Désactiver la disponibilité d’une action d’application pour Windows.

    Avant de publier votre package, nous vous recommandons d’effectuer l’étape ci-dessus. Si vous ne définissez pas la disponibilité initiale de l’action d’application sur false, votre action ne fonctionnera que si l’utilisateur accède manuellement à edge://flags dans Microsoft Edge, puis active l’indicateur #edge-app-actions-on-windows-for-web-appsde fonctionnalité .

    La définition de la disponibilité false initiale sur est nécessaire, car la prise en charge par Microsoft Edge des actions d’application sur Windows dans les PWA est contrôlée par l’indicateur #edge-app-actions-on-windows-for-web-appsde fonctionnalité et est désactivée par défaut, car cette fonctionnalité est actuellement en version d’évaluation pour les développeurs.

    Lorsque l’indicateur #edge-app-actions-on-windows-for-web-apps de fonctionnalité est officiellement déployé (plus tard en 2025), Microsoft Edge bascule automatiquement les actions que vous avez définies dans le fichier manifeste de définition d’action de Disabled à Enabled, ce qui permet aux utilisateurs finaux d’utiliser les actions de votre application sans nécessiter de modifications supplémentaires de votre part.

  11. Publiez votre PWA, comme décrit dans Publier une PWA sur le Microsoft Store.

Empaqueter un magasin PWA dans Edge Canary

Edge Canary donne un aperçu des fonctionnalités qui ne sont pas encore disponibles dans stable.

Si vous souhaitez tester les dernières fonctionnalités des actions d’application dans Edge Canary, vous pouvez empaqueter votre PWA dans Edge Canary, comme suit :

  1. Installez Edge Canary et effectuez une mise à niveau vers la dernière version.

  2. Obtenez l’ID de package, l’ID du serveur de publication et le nom d’affichage du serveur de publication de votre PWA ; consultez Publier une PWA sur le Microsoft Store.

  3. Accédez à PWABuilder.Windows.Chromium tester.

  4. Entrez vos configurations PWA dans la zone d’entrée, pour les champs suivants :

    • name: nom de votre PWA.
    • packageId: Non nécessaire si vous ne publiez pas la version Edge Canary de votre application dans le Store ; peut être une chaîne vide.
    • url: URL de votre PWA.
    • publisher.displayName: nom de l’éditeur. Non nécessaire si vous ne publiez pas la version Edge Canary de votre application dans le Store ; peut être une chaîne vide.
    • publisher.commonName: votre ID de serveur de publication. Non nécessaire si vous ne publiez pas la version Edge Canary de votre application dans le Store ; peut être une chaîne vide.
    • startUrl: votre PWA est startUrl.

    Exemple de liste JSON que vous pouvez copier et coller dans le champ de texte du testeur PWABuilder.Windows.Chromium :

    {
   "name": "Wami for Canary",
   "packageId": "",
   "url": "https://microsoftedge.github.io/Demos/wami",
   "version": "1.0.2",
   "allowSigning": true,
   "classicPackage": {
      "generate": true,
      "version": "1.0.0"
   },
   "publisher": {
      "displayName": "",
      "commonName": ""
   },
   "edgeChannel": "canary",
   "appUserModelId": "Microsoft.Canary_8wekyb3d8bbwe!MSEDGE",
   "generateModernPackage": true,
   "resourceLanguage": "EN-US",
   "startUrl": "https://microsoftedge.github.io/Demos/wami"
}

    Remplacez les attributs ci-dessus par les attributs réels de votre application.

  5. Chargez le fichier manifeste de définition d’action (par ActionsManifest.jsonexemple ), puis cliquez sur le bouton Télécharger .

  6. Votre téléchargement est une .zip archive qui contient des fichiers tels que .msix des fichiers et .msixbundle . Décompressez-le et exécutez install.ps1 pour installer votre PWA directement.

  7. Cliquez sur l’icône de votre PWA.

    Votre PWA démarre.

  8. Lancez Edge Canary, puis accédez à edge://apps.

    Votre PWA est répertorié.

  9. Cliquez sur le bouton Détails .

    Votre PWA est indiqué comme installé à partir du Microsoft Store.

Votre PWA a maintenant été installé en tant que PWA de magasin dans Edge Canary.

Tester les actions d’application pour une PWA

Pour tester les actions d’application pour votre PWA :

  1. Assurez-vous que votre PWA a été correctement configuré et empaqueté, comme indiqué dans les sections ci-dessus.

  2. Assurez-vous que Windows est mis à jour pour prendre en charge les actions d’application ; consultez Windows 11 Build Insider Preview 26120.4151 (canal bêta).

  3. Assurez-vous que Microsoft Edge est mis à jour vers la dernière version et installez correctement votre PWA . Consultez Empaqueter un magasin PWA dans Edge Stable ou Empaqueter un magasin PWA dans Edge Canary, ci-dessus.

  4. Lancez Edge Canary ou Edge Stable (quel que soit le canal sur lequel vous avez installé le PWA).

  5. Accédez à edge://flags, recherchez Actions d’application et recherchez l’entrée Activer les actions d’application sur Windows pour les applications web. (Le nom de l’indicateur est #edge-app-actions-on-windows-for-web-apps.)

  6. Remplacez le status par Activé, puis cliquez sur le bouton Redémarrer en bas à droite.

  7. Lancez votre PWA.

    Votre PWA doit être lancé au moins une fois, pour initialiser votre PWA pour l’action d’application, avant d’être appelé par le runtime App Actions.

  8. Utilisez l’application Environnement de test d’actions d’application pour tester les actions d’application pour votre PWA.

  9. Ajoutez une entité dont l’action d’application a besoin. Par exemple, si l’action d’application traite des images, ajoutez une image. Exécutez ensuite l’action d’application.

    La PWA est lancée et exécute l’action d’application.

Voir aussi

Articles Windows :

Sites:

MDN :

Dépôt de démonstrations :

  • Last updated on