Codelab sulle funzionalità web

1. Introduzione e configurazione

Funzionalità web

Vogliamo colmare il divario di funzionalità tra il web e le app native e consentire agli sviluppatori di creare facilmente esperienze straordinarie sul web aperto. Siamo fermamente convinti che ogni sviluppatore debba avere accesso alle funzionalità necessarie per creare un'esperienza web ottimale e ci impegniamo a rendere il web più efficiente.

Tuttavia, alcune funzionalità, come l'accesso al file system e il rilevamento dell'inattività, sono disponibili in modo nativo, ma non sul web. Queste funzionalità mancanti significano che alcuni tipi di app non possono essere pubblicati sul web o sono meno utili.

Progetteremo e svilupperemo queste nuove funzionalità in modo aperto e trasparente, utilizzando le procedure standard della piattaforma web aperta esistente e raccogliendo feedback anticipati da sviluppatori e altri fornitori di browser durante l'iterazione della progettazione, per garantire un design interoperabile.

Cosa creerai

In questo codelab, giocherai con una serie di API web nuove di zecca o disponibili solo dietro un flag. Pertanto, questo codelab si concentra sulle API stesse e sui casi d'uso che queste API sbloccano, anziché sulla creazione di un prodotto finale specifico.

Cosa imparerai a fare

Questo codelab ti insegnerà le meccaniche di base di diverse API all'avanguardia. Tieni presente che questi meccanismi non sono ancora definitivi e apprezziamo molto il tuo feedback sul flusso per gli sviluppatori.

Che cosa ti serve

Poiché le API presentate in questo codelab sono all'avanguardia, i requisiti per ciascuna API variano. Assicurati di leggere attentamente le informazioni sulla compatibilità all'inizio di ogni sezione.

Come affrontare il codelab

Il codelab non deve necessariamente essere completato in sequenza. Ogni sezione rappresenta un'API indipendente, quindi puoi scegliere liberamente ciò che ti interessa di più.

2. API Badging

L'obiettivo dell'API Badging è attirare l'attenzione degli utenti su ciò che accade in background. Per semplicità della demo in questo codelab, utilizziamo l'API per attirare l'attenzione degli utenti su qualcosa che sta accadendo in primo piano. A questo punto, puoi trasferire mentalmente l'attenzione alle cose che accadono in background.

Installare Airhorner

Per il funzionamento di questa API, è necessaria una PWA installata nella schermata Home, quindi il primo passaggio è installare una PWA, ad esempio la famigerata e famosa in tutto il mondo airhorner.com. Premi il pulsante Installa nell'angolo in alto a destra o utilizza il menu con tre puntini per installare manualmente.

8b7fa8b3c94c6bdd.png

Verrà visualizzato un messaggio di conferma. Fai clic su Installa.

98e90422167ac786.png

Ora hai una nuova icona nel dock del sistema operativo. Fai clic per avviare la PWA. Avrà una propria finestra dell'app e verrà eseguita in modalità autonoma.

Impostare un badge

Ora che hai installato una PWA, devi avere alcuni dati numerici (i badge possono contenere solo numeri) da visualizzare su un badge. Una cosa semplice da contare in The Air Horner è, sigh, il numero di volte in cui è stato suonato il clacson. Con l'app Airhorner installata, prova a suonare la tromba e controlla il badge. Aumenta di uno ogni volta che suoni il clacson.

b5e39de7a1775054.png

Come funziona? In sostanza, il codice è il seguente:

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

Suona il clacson un paio di volte e controlla l'icona della PWA: si aggiornerà ogni volta che suona il clacson. È davvero semplice.

eed10c3ffe59999.png

Cancellazione di un badge

Il contatore arriva fino a 99 e poi ricomincia da capo. Puoi anche ripristinarlo manualmente. Apri la scheda Console di DevTools, incolla la riga riportata di seguito e premi Invio.

navigator.setExperimentalAppBadge(0);

In alternativa, puoi eliminare il badge cancellandolo in modo esplicito, come mostrato nello snippet seguente. L'icona della PWA dovrebbe ora avere di nuovo l'aspetto iniziale, chiaro e senza badge.

