Codelab für Webfunktionen

Webfunktionen

Wir möchten die Lücke zwischen den Funktionen im Web und nativ schließen, damit Entwickler problemlos Websites erstellen können. Wir sind der Meinung, dass jeder Entwickler die Möglichkeit haben sollte, die notwendigen Funktionen zu haben, um eine positive Nutzererfahrung zu bieten. Deswegen setzen wir uns für ein noch leistungsfähigeres Web ein.

Es gibt jedoch einige Funktionen wie den Dateizugriff und die Inaktivitätserkennung, die zwar nativ verfügbar sind, aber im Web nicht verfügbar sind. Diese Funktionen bedeuten, dass einige Arten von Apps nicht im Web zur Verfügung gestellt oder weniger nützlich sind.

Wir werden diese neuen Funktionen auf offene und transparente Weise entwerfen und entwickeln. Dabei werden die vorhandenen Standards für offene Webplattformen berücksichtigt. Zugleich erhalten wir von Entwicklern und anderen Browseranbietern erstes Feedback, um das Design weiter zu verbessern, um für interoperables Design zu sorgen.

Sehen Sie sich die weiter laufenden Funktionen an.

Inhalte, die Sie erstellen werden

In diesem Codelab spielen Sie mehrere neue APIs, die völlig neu oder nur nach einem Flag verfügbar sind. In diesem Codelab geht es also um die APIs selbst und um Anwendungsfälle, die mit diesen APIs entsperrt werden, anstatt auf das Erstellen eines bestimmten Endprodukts.

Lerninhalte

In diesem Codelab lernen Sie die Grundlagen der verschiedenen innovativer APIs kennen. Diese Mechanik ist noch nicht vollständig eingestellt und wir freuen uns über dein Feedback zum Entwicklerprozess.

Voraussetzungen

Da die APIs in diesem Codelab wirklich auf dem neuesten Stand sind, unterscheiden sich auch die Anforderungen für jede API. Lesen Sie sich die Kompatibilitätsinformationen zu Beginn jedes Abschnitts sorgfältig durch.

Grundlagen des Codelabs

Das Codelab ist nicht unbedingt aufeinanderfolgend. Jeder Abschnitt steht für eine unabhängige API, Sie können also kostenlos entscheiden, was Sie am meisten interessiert.

Hinweis:Wir arbeiten an dieser API im Rahmen des neuen Funktionen-Projekts. Dieses Codelab basiert auf dem aktuellen Design. Die API kann sich noch ändern, bevor die Funktion standardisiert wird. Details hierzu finden Sie im Artikel zur Badge API.

Kompatibilität: Die Badge API steht hinter dem Flag #enable-experimental-web-platform-features und ist als Ursprungstest. Derzeit ist diese Funktion nur unter Windows und macOS verfügbar und funktioniert nur bei installierten PWAs.

Ziel der Badge API ist es, Nutzer auf Aktivitäten im Hintergrund aufmerksam zu machen. Der Einfachheit halber verwenden wir die API in diesem Codelab, um die Nutzer auf etwas aufmerksam zu machen, das im Vordergrund geschieht. Anschließend kannst du die psychische Übertragung von Ereignissen im Hintergrund vornehmen.

Airhorner installieren

Damit diese API funktioniert, benötigen Sie eine PWA, die auf dem Startbildschirm installiert ist. Der erste Schritt besteht darin, eine PWA zu installieren, zum Beispiel die weltberühmte airhorner.com. Klicken Sie einfach rechts oben auf die Schaltfläche Installieren oder verwenden Sie das Dreipunkt-Menü.

Klicken Sie im Bestätigungsfenster auf Installieren.

Das Dock für Ihr Betriebssystem hat jetzt ein neues Symbol. Klicken Sie darauf, um die PWA zu starten. Es hat ein eigenes App-Fenster und wird im eigenständigen Modus ausgeführt.

Logo festlegen

Ihre PWA ist jetzt installiert. Sie benötigen nun einige numerische Daten (nur Logos können für Logos angezeigt werden). Ein direktes Signal in der Lufthörer ist Seufz, also wie oft die Sirene angehört wird. Wenn die Airhorn App installiert ist, probiere es einfach mit der Sirene. Jedes Mal, wenn Sie ein Hupen hören, zählt dies als ein.

Wie funktioniert das? Im Grunde lautet der Code:

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

Hinweis: Wenn Sie ein Uncaught ReferenceError erhalten, müssen Sie das Flag #enable-experimental-web-platform-features festlegen.

