Atelier de programmation Web Operations

Fonctionnalités Web

Nous souhaitons combler l'écart de fonctionnalité entre le Web et le format natif, et aider les développeurs à créer des expériences de qualité sur le Web ouvert. Nous sommes convaincus que chaque développeur doit pouvoir accéder aux fonctionnalités dont il a besoin pour offrir une expérience Web de qualité, et nous sommes déterminés à rendre le Web plus performant.

Toutefois, certaines fonctionnalités, comme l'accès au système de fichiers et la détection d'inactivité, sont disponibles en mode natif, mais ne sont pas disponibles sur le Web. Ces fonctionnalités manquantes signifient que certains types d'applications ne sont pas disponibles sur le Web ou sont moins utiles.

Nous concevons et développons ces nouvelles fonctionnalités de façon ouverte et transparente, en nous appuyant sur les processus existants de la plate-forme Web ouverte, tout en prenant en compte les premiers commentaires des développeurs et d'autres fournisseurs de navigateurs à mesure que nous développons les deux conceptions, afin de garantir leur conception.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez jouer avec plusieurs API Web qui sont nouvelles ou uniquement disponibles avec un drapeau. Cet atelier de programmation porte avant tout sur les API elles-mêmes et sur les cas d'utilisation de ces API, plutôt que de créer un produit final spécifique.

Points abordés

Cet atelier de programmation vous explique les principes de base de plusieurs API de pointe. Veuillez noter que ces mécanismes n'ont pas encore été gravés dans la pierre, et nous vous remercions d'avance pour vos commentaires concernant le processus pour les développeurs.

Ce dont vous avez besoin

Les API présentées dans cet atelier de programmation étant vraiment à l'avant-garde, les exigences de chaque API varient. Assurez-vous de lire attentivement les informations de compatibilité au début de chaque section.

Comment aborder l'atelier de programmation ?

L'atelier de programmation n'est pas nécessairement destiné à être suivi de manière séquentielle. Chaque section représente une API indépendante. N'hésitez donc pas à identifier ce qui vous intéresse le plus.

L'objectif de l'API Badging est d'attirer l'attention des utilisateurs sur ce qui se passe en arrière-plan. Par souci de simplicité, dans cet atelier de programmation, nous allons utiliser l'API pour attirer l'attention de l'utilisateur sur quelque chose d'important. Vous pouvez ensuite effectuer ce transfert mental en arrière-plan.

Installer Airhorner

Pour que cette API fonctionne, vous avez besoin d'une PWA installée sur l'écran d'accueil. Pour ce faire, vous devez d'abord installer une PWA, telle que la célèbre image airhorner.com, connue dans le monde entier. Appuyez sur le bouton Installer en haut à droite ou utilisez le menu à trois points pour l'installer manuellement.

Une invite de confirmation s'affiche. Cliquez sur Install (Installer).

Une nouvelle icône s'affiche sur la station d'accueil de votre système d'exploitation. Cliquez dessus pour lancer la PWA. Il dispose de sa propre fenêtre d'application et s'exécute en mode autonome.

Définir un badge

Maintenant que vous avez installé une PWA, vous avez besoin de données numériques (les badges ne peuvent contenir que des chiffres) à afficher sur un badge. Le principe est simple à savoir : spirer, le nombre de fois que l'habitacle a sonné. En fait, avec l'application Airhorner installée, faites sonner le carillon et voyez le badge. Il en compte un chaque fois que vous klaxonnez.

Comment cela fonctionne-t-il ? Le code est le suivant:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

Sonnerie déclenchée plusieurs fois et vérifier l'icône PWA. C'est aussi simple que ça !

Supprimer un badge

Le compteur atteint 99, puis recommence. Vous pouvez également le réinitialiser manuellement. Ouvrez l'onglet de la console de développement, collez la ligne ci-dessous, puis appuyez sur Entrée. 

navigator.setExperimentalAppBadge(0);

Vous pouvez également supprimer le badge en l'effaçant explicitement, comme illustré dans l'extrait de code suivant. L'icône de votre PWA doit maintenant ressembler à nouveau au début, être claire et sans badge.

navigator.clearExperimentalAppBadge();

Commentaires

Qu'avez-vous pensé de cette API ? Merci de bien vouloir répondre à cette enquête:

Cette API était-elle intuitive ?

Oui Non