navigator.clearExperimentalAppBadge();

33eafb314a3a9f30.png

Feedback

Come ti è sembrata questa API? Aiutaci rispondendo brevemente a questo sondaggio:

L'utilizzo di questa API è stato intuitivo?

No

Sei riuscito a eseguire l'esempio?

No

Hai altro da dire? Mancavano delle funzionalità? Fornisci un breve feedback in questo sondaggio. Grazie.

3. API Native File System

L'API Native File System consente agli sviluppatori di creare potenti app web che interagiscono con i file sul dispositivo locale dell'utente. Dopo che un utente concede l'accesso a un'app web, questa API consente alle app web di leggere o salvare le modifiche direttamente nei file e nelle cartelle sul dispositivo dell'utente.

Leggere un file

L'esempio "Hello, world" dell'API Native File System consiste nel leggere un file locale e ottenere i contenuti del file. Crea un file .txt semplice e inserisci del testo. Successivamente, vai a un sito sicuro (ovvero un sito pubblicato tramite HTTPS) come example.com e apri la console DevTools. Incolla lo snippet di codice riportato di seguito nella console. Poiché l'API Native File System richiede un'attivazione da parte dell'utente, colleghiamo un gestore di doppio clic al documento. Avremo bisogno dell'handle del file in un secondo momento, quindi lo rendiamo una variabile globale.

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

c02679081eb4d538.png

Se fai doppio clic in un punto qualsiasi della pagina example.com, viene visualizzato un selettore di file.

d98962600d62d149.png

Seleziona il file .txt che hai creato in precedenza. I contenuti del file sostituiranno quindi i contenuti effettivi di body di example.com.

eace3d15bd4f8192.png

Salvataggio di un file

Successivamente, vogliamo apportare alcune modifiche. Pertanto, rendiamo body modificabile incollando lo snippet di codice riportato di seguito. Ora puoi modificare il testo come se il browser fosse un editor di testo.

document.body.contentEditable = true;

ca32797417449343.png

Ora vogliamo riscrivere queste modifiche nel file originale. Pertanto, abbiamo bisogno di un writer sull'handle del file, che possiamo ottenere incollando lo snippet riportato di seguito nella console. Anche in questo caso abbiamo bisogno di un gesto dell'utente, quindi questa volta aspettiamo un clic sul documento principale.

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

d2729a8f76f43073.png

Quando fai clic (non doppio clic) sul documento, viene visualizzata una richiesta di autorizzazione. Quando concedi l'autorizzazione, i contenuti del file saranno quelli che hai modificato in body in precedenza. Verifica le modifiche aprendo il file in un altro editor (o ricomincia la procedura facendo di nuovo doppio clic sul documento e riaprendo il file).

2eccf61fe4a46109.png

202263abdedae737.png

Complimenti! Hai appena creato il più piccolo editor di testo al mondo [citation needed].

Feedback

Come ti è sembrata questa API? Aiutaci rispondendo brevemente a questo sondaggio:

L'utilizzo di questa API è stato intuitivo?

No

Sei riuscito a eseguire l'esempio?

No

Hai altro da dire? Mancavano delle funzionalità? Fornisci un breve feedback in questo sondaggio. Grazie.

4. API Shape Detection

L'API Shape Detection fornisce l'accesso a rilevatori di forme accelerati (ad es. per i volti umani) e funziona su immagini statiche e/o feed di immagini live. I sistemi operativi dispongono di rilevatori di funzionalità performanti e altamente ottimizzati, come FaceDetector di Android. L'API Shape Detection apre queste implementazioni native e le espone tramite un insieme di interfacce JavaScript.

Al momento, le funzionalità supportate sono il riconoscimento facciale tramite l'interfaccia FaceDetector, il rilevamento di codici a barre tramite l'interfaccia BarcodeDetector e il riconoscimento del testo (riconoscimento ottico dei caratteri) tramite l'interfaccia TextDetector.

Riconoscimento facciale