Lassen Sie das Airhorn mehrmals hören und prüfen Sie das Symbol von PWAs: Es wird alle Male aktualisiert. So einfach ist das.

Abzeichen entfernen

Der Zähler beträgt bis zu 99 und beginnt dann von vorn. Sie können ihn auch manuell zurücksetzen. Öffnen Sie den Tab „Entwicklertools“, fügen Sie die Zeile unten ein und drücken Sie die Eingabetaste.

navigator.setExperimentalAppBadge(0);

Alternativ können Sie es entfernen, indem Sie es explizit löschen, wie im folgenden Snippet zu sehen ist. Das PWA-Symbol sollte jetzt wieder wie am Anfang klar und ohne Logo zu sehen sein.

navigator.clearExperimentalAppBadge();

Feedback

Wie findest du diese API? Bitte hilf uns, indem du kurz an dieser Umfrage teilnimmst:

Ist die Verwendung dieser API intuitiv?

Ja Nein

Haben Sie das Beispiel ausgeführt?

Ja Nein

Haben Sie noch Feedback? Fehlen bestimmte Funktionen? Wir würden uns freuen, wenn Sie uns in dieser Umfrage Feedback geben. Vielen Dank!

Hinweis: Wir arbeiten an dieser API im Rahmen des neuen Funktionen-Projekts. Dieses Codelab basiert auf dem aktuellen Design. Die API kann sich noch ändern, bevor die Funktion standardisiert wird. Details finden Sie im Beitrag Native File System API.

Kompatibilität: Die Native File System API ist hinter dem Flag #native-file-system-api und als Ursprungstest verfügbar.

Mit der Native File System API können Entwickler leistungsstarke Webanwendungen erstellen, die mit Dateien auf dem lokalen Gerät des Nutzers interagieren. Sobald ein Nutzer eine Web-App gewährt, können mit dieser API Änderungen an Dateien und Ordnern auf dem Gerät des Nutzers direkt gelesen und gespeichert werden.

Dateien lesen

Mit der Hello File World API werden lokale Dateien gelesen und der Inhalt der Datei abgerufen. Erstellen Sie eine einfache .txt-Datei und geben Sie Text ein. Gehen Sie als Nächstes zu einer sicheren Website, also einer über HTTPS bereitgestellten Website, wie example.com und öffnen Sie die Entwicklertools. Fügen Sie das Code-Snippet unten in der Konsole ein. Weil die Native File System API eine Nutzergeste erfordert, fügen wir dem Dokument einen Doppelklick-Handler hinzu. Wir benötigen die Dateianforderung später, also machen wir sie einfach zu einer globalen Variable.

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

Wenn Sie dann auf der Seite example.com doppelt klicken, wird eine Dateiauswahl angezeigt.

Hinweis: Wenn Sie ein Uncaught ReferenceError erhalten, müssen Sie das Flag #native-file-system-api festlegen.

Wähle die .txt-Datei aus, die du zuvor erstellt hast. Der Dateiinhalt ersetzt dann den tatsächlichen body-Inhalt von example.com.

Dateien speichern

Als Nächstes nehmen wir einige Änderungen vor. Fügen Sie daher unten in das Code-Snippet ein, um die body zu bearbeiten. Jetzt können Sie den Text so bearbeiten, als ob der Browser ein Texteditor wäre.

document.body.contentEditable = true;

Nun möchten wir diese Änderungen in die Originaldatei übernehmen. Deshalb benötigen wir einen Autor im Dateigriff, den Sie abrufen können, indem Sie das Snippet unten in der Konsole einfügen. Auch hier brauchen wir eine Nutzergeste. Das heißt, diesmal warten wir auf einen Klick auf das Hauptdokument.

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

Wenn Sie jetzt (nicht doppelt) auf das Dokument klicken, wird eine Berechtigungsaufforderung angezeigt. Wenn Sie die Berechtigung gewähren, ist der Inhalt der Datei alles, was Sie vorher in body bearbeitet haben. Bestätigen Sie die Änderungen, indem Sie die Datei in einem anderen Editor öffnen. Alternativ starten Sie den Vorgang noch einmal, indem Sie auf das Dokument doppelklicken und die Datei wieder öffnen.

Glückwunsch! Du hast gerade den kleinsten Texteditor der Welt erstellt: [citation needed].

Feedback

Wie findest du diese API? Bitte hilf uns, indem du kurz an dieser Umfrage teilnimmst:

Ist die Verwendung dieser API intuitiv?

Ja Nein

Haben Sie das Beispiel ausgeführt?

Ja Nein

Haben Sie noch Feedback? Fehlen bestimmte Funktionen? Wir würden uns freuen, wenn Sie uns in dieser Umfrage Feedback geben. Vielen Dank!

Hinweis:Wir arbeiten an dieser API im Rahmen des neuen Funktionen-Projekts. Dieses Codelab basiert auf dem aktuellen Design. Die API kann sich noch ändern, bevor die Funktion standardisiert wird. Details hierzu finden Sie im Blogpost zur Shape Detection API.

Kompatibilität: Die Shape Detection API ist hinter dem Flag #enable-experimental-web-platform-features verfügbar. Die Unterstützung für diese API hängt von den Funktionen der Hardwarebeschleunigung ab, die je nach Betriebssystem variieren:

• FaceDetector: Android, macOS, Windows
• BarcodeDetector: Android, macOS
• TextDetector: Android, macOS (nur Begrenzungsrahmen), Windows

Die Shape Detection API ermöglicht den Zugriff auf beschleunigte Form-Detektoren (z.B. für menschliche Gesichter) und funktioniert mit Standbildern und/oder Live-Bildfeeds. Betriebssysteme haben leistungsfähige und hochoptimierte Funktionsdetektoren wie den FaceDetektor von Android. Die Shape Detection API öffnet diese nativen Implementierungen und stellt sie über eine Reihe von JavaScript-Schnittstellen bereit.

Aktuell werden die Gesichtswiedererkennung über die FaceDetector-Schnittstelle, die Barcode-Erkennung über die BarcodeDetector-Schnittstelle und die Texterkennung (optische Zeichenerkennung) über die TextDetector-Schnittstelle unterstützt.

Gesichtserkennung

Eine faszinierende Funktion der Shape Detection API ist die Gesichtserkennung. Um die Funktion zu testen, benötigen wir eine Seite, die Gesichter enthält. Diese Seite mit dem Gesicht des Autors ist ein guter Anfang. Das Screenshot sieht ungefähr so aus: In einem unterstützten Browser werden der Rand des Gesichts und die Sehenswürdigkeiten erkannt.

Möglicherweise wirst du sehen, dass auf dem Screenshot derzeit Sehenswürdigkeiten zu sehen sind. Das liegt an crbug.com/914348.

Bald ist es:

Wie viel Code dafür erforderlich ist, siehst du, wenn du das Glitch-Projekt neu erstellst oder bearbeitest, vor allem die script.js-Datei.

Wenn Sie vollständig dynamisch arbeiten und nicht nur mit dem Gesicht des Autors arbeiten möchten, rufen Sie diese Google-Suchergebnisseite voller Gesichter auf einem privaten Tab oder im Gastmodus auf. Öffnen Sie auf dieser Seite die Chrome-Entwicklertools. Klicken Sie dazu mit der rechten Maustaste auf eine beliebige Stelle und wählen Sie dann Untersuchen aus. Fügen Sie als Nächstes auf dem Tab „Konsole“ das Snippet unten ein. Der Code hebt erkannte Gesichter mit einem halbtransparenten roten Feld hervor.

Im Allgemeinen ist es keine gute Idee, Code einfach zu kopieren und in Produktions-Websites einzufügen. Google warnt Sie zu Recht, dies nicht zu tun. In diesem Fall ist das aber in Ordnung, weil wir nicht angemeldet sind, also der private Tab oder der Gastmodus.

Hinweis:Wenn Sie ein Uncaught ReferenceError erhalten, müssen Sie das Flag #enable-experimental-web-platform-features festlegen.

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

Sie werden feststellen, dass einige DOMException-Nachrichten vorhanden sind und nicht alle Bilder verarbeitet werden. Der Grund dafür ist, dass Bilder im Above the fold (ohne Scrollen sichtbar) als Daten-URIs eingebettet werden und somit über below the fold-Bilder aus einer anderen Domain stammen, die nicht für CORS konfiguriert ist. Zur Demonstration müssen wir uns keine Gedanken darüber machen.

Gesichtserkennungserkennung

macOS unterstützt nicht nur Gesichter, sondern auch Gesichter, die per Gesichtswiedererkennung erkannt wurden. Wenn Sie testen möchten, ob Gesichter erkannt wurden, fügen Sie das folgende Snippet in die Console ein. Erinnerung: Die Liste der Sehenswürdigkeiten ist aufgrund von crbug.com/914348 nicht perfekt, aber du kannst sehen, in welche Richtung diese Funktion geht und wie leistungsstark diese Funktion sein kann.

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