Avez-vous obtenu l'exemple à exécuter ?

Oui Non

Avez-vous d'autres commentaires ? Y a-t-il des fonctionnalités manquantes ? Merci de nous faire part de vos commentaires en répondant à cette enquête. Merci !

L'API Native File System permet aux développeurs de créer des applications Web performantes qui interagissent avec les fichiers sur l'appareil local de l'utilisateur. Lorsqu'un utilisateur donne accès à une application Web, cette API permet à ces dernières de lire ou d'enregistrer les modifications apportées directement aux fichiers et dossiers de l'appareil de l'utilisateur.

Lire un fichier

Bonjour, Créez un fichier .txt simple, puis saisissez du texte. Ensuite, accédez à un site sécurisé (c'est-à-dire un site diffusé via HTTPS) comme example.com, puis ouvrez la console d'outils pour les développeurs. Collez l'extrait de code ci-dessous dans la console. Étant donné que l'API Native File System nécessite un geste utilisateur, nous allons joindre un gestionnaire de double clic sur le document. Vous aurez besoin du gestionnaire de fichiers plus tard. Nous allons donc en faire une variable globale.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

Lorsque vous double-cliquez ensuite sur un élément de la page example.com, un sélecteur de fichiers s'affiche.

Sélectionnez le fichier .txt que vous avez créé. Le contenu du fichier remplacera alors le contenu body réel de example.com.

Enregistrer un fichier

Nous devons à présent apporter quelques modifications. Par conséquent, vous pouvez modifier le body en collant l'extrait de code ci-dessous. Vous pouvez désormais modifier le texte comme s'il s'agissait d'un éditeur de texte.

document.body.contentEditable = true;

Nous souhaitons maintenant réenregistrer ces modifications dans le fichier d'origine. Nous avons donc besoin d'un rédacteur pour gérer le fichier, que nous pouvons obtenir en collant l'extrait ci-dessous dans la console. Là encore, nous avons besoin d'un geste utilisateur. Cette fois, nous attendons un clic sur le document principal. 

document.onclick = async () => {
  const writer = await handle.createWriter();
  await writer.truncate(0);
  await writer.write(0, document.body.textContent);
  await writer.close();
};

Lorsque vous cliquez sur le document (et non pas double-cliquez dessus), une invite d'autorisation s'affiche. Lorsque vous accordez cette autorisation, le contenu du fichier correspond à ce que vous avez déjà modifié dans le body. Vérifiez les modifications en ouvrant le fichier dans un autre éditeur (ou recommencez le processus en double-cliquant dessus et en rouvrant le fichier).

Félicitations ! Vous venez de créer le plus petit éditeur de texte au monde [citation needed].

Commentaires

Qu'avez-vous pensé de cette API ? Merci de bien vouloir répondre à cette enquête:

Cette API était-elle intuitive ?

Oui Non

Avez-vous obtenu l'exemple à exécuter ?

Oui Non

Avez-vous d'autres commentaires ? Y a-t-il des fonctionnalités manquantes ? Merci de nous faire part de vos commentaires en répondant à cette enquête. Merci !

L'API Shape Detection donne accès à des détecteurs de formes accélérés (pour les visages humains, par exemple) et fonctionne sur les images fixes et/ou les flux d'images actifs. Les systèmes d'exploitation possèdent des détecteurs de fonctionnalités très performants, tels que FaceDetector pour Android. L'API Shape Detection ouvre ces implémentations natives et les expose via un ensemble d'interfaces JavaScript.

Les fonctionnalités actuellement disponibles sont la détection de visages via l'interface FaceDetector, la détection de codes-barres via l'interface BarcodeDetector et la détection de texte (reconnaissance optique des caractères) dans l'interface TextDetector.

Détection des visages

La détection de visages est une fonctionnalité fascinante de l'API Shape Detection. Pour la tester, nous avons besoin d'une page comportant des visages. Cette page du visage de l'auteur est un bon début. La page d'accueil est illustrée sur la capture d'écran ci-dessous. Sur un navigateur compatible, la zone de délimitation du visage et ses points de repère seront reconnus.

Pour savoir comment obtenir ce code, remixez ou modifiez le projet Glitch, en particulier le fichier script.js.

Si vous souhaitez que le visage de votre auteur soit complètement dynamique et qu'il ne se limite plus au visage de l'auteur, accédez à cette page de résultats de recherche Google qui comprend un grand nombre de visages dans un onglet de navigation privée ou en mode Invité. Sur cette page, ouvrez les outils pour les développeurs Chrome en effectuant un clic droit n'importe où, puis en cliquant sur Inspecter. Dans l'onglet "Console", collez l'extrait ci-dessous. Le code met en évidence les visages détectés avec un cadre rouge semi-transparent.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Notez qu'il y a quelques messages DOMException qui ne sont pas traités. En effet, les images au-dessus de la ligne de flottaison sont intégrées en tant qu'URI de données et sont donc accessibles, tandis que les images en dessous de la ligne de flottaison proviennent d'un autre domaine qui n'est pas configuré pour accepter le protocole CORS. Nous n'avons pas à nous soucier de ce point.

Détection des points de repère sur le visage

En plus des visages, macOS permet également de détecter des points de repère. Pour tester la détection des points de repère sur le visage, collez l'extrait suivant dans la console. Rappel: La composition des points de repère n'est pas du tout parfaite grâce à crbug.com/914348, mais vous pouvez voir où cela va se passer et la puissance de cette fonctionnalité.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);

      const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      landmarkSVG.style.position = 'absolute';
      landmarkSVG.classList.add('landmarks');
      landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
      landmarkSVG.style.width = `${img.width}px`;
      landmarkSVG.style.height = `${img.height}px`;
      face.landmarks.map((landmark) => {                    
        landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
        landmark.locations.map((point) => {          
          return `${scaleX * point.x},${scaleY * point.y} `;
        }).join(' ')
      }" /></svg>`;          
      });
      div.before(landmarkSVG);
    });
  } catch(e) {
    console.error(e);
  }
});