Una funzionalità affascinante dell'API Shape Detection è il rilevamento dei volti. Per testarlo, abbiamo bisogno di una pagina con dei volti. Questa pagina con il volto dell'autore è un buon punto di partenza. Avrà un aspetto simile a quello dello screenshot riportato di seguito. In un browser supportato, verranno riconosciuti il riquadro di selezione del volto e i punti di riferimento del volto.

Puoi vedere quanto poco codice è stato necessario per realizzarlo remixando o modificando il progetto Glitch, in particolare il file script.js.

f4aa7b77a0a1d1f5.png

Se vuoi passare alla modalità completamente dinamica e non lavorare solo con il volto dell'autore, vai a questa pagina dei risultati di ricerca di Google piena di volti in una scheda privata o in modalità ospite. Ora, in quella pagina, apri gli Strumenti per sviluppatori di Chrome facendo clic con il tasto destro del mouse in un punto qualsiasi e poi facendo clic su Ispeziona. Poi, nella scheda Console, incolla lo snippet riportato di seguito. Il codice evidenzia i volti rilevati con un riquadro rosso semitrasparente.

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);
  }
});

Noterai che sono presenti alcuni messaggi DOMException e che non tutte le immagini vengono elaborate. Questo perché le immagini above the fold sono incorporate come URI di dati e sono quindi accessibili, mentre le immagini below the fold provengono da un dominio diverso che non è configurato per supportare CORS. Ai fini della demo, non dobbiamo preoccuparci di questo aspetto.

Rilevamento dei punti di riferimento del volto

Oltre ai volti, macOS supporta anche il rilevamento dei punti di riferimento del viso. Per testare il rilevamento dei punti di riferimento del volto, incolla il seguente snippet nella console. Promemoria: l'elenco dei punti di riferimento non è perfetto a causa di crbug.com/914348, ma puoi vedere dove si sta andando e quanto può essere potente questa funzionalità.

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);
  }
});

Rilevamento dei codici a barre

La seconda funzionalità dell'API Shape Detection è il rilevamento dei codici a barre. Come prima, abbiamo bisogno di una pagina con codici a barre, ad esempio questa. Quando lo apri in un browser, vedrai i vari codici QR decifrati. Remixa o modifica il progetto Glitch, in particolare il file script.js, per vedere come viene eseguita l'operazione.

7778003ff472389b.png

Se vuoi qualcosa di più dinamico, possiamo utilizzare di nuovo la Ricerca immagini di Google. Questa volta, nel browser vai a questa pagina dei risultati della Ricerca Google in una scheda privata o in modalità ospite. Ora incolla lo snippet riportato di seguito nella scheda Console di Chrome DevTools. Dopo un breve lasso di tempo, i codici a barre riconosciuti verranno annotati con il valore non elaborato e il tipo di codice a barre.

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);
  }
});

Rilevamento testo

L'ultima funzionalità dell'API Shape Detection è il rilevamento del testo. Ormai sai la procedura: ci serve una pagina con immagini contenenti testo, come questa con i risultati della scansione di Google Libri. Nei browser supportati, vedrai il testo riconosciuto e un riquadro di selezione disegnato intorno ai passaggi di testo. Remixa o modifica il progetto Glitch, in particolare il file script.js, per vedere come viene eseguita l'operazione.

ec2be17d1e4d01ba.png

Per testare questa funzionalità in modo dinamico, vai a questa pagina dei risultati di ricerca in una scheda privata o in modalità ospite. Ora incolla lo snippet riportato di seguito nella scheda Console di Chrome DevTools. Con un po' di attesa, parte del testo verrà riconosciuta.

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);
  }
});

Feedback

Come ti è sembrata questa API? Aiutaci rispondendo brevemente a questo sondaggio:

L'utilizzo di questa API è stato intuitivo?

No

Sei riuscito a eseguire l'esempio?

No

Hai altro da dire? Mancavano delle funzionalità? Fornisci un breve feedback in questo sondaggio. Grazie.

5. API Web Share Target