Barcodeerkennung

Die zweite Funktion der Shape Detection API ist die Barcodeerkennung. Ähnlich wie zuvor benötigen wir eine Seite, die Barcodes enthält. Wenn Sie den Browser in einem Browser öffnen, werden die verschiedenen QR-Codes entschlüsselt. Durch Remixen oder Bearbeiten des Glitch-Projekts, insbesondere der script.js-Datei, kannst du sehen, wie es funktioniert.

Wenn Sie ein dynamischeres Bild haben, können wir wieder die Google Bildersuche verwenden. Dieses Mal können Sie die Google-Suchergebnisseite in Ihrem Browser auf einem privaten Tab oder im Gastmodus aufrufen. Fügen Sie das Snippet unten in den Tab „Chrome-Entwicklertools“ ein. Die erkannten Barcodes werden nach kurzer Zeit mit dem Rohwert und dem Barcodetyp vermerkt.

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

Texterkennung

Die letzte Funktion der Shape Detection API ist die Texterkennung. Sie wissen jetzt, wie die Übung funktioniert: Wir benötigen eine Seite mit Bildern, die Text enthalten, wie hier die Ergebnisse von Google Books-Scans. In unterstützten Browsern sehen Sie den erkannten Text und einen Begrenzungsrahmen um Textabschnitte. Durch Remixen oder Bearbeiten des Glitch-Projekts, insbesondere der script.js-Datei, kannst du sehen, wie es funktioniert.

Wenn Sie diese Funktion dynamisch testen möchten, rufen Sie die Suchergebnisseite auf einem privaten Tab oder im Gastmodus auf. Fügen Sie das Snippet unten in den Tab „Chrome-Entwicklertools“ ein. Mit ein wenig Geduld werden einige Inhalte erkannt.

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

Wie findest du diese API? Bitte hilf uns, indem du kurz an dieser Umfrage teilnimmst:

Ist die Verwendung dieser API intuitiv?

Ja Nein

Haben Sie das Beispiel ausgeführt?

Ja Nein

Haben Sie noch Feedback? Fehlen bestimmte Funktionen? Wir würden uns freuen, wenn Sie uns in dieser Umfrage Feedback geben. Vielen Dank!

Hinweis:Wir haben diese API im Rahmen des neuen Funktionsprojekts entwickelt. Die API ist jetzt gestartet 🎉 und dieses Codelab basiert auf dem aktuellen stabilen Design. Details finden Sie im Web Share Target API-Beitrag.

Kompatibilität: Die Web Share Target API ist unter Android, Windows, Linux und Chrome OS verfügbar.

Über die Web Share Target API können installierte Web-Apps beim zugrunde liegenden Betriebssystem als Freigabeziel registriert werden. So können sie freigegebene Inhalte über die Web Share API oder über Systemereignisse wie die Schaltfläche „Teilen“ auf Betriebssystemebene empfangen.

PWA installieren und teilen

Der erste Schritt besteht darin, dass Sie eine PWA teilen können. Diesmal hat Airhorner (glücklicherweise) nichts unternommen, aber die Web Share Target-Demo-App unterstützt dich. Installieren Sie die App auf dem Startbildschirm Ihres Geräts.

Etwas mit der PWA teilen

Als Nächstes brauchen Sie etwas, das Sie teilen möchten, z. B. ein Foto aus Google Fotos. Verwende die Schaltfläche „Teilen“ und wähle die Scrapbook-PWA als Freigabeziel aus.

Wenn Sie auf das App-Symbol tippen, gelangen Sie direkt zur Scrapbook-PWA und das Foto befindet sich direkt dort.

Wie funktioniert das? Das erfährst du im Web-App-Manifest der Scrapbook-PWA. Die Konfiguration, damit die Web Share Target API funktioniert, befindet sich in der "share_target"-Property des Manifests. Verweist im Feld "action" auf eine URL, die mit Parametern wie "params" aufgeführt ist.

Die Seite zum Teilen wird dann entsprechend in die URL-Vorlage eingetragen – entweder über eine Freigabeaktion oder programmatisch vom Entwickler über die Web Share API. So können die Parameter von der empfangenden Seite extrahiert und mit ihnen lassen sich beispielsweise Parameter anzeigen.

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