Détection par code-barres

La seconde fonctionnalité de l'API Shape Detection est la détection de codes-barres. Comme précédemment, nous avons besoin d'une page contenant des codes-barres, comme celui-ci. Lorsque vous l'ouvrirez dans un navigateur, les différents codes QR seront déchiffrés. Remixez ou modifiez le projet Glitch, en particulier le fichier script.js pour voir comment cela se déroule.

Et si vous voulez quelque chose de plus dynamique, nous pouvons réutiliser Google Recherche. Cette fois, depuis votre navigateur, accédez à cette page de résultats de recherche Google dans un onglet privé ou en mode Invité. Collez l'extrait ci-dessous dans l'onglet de la console Chrome DevTools. Après un court laps de temps, les codes-barres reconnus sont annotés avec la valeur brute et le type de code-barres.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const barcodes = await new BarcodeDetector().detect(img);
    barcodes.forEach(barcode => {
      const div = document.createElement('div');
      const box = barcode.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.textContent = `${barcode.rawValue}`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Détection de texte

La dernière fonctionnalité de l'API Shape Detection est la détection de texte. Vous connaissez à présent la source: une page contenant des images contenant du texte, comme celle présentant les résultats de recherche Google Livres. Dans les navigateurs compatibles, vous verrez le texte reconnu et un cadre de délimitation autour des passages de texte. Remixez ou modifiez le projet Glitch, en particulier le fichier script.js pour voir comment cela se déroule.

Pour tester cette fonctionnalité de manière dynamique, accédez à cette page de résultats de recherche dans un onglet privé ou en mode Invité. Collez l'extrait ci-dessous dans l'onglet de la console Chrome DevTools. Quelques instants avant, le texte est reconnu. 

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const texts = await new TextDetector().detect(img);
    texts.forEach(text => {
      const div = document.createElement('div');
      const box = text.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.innerHTML = text.rawValue;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Commentaires

Qu'avez-vous pensé de cette API ? Merci de bien vouloir répondre à cette enquête:

Cette API était-elle intuitive ?

Oui Non

Avez-vous obtenu l'exemple à exécuter ?

Oui Non

Avez-vous d'autres commentaires ? Y a-t-il des fonctionnalités manquantes ? Merci de nous faire part de vos commentaires en répondant à cette enquête. Merci !

L'API Web Share Target permet aux applications Web installées de s'enregistrer avec le système d'exploitation sous-jacent en tant que cible de partage pour recevoir du contenu partagé à partir de l'API Web Share ou d'événements système, comme le bouton de partage au niveau du système d'exploitation.

Installer une PWA avec laquelle partager

Pour commencer, vous avez besoin d'une PWA avec laquelle vous pouvez partager des données. Cette fois-ci, Airhorner (lucyly) a remporté le coup, mais l'application de démonstration du partage Web cible est là pour vous aider. Installez l'application sur l'écran d'accueil de votre appareil.

Partager une information avec la PWA

Ensuite, vous avez besoin de partager un contenu, tel qu'une photo à partir de Google Photos. Utilisez le bouton "Partager" et sélectionnez la PWA Scrapbook en tant que cible de partage.

Lorsque vous appuyez sur l'icône de l'application, vous accédez directement à la PWA Scrapbook. La photo est arrivée.

Comment cela fonctionne-t-il ? Pour le savoir, découvrez le fichier manifeste d'application Web PWA&#39. La configuration nécessaire au fonctionnement de l'API Web Share Target se trouve dans la propriété "share_target" du fichier manifeste qui, dans son champ "action", pointe vers une URL décorée de paramètres, comme indiqué dans "params".

La partie partagée partage ensuite le modèle d'URL en conséquence (soit en action via une action de partage, soit par programmation à l'aide de l'API Web Share du développeur), de sorte que la partie réceptionne puisse extraire les paramètres et effectuer des opérations, comme les afficher.

{
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["audio/*", "image/*", "video/*"]
    }]
  }
}

Commentaires

Qu'avez-vous pensé de cette API ? Merci de bien vouloir répondre à cette enquête:

Cette API était-elle intuitive ?

Oui Non

Avez-vous obtenu l'exemple à exécuter ?

Oui Non

Avez-vous d'autres commentaires ? Y a-t-il des fonctionnalités manquantes ? Merci de nous faire part de vos commentaires en répondant à cette enquête. Merci !

Pour éviter de se décharger la batterie, la plupart des appareils se mettent en veille rapidement lorsqu'ils sont inactifs. Bien que cela fonctionne normalement, certaines applications doivent laisser l'écran ou l'appareil activé pour poursuivre leur travail. L'API Wake Lock permet d'empêcher l'appareil de réduire l'intensité de l'écran et de le verrouiller, ou d'empêcher la mise en veille de l'appareil. Cette fonctionnalité permet de créer des expériences qui, jusqu'à présent, nécessitaient une application native.

Configurer un économiseur d'écran

Pour tester l'API Wake Lock, vous devez d'abord vous assurer que votre appareil se mettra en veille. Par conséquent, dans le volet des préférences de votre système d'exploitation, activez l'économiseur d'écran de votre choix et assurez-vous qu'il démarre après une minute. Assurez-vous que cela fonctionne en laissant votre appareil seul pendant cette durée. (Je sais, c'est douloureux.) Les captures d'écran ci-dessous montrent macOS, mais vous pouvez bien sûr essayer sur votre appareil Android mobile ou sur n'importe quelle plate-forme de bureau compatible.

Configurer le wakelock écran

Maintenant que vous savez que l'économiseur d'écran fonctionne, vous utilisez un wakelock de type "screen" pour l'empêcher de faire son travail. Accédez à l'application de démonstration de wakelock, puis cochez la case Activerscreen Wakelock.

À partir de ce moment, un wakelock est actif. Si vous attendez suffisamment pendant une minute pour laisser votre appareil intact, vous verrez à présent que l'économiseur d'écran n'a pas démarré.

Comment cela fonctionne-t-il ? Pour le savoir, accédez au projet Glitch pour l'application de démonstration Wake Lock et consultez script.js. L'extrait du code se trouve dans l'extrait ci-dessous. Ouvrez un nouvel onglet (ou utilisez celui que vous avez ouvert) et collez le code ci-dessous dans la console des outils pour les développeurs Chrome. Lorsque vous cliquez sur la fenêtre, un wakelock qui s'active pendant 10 secondes exactement (voir les journaux de la console) doit s'afficher et l'économiseur d'écran ne doit pas démarrer.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
  let wakeLock = null;
  
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      wakeLock.addEventListener('release', () => {        
        console.log('Wake Lock was released');                    
      });
      console.log('Wake Lock is active');      
    } catch (e) {      
      console.error(`${e.name}, ${e.message}`);
    } 
  };

  requestWakeLock();
  window.setTimeout(() => {
    wakeLock.release();
  }, 10 * 1000);
}