L'API Web Share Target consente alle app web installate di registrarsi con il sistema operativo sottostante come destinazione di condivisione per ricevere contenuti condivisi dall'API Web Share o da eventi di sistema, come il pulsante di condivisione a livello di sistema operativo.

Installare una PWA per la condivisione

Come primo passo, devi avere una PWA da condividere. Questa volta, Airhorner (per fortuna) non ti aiuterà, ma l'app demo Web Share Target ti coprirà le spalle. Installa l'app nella schermata Home del dispositivo.

925df16a12638bb2.png

Condividere qualcosa con la PWA

Poi, devi avere qualcosa da condividere, ad esempio una foto di Google Foto. Utilizza il pulsante Condividi e seleziona la PWA di Scrapbook come destinazione di condivisione.

7216e8bb1be6d6db.png

Quando tocchi l'icona dell'app, si apre direttamente l'app web progressiva Scrapbook e la foto è lì.

9016985cb4bb48fe.png

Come funziona? Per scoprirlo, esplora il manifest dell'app web della PWA Scrapbook. La configurazione per far funzionare l'API Web Share Target si trova nella proprietà "share_target" del manifest, che nel campo "action" punta a un URL decorato con i parametri elencati in "params".

Il lato della condivisione compila quindi questo modello di URL di conseguenza (tramite un'azione di condivisione o controllato a livello di programmazione dallo sviluppatore utilizzando l'API Web Share), in modo che il lato ricevente possa estrarre i parametri e utilizzarli, ad esempio per visualizzarli.

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

Feedback

Come ti è sembrata questa API? Aiutaci rispondendo brevemente a questo sondaggio:

L'utilizzo di questa API è stato intuitivo?

No

Sei riuscito a eseguire l'esempio?

No

Hai altro da dire? Mancavano delle funzionalità? Fornisci un breve feedback in questo sondaggio. Grazie.

6. API Wake Lock

Per evitare di scaricare la batteria, la maggior parte dei dispositivi entra rapidamente in modalità sospensione quando viene lasciata inattiva. Anche se questo va bene la maggior parte delle volte, alcune applicazioni devono mantenere lo schermo o il dispositivo attivo per completare il proprio lavoro. L'API Wake Lock fornisce un modo per impedire al dispositivo di oscurare e bloccare lo schermo o di attivare la modalità di sospensione. Questa funzionalità consente di creare nuove esperienze che, fino ad ora, richiedevano un'app nativa.

Configura un salvaschermo

Per testare l'API Wake Lock, devi prima assicurarti che il dispositivo andrebbe in modalità Sospensione. Pertanto, nel riquadro delle preferenze del sistema operativo, attiva un salvaschermo a tua scelta e assicurati che si avvii dopo 1 minuto. Assicurati che funzioni lasciando il dispositivo inattivo per esattamente quel periodo di tempo (sì, lo so, è una tortura). Gli screenshot riportati di seguito mostrano macOS, ma puoi ovviamente provare questa procedura sul tuo dispositivo mobile Android o su qualsiasi piattaforma desktop supportata.

6f345e8c2b6c22c.png

Impostare un blocco di riattivazione dello schermo

Ora che sai che il salvaschermo funziona, utilizzerai un wake lock di tipo "screen" per impedire al salvaschermo di svolgere la sua funzione. Vai all'app demo Wake Lock e fai clic su Attiva .

screen Casella di controllo Wakelock.

12ed15dd94f51d4d.png

A partire da quel momento, è attiva una sospensione della riproduzione. Se hai la pazienza di lasciare il dispositivo intatto per un minuto, vedrai che il salvaschermo non è stato avviato.

Come funziona? Per scoprirlo, vai al progetto Glitch per l'app demo Wake Lock e controlla script.js. Il succo del codice è nello snippet riportato di seguito. Apri una nuova scheda (o usa una scheda già aperta) e incolla il codice riportato di seguito in una console degli strumenti per sviluppatori di Chrome. Quando fai clic sulla finestra, dovresti vedere un wake lock attivo per esattamente 10 secondi (vedi i log della console) e il salvaschermo non dovrebbe avviarsi.

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);
}