Feedback

Wie findest du diese API? Bitte hilf uns, indem du kurz an dieser Umfrage teilnimmst:

Ist die Verwendung dieser API intuitiv?

Ja Nein

Haben Sie das Beispiel ausgeführt?

Ja Nein

Haben Sie noch Feedback? Fehlen bestimmte Funktionen? Wir würden uns freuen, wenn Sie uns in dieser Umfrage Feedback geben. Vielen Dank!

Hinweis: Wir arbeiten an dieser API im Rahmen des neuen Funktionen-Projekts. Dieses Codelab basiert auf dem aktuellen Design. Die API kann sich noch ändern, bevor die Funktion standardisiert wird. Aktuelle Informationen finden Sie im Beitrag zur Wakelock API.

Kompatibilität: Die Wakelock API ist unter Android, Windows, Linux und macOS hinter dem Flag #enable-experimental-web-platform-features verfügbar.

Die meisten Geräte wechseln in den Ruhemodus, wenn sie inaktiv sind. So wird der Akku nicht belastet. In den meisten Fällen ist das in den meisten Fällen in Ordnung, aber bei einigen Anwendungen muss der Bildschirm oder das Gerät aktiviert bleiben, um die Arbeit abzuschließen. Mit der Wakelock API können Sie verhindern, dass das Display gedimmt und gesperrt wird, oder verhindern, dass es in den Ruhemodus wechselt. Dadurch werden neue Funktionen ermöglicht, für die bisher eine native App erforderlich war.

Bildschirmschoner einrichten

Wenn Sie die Wakelock API testen möchten, müssen Sie zuerst prüfen, ob sich Ihr Gerät in den Ruhemodus befindet. Aktivieren Sie daher im Einstellungsbereich Ihres Betriebssystems einen Bildschirmschoner Ihrer Wahl und achten Sie darauf, dass er nach 1 Minute beginnt. Achte darauf, dass es funktioniert, indem du dein Gerät genau für diese Zeit alleine hältst. Die folgenden Screenshots zeigen macOS, aber du kannst es natürlich auf deinem mobilen Android-Gerät oder einer beliebigen unterstützten Desktop-Plattform testen.

Display-Wakelock festlegen

Da Sie nun wissen, dass der Bildschirmschoner funktioniert, verwenden Sie eine Wakelock vom Typ "screen", um zu verhindern, dass der Bildschirmschoner ausgeführt wird. Gehen Sie zur Demoversion der Wakelock-App und klicken Sie auf das Kästchen Aktivieren screen Wakelock.

Ab diesem Zeitpunkt ist eine Wakelock-Funktion aktiv. Wenn Sie so geduldig sind, Ihr Gerät eine Minute lang nicht zu berühren, sehen Sie, dass der Bildschirmschoner tatsächlich nicht gestartet wurde.

Wie funktioniert das? Weitere Informationen finden Sie im Glitch-Projekt für die Wakelock-Demo-App und in script.js. Die Registry des Codes befindet sich im folgenden Snippet. Öffnen Sie einen neuen Tab oder verwenden Sie einen beliebigen geöffneten Tab und fügen Sie dann den Code unten in die Chrome-Entwicklertools ein. Wenn du auf das Fenster klickst, solltest du einen Wakelock sehen, der genau 10 Sekunden lang aktiv ist (siehe Konsolenprotokolle), und dein Bildschirmschoner sollte gestartet werden.

Hinweis: Wenn Sie ein Uncaught ReferenceError erhalten, müssen Sie das Flag #enable-experimental-web-platform-features festlegen.

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

Feedback

Wie findest du diese API? Bitte hilf uns, indem du kurz an dieser Umfrage teilnimmst:

Ist die Verwendung dieser API intuitiv?

Ja Nein

Haben Sie das Beispiel ausgeführt?

Ja Nein

Haben Sie noch Feedback? Fehlen bestimmte Funktionen? Wir würden uns freuen, wenn Sie uns in dieser Umfrage Feedback geben. Vielen Dank!

Hinweis:Wir arbeiten an dieser API im Rahmen des neuen Funktionen-Projekts. Dieses Codelab basiert auf dem aktuellen Design. Die API kann sich noch ändern, bevor die Funktion standardisiert wird. Aktuelle Informationen finden Sie im Beitrag zur Contact Picker API.

Kompatibilität: Die Wakelock API ist auf Android-Geräten hinter dem Flag #enable-experimental-web-platform-features verfügbar.