Commentaires

Qu'avez-vous pensé de cette API ? Merci de bien vouloir répondre à cette enquête:

Cette API était-elle intuitive ?

Oui Non

Avez-vous obtenu l'exemple à exécuter ?

Oui Non

Avez-vous d'autres commentaires ? Y a-t-il des fonctionnalités manquantes ? Merci de nous faire part de vos commentaires en répondant à cette enquête. Merci !

L'API Contact Picker nous passionne. Elle permet à une application Web d'accéder à des contacts depuis le gestionnaire de contacts natif de l'appareil. Cette application a donc accès à vos contacts, noms, adresses e-mail et numéros de téléphone. Vous pouvez indiquer s'il vous faut un ou plusieurs contacts, et tous les champs ou certains sous-ensembles de noms, d'adresses e-mail et de numéros de téléphone.

Remarques sur la confidentialité

Une fois l'outil de sélection ouvert, vous pouvez sélectionner les contacts que vous souhaitez partager. Vous remarquerez qu'il n'existe pas d'option "sélectionner toutes les options", laquelle est délibérée. Nous souhaitons que le partage soit une décision réfléchie. De même, l'accès n'est pas continu, mais plutôt une décision ponctuelle.

Accès aux contacts

L'accès aux contacts est une opération simple. Avant l'ouverture du sélecteur, vous pouvez spécifier les champs souhaités (name, email et telephone) et indiquer si vous souhaitez accéder à plusieurs contacts ou à un seul. Vous pouvez tester cette API sur un appareil Android en ouvrant l'application de démonstration. La section pertinente du code source correspond essentiellement à l'extrait ci-dessous:

getContactsButton.addEventListener('click', async () => {
  const contacts = await navigator.contacts.select(
      ['name', 'email'],
      {multiple: true});
  if (!contacts.length) {
    // No contacts were selected, or picker couldn't be opened.
    return;
  }
  console.log(contacts);
});

Copier et coller du texte

Jusqu'à présent, il était impossible de copier et coller des images par programmation dans le presse-papiers du système. Récemment, nous avons ajouté la prise en charge des images à l'API Async Clipboard.

pour copier et coller les images. Ce qui est nouveau, c'est que vous pouvez également écrire des images dans le presse-papiers. L'API du presse-papiers asynchrone était compatible avec la copie et le collage de texte depuis un certain temps. Vous pouvez copier du texte dans le presse-papiers en appelant navigationator.clipboard.writeText(), puis en collé dans le navigateur en appelant navigateurator.clipboard.readText().

Copier et coller des images

Désormais, vous pouvez aussi écrire des images dans le presse-papiers. Pour que cela fonctionne, vous avez besoin des données d'image sous la forme d'un blob que vous transmettez ensuite au constructeur de l'élément du presse-papiers. Enfin, vous pouvez copier cet élément du presse-papiers en appelant navigationator.clipboard.write().

// Copy: Writing image to the clipboard
try {
  const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

Le retrait de l'image à partir du presse-papiers est assez complexe, mais il suffit de récupérer l'objet blob à partir de l'élément du presse-papiers. Puisqu'il peut en exister plusieurs, vous devez les parcourir jusqu'à ce que celle qui vous intéresse vous intéresse. Pour des raisons de sécurité, cela se limite pour le moment aux images PNG. Toutefois, d'autres formats d'images pourront être acceptés à l'avenir.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}

Vous pouvez voir que cette API est en action dans une application de démonstration. Les extraits de son code source pertinents sont intégrés ci-dessus. La copie d'images dans le presse-papiers peut être effectuée sans autorisation, mais vous devez accorder l'autorisation de le coller dans le presse-papiers.

Une fois cette opération effectuée, vous pouvez lire l'image à partir du presse-papiers et la coller dans l'application:

Félicitations, vous avez terminé l'atelier de programmation. Rappelez-vous que la plupart des API sont toujours en cours d'évolution et sont en cours de développement. Par conséquent, l'équipe apprécie vraiment vos commentaires. En effet, seules les interactions avec des personnes comme vous peuvent nous aider à corriger ces API.

Nous vous invitons également à consulter régulièrement la page Pages de destination. Nous mettrons à jour cet outil et y trouverons des articles de fond pour les API sur lesquelles nous travaillons. Restez rock'!

Tom et l'équipe chargée des capacités 🐡