621c2654d06a7cce.png

Feedback

Come ti è sembrata questa API? Aiutaci rispondendo brevemente a questo sondaggio:

L'utilizzo di questa API è stato intuitivo?

No

Sei riuscito a eseguire l'esempio?

No

Hai altro da dire? Mancavano delle funzionalità? Fornisci un breve feedback in questo sondaggio. Grazie.

7. API Contact Picker

Un'API che ci entusiasma molto è l'API Contact Picker. Consente a un'app web di accedere ai contatti dal gestore di contatti nativo del dispositivo, in modo che l'app web abbia accesso a nomi, indirizzi email e numeri di telefono dei tuoi contatti. Puoi specificare se vuoi uno o più contatti e se vuoi tutti i campi o solo un sottoinsieme di nomi, indirizzi email e numeri di telefono.

Considerazioni sulla privacy

Una volta aperto il selettore, puoi selezionare i contatti che vuoi condividere. Noterai che non è presente l'opzione "Seleziona tutto", il che è intenzionale: vogliamo che la condivisione sia una decisione consapevole. Allo stesso modo, l'accesso non è continuo, ma una decisione una tantum.

Accesso ai contatti

Accedere ai contatti è un'operazione semplice. Prima che si apra il selettore, puoi specificare i campi che vuoi (le opzioni sono name, email e telephone) e se vuoi accedere a più contatti o a uno solo. Puoi testare questa API su un dispositivo Android aprendo l'applicazione demo. La sezione pertinente del codice sorgente è essenzialmente lo snippet riportato di seguito:

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);
});

de94db2dfb7c67af.png

8. API Async Clipboard

Copiare e incollare testo

Fino ad ora, non era possibile copiare e incollare immagini negli appunti del sistema in modo programmatico. Di recente abbiamo aggiunto il supporto delle immagini all'API Async Clipboard,

in modo da poter copiare e incollare le immagini. La novità è che ora puoi anche scrivere immagini negli appunti. L'API asincrona degli appunti supporta da tempo la copia e l'incolla del testo. Puoi copiare il testo negli appunti chiamando navigator.clipboard.writeText() e poi incollarlo chiamando navigator.clipboard.readText().

Copiare e incollare immagini

Ora puoi anche scrivere immagini negli appunti. Affinché funzioni, devi disporre dei dati dell'immagine come blob, che poi passi al costruttore dell'elemento degli appunti. Infine, puoi copiare questo elemento degli appunti chiamando navigator.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);
}

L'incollatura dell'immagine dagli appunti sembra piuttosto complessa, ma in realtà consiste solo nel recuperare il blob dall'elemento degli appunti. Poiché possono essercene più di uno, devi scorrere l'elenco finché non trovi quello che ti interessa. Per motivi di sicurezza, al momento questa funzionalità è limitata alle immagini PNG, ma in futuro potrebbero essere supportati altri formati di immagine.

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);
  }
}

Puoi vedere questa API in azione in un'app demo. Gli snippet pertinenti del relativo codice sorgente sono incorporati sopra. La copia delle immagini negli appunti può essere eseguita senza autorizzazione, ma devi concedere l'accesso per incollare dagli appunti.

99f6dbf35ff4f393.png

Dopo aver concesso l'accesso, puoi leggere l'immagine dagli appunti e incollarla nell'applicazione:

ace5945f4aca70ff.png

9. Ce l'hai fatta.

Congratulazioni, sei arrivato alla fine del codelab. Ti ricordiamo ancora una volta che la maggior parte delle API è ancora in fase di sviluppo e viene aggiornata attivamente. Pertanto, il team apprezza molto il tuo feedback, in quanto solo l'interazione con persone come te ci aiuterà a perfezionare queste API.

Ti invitiamo inoltre a consultare spesso la nostra pagina di destinazione delle funzionalità. Lo aggiorneremo costantemente e contiene puntatori a tutti gli articoli approfonditi per le API su cui lavoriamo. Continua così!

Tom e l'intero team delle funzionalità 🐡