Eine API, die wir besonders schätzen, ist die Contact Picker API. Damit kann eine Web-App auf Kontakte über den nativen Kontaktmanager des Geräts zugreifen, sodass die Web-App Zugriff auf Ihre Kontakte, E-Mail-Adressen und Telefonnummern hat. Sie können festlegen, ob Sie nur einen oder mehrere Kontakte und alle Felder oder nur einen Teil der Namen, E-Mail-Adressen und Telefonnummern verwenden möchten.

Datenschutz

Wenn die Auswahl geöffnet wird, können Sie die Kontakte auswählen, die Sie teilen möchten. Hinweis: Es gibt keine Option, die bewusst ist: Wir möchten, dass die Entscheidung bewusst ist. Auch der Zugriff erfolgt nicht kontinuierlich, sondern ist eine einmalige Entscheidung.

Auf Kontakte zugreifen

Der Zugriff auf Kontakte ist ganz einfach. Vor dem Öffnen der Auswahl können Sie die gewünschten Felder auswählen (die Optionen sind name, email und telephone) und ob Sie auf mehrere oder nur einen Kontakt zugreifen möchten. Sie können diese API auf einem Android-Gerät testen. Öffnen Sie dazu die Demoanwendung. Der Abschnitt mit dem Quellcode ist im Wesentlichen das folgende Snippet:

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

Hinweis: Wir haben diese API im Rahmen des neuen Funktionsprojekts entwickelt. Die API ist jetzt gestartet 🎉 und dieses Codelab basiert auf dem aktuellen stabilen Design. Aktuelle Informationen findest du im Artikel zur Async Clipboard API.

Text kopieren und einfügen

Bisher war es nicht möglich, Bilder programmatisch in die Zwischenablage des Systems zu kopieren und einzufügen. Wir haben vor Kurzem Bildunterstützung für die Async Clipboard API hinzugefügt

sodass Sie jetzt Bilder kopieren und einfügen können. Jetzt können auch Bilder in die Zwischenablage geschrieben werden. Die asynchrone Clipboard API unterstützt jetzt eine Funktion zum Kopieren und Einfügen von Text. Sie können Text in die Zwischenablage kopieren, indem Sie Navigator.clipboard.writeText() aufrufen und den Text später einfügen. Dazu rufen Sie Navigator.clipboard.readText() auf.

Bilder kopieren und einfügen

Jetzt können Sie auch Bilder in die Zwischenablage schreiben. Damit dies funktioniert, benötigen Sie die Bilddaten als Blob, die Sie dann an den Konstruktor der Zwischenablage übergeben. Anschließend können Sie das Element in der Zwischenablage kopieren, indem Sie Navigator.clipboard.write() aufrufen.

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

Das Einfügen des Bilds aus der Zwischenablage sieht ziemlich kompliziert aus, besteht aber eigentlich nur aus der Rückkehr des Blobs aus dem Zwischenablageelement. Da es mehrere geben kann, musst du die Liste wiederholen, bis du genau das richtige gefunden hast. Aus Sicherheitsgründen ist dies derzeit auf PNG-Bilder beschränkt. Zukünftig werden jedoch möglicherweise weitere Bildformate unterstützt.

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

Sie können diese API in einer Demo-App sehen. Die relevanten Snippets aus dem Quellcode sind oben eingebettet. Das Kopieren von Bildern in die Zwischenablage ist ohne Berechtigung möglich. Sie müssen aber erst die Berechtigung zum Einfügen aus der Zwischenablage erteilen.

Nachdem Sie den Zugriff gewährt haben, können Sie das Bild aus der Zwischenablage lesen und in die Anwendung einfügen:

Glückwunsch, du hast das Codelab abgeschlossen. Wie bereits erwähnt, befinden sich die meisten APIs noch in der Bewegung und arbeiten aktiv daran. Wir schätzen dein Feedback deshalb sehr, weil uns nur die Interaktionen mit Nutzern wie du helfen, die richtigen APIs zu finden.

Wenn Sie nicht auf dem bahnbrechenden Stand bleiben möchten, sollten Sie jetzt die Flagge #enable-experimental-web-platform-features wieder auf Disabled setzen.

Außerdem sollten Sie sich die Landingpage „Funktionen“ regelmäßig ansehen. Sie werden ständig aktualisiert und enthalten Verweise auf alle ausführlichen Artikel zu den APIs, an denen wir arbeiten. Weiter so!&

Tom und das gesamte Skill-Team 🐡