Codelab Kemampuan Web

1. Pengantar dan penyiapan

Kemampuan Web

Kami ingin menutup kesenjangan kemampuan antara web dan native serta memudahkan developer membangun pengalaman yang luar biasa di web terbuka. Kami sangat yakin bahwa setiap developer harus memiliki akses ke kemampuan yang mereka butuhkan untuk menciptakan pengalaman web yang luar biasa, dan kami berkomitmen untuk mewujudkan web yang lebih mumpuni.

Namun, ada beberapa kemampuan—seperti akses sistem file dan deteksi tidak ada aktivitas—yang tersedia untuk native, tetapi tidak tersedia di web. Kemampuan yang tidak ada ini berarti beberapa jenis aplikasi tidak dapat ditayangkan di web, atau kurang berguna.

Kami akan mendesain dan mengembangkan kemampuan baru ini secara terbuka dan transparan, menggunakan proses standar platform web terbuka yang ada sekaligus mendapatkan masukan awal dari developer dan vendor browser lainnya saat kami melakukan iterasi pada desain, untuk memastikan desain yang dapat dioperasikan.

Lihat semua kemampuan dalam proses pengembangan yang sedang kami kerjakan.

Yang akan Anda bangun

Dalam codelab ini, Anda akan mencoba sejumlah API web yang benar-benar baru atau hanya tersedia di balik tanda. Jadi, codelab ini berfokus pada API itu sendiri dan kasus penggunaan yang dapat diwujudkan oleh API ini, bukan pada pembuatan produk akhir tertentu.

Yang akan Anda pelajari

Codelab ini akan mengajari Anda mekanisme dasar beberapa API canggih. Perhatikan bahwa mekanisme ini belum ditetapkan, dan kami sangat menghargai masukan Anda tentang alur developer.

Yang Anda butuhkan

Karena API yang ditampilkan dalam codelab ini benar-benar berada di garis depan, persyaratan untuk setiap API bervariasi. Pastikan untuk membaca informasi kompatibilitas dengan cermat di awal setiap bagian.

Cara menggunakan codelab

Codelab tidak harus dikerjakan secara berurutan. Setiap bagian mewakili API independen, jadi Anda bebas memilih bagian yang paling menarik bagi Anda.

2. Badging API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. Codelab ini didasarkan pada desain saat ini, dan API dapat berubah sebelum fitur distandardisasi. Lihat postingan Badging API untuk mengetahui detail terbaru.

Kompatibilitas: Badging API tersedia di balik tanda #enable-experimental-web-platform-features, dan sebagai Uji Coba Origin. Saat ini, fitur ini hanya tersedia di Windows dan macOS, dan hanya berfungsi untuk PWA yang telah diinstal.

Tujuan Badging API adalah untuk menarik perhatian pengguna pada hal-hal yang terjadi di latar belakang. Demi kesederhanaan demo dalam codelab ini, mari gunakan API untuk mengarahkan perhatian pengguna ke sesuatu yang terjadi di latar depan. Kemudian, Anda dapat melakukan transfer mental ke hal-hal yang terjadi di latar belakang.

Instal Airhorner

Agar API ini berfungsi, Anda memerlukan PWA yang diinstal ke layar utama, jadi langkah pertama adalah menginstal PWA, seperti airhorner.com yang terkenal di dunia. Tekan tombol Instal di sudut kanan atas atau gunakan menu tiga titik untuk menginstal secara manual.

Tindakan ini akan menampilkan perintah konfirmasi, klik Instal.

Sekarang Anda memiliki ikon baru di dock sistem operasi Anda. Klik untuk meluncurkan PWA. Aplikasi ini akan memiliki jendela aplikasinya sendiri dan berjalan dalam mode mandiri.

Menetapkan badge

Setelah menginstal PWA, Anda memerlukan beberapa data numerik (badge hanya dapat berisi angka) untuk ditampilkan di badge. Hal yang mudah dihitung di The Air Horner adalah, sigh, jumlah berapa kali klakson dibunyikan. Sebenarnya, dengan aplikasi Airhorner yang terinstal, coba bunyikan klakson dan periksa badge-nya. Fitur ini akan menghitung satu kali setiap kali Anda membunyikan klakson.

Jadi, bagaimana cara kerjanya? Pada dasarnya, kodenya adalah sebagai berikut:

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

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, ingatlah untuk menetapkan flag #enable-experimental-web-platform-features.

Bunyikan klakson beberapa kali dan periksa ikon PWA: ikon akan diperbarui setiap. kali. klakson berbunyi. Semudah itu.

Menghapus badge

Penghitung akan bertambah hingga 99, lalu dimulai lagi. Anda juga dapat meresetnya secara manual. Buka tab Konsol DevTools, tempel baris di bawah, lalu tekan Enter.

navigator.setExperimentalAppBadge(0);

Atau, Anda juga dapat menghapus badge dengan menghapusnya secara eksplisit seperti yang ditunjukkan dalam cuplikan berikut. Ikon PWA Anda sekarang akan terlihat lagi seperti di awal, jelas dan tanpa badge.

navigator.clearExperimentalAppBadge();

Masukan

Apa pendapat Anda tentang API ini? Bantu kami dengan menjawab survei singkat ini:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda berhasil menjalankan contoh?

Ya Tidak

Ada hal lain yang ingin disampaikan? Apakah ada fitur yang tidak ada? Berikan masukan singkat dalam survei ini. Terima kasih!

3. Native File System API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. Codelab ini didasarkan pada desain saat ini, dan API dapat berubah sebelum fitur distandardisasi. Lihat postingan Native File System API untuk mengetahui detail terbaru.

Kompatibilitas: Native File System API tersedia di balik tanda #native-file-system-api, dan sebagai Uji Coba Origin.

Native File System API memungkinkan developer membuat aplikasi web canggih yang berinteraksi dengan file di perangkat lokal pengguna. Setelah pengguna memberikan akses ke aplikasi web, API ini memungkinkan aplikasi web membaca atau menyimpan perubahan langsung ke file dan folder di perangkat pengguna.

Membaca file

"Hello, world" Native File System API adalah membaca file lokal dan mendapatkan konten file. Buat file .txt biasa dan masukkan beberapa teks. Selanjutnya, buka situs aman (yaitu, situs yang ditayangkan melalui HTTPS) seperti example.com dan buka konsol DevTools. Tempel cuplikan kode di bawah di konsol. Karena Native File System API memerlukan gestur pengguna, kita melampirkan handler klik ganda pada dokumen. Kita akan memerlukan handle file nanti, jadi kita menjadikannya variabel global.

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

Kemudian, saat Anda mengklik dua kali di mana saja di halaman example.com, pemilih file akan muncul.

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, ingatlah untuk menetapkan flag #native-file-system-api.

Pilih file .txt yang telah Anda buat sebelumnya. Konten file kemudian akan menggantikan konten body sebenarnya dari example.com.

Menyimpan file

Selanjutnya, kita akan melakukan beberapa perubahan. Oleh karena itu, mari kita buat body dapat diedit dengan menempelkan cuplikan kode di bawah. Sekarang, Anda dapat mengedit teks seolah-olah browser adalah editor teks.

document.body.contentEditable = true;

Sekarang, kita ingin menulis kembali perubahan ini ke file asli. Oleh karena itu, kita memerlukan penulis pada handle file, yang dapat kita peroleh dengan menempelkan cuplikan di bawah di konsol. Sekali lagi kita memerlukan gestur pengguna, jadi kali ini kita menunggu klik pada dokumen utama.

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

Sekarang, saat Anda mengklik (bukan mengklik dua kali) dokumen, perintah izin akan muncul. Saat Anda memberikan izin, isi file akan menjadi apa pun yang telah Anda edit di body sebelumnya. Verifikasi perubahan dengan membuka file di editor lain (atau mulai proses lagi dengan mengklik dua kali dokumen lagi dan membuka kembali file Anda).

Selamat! Anda baru saja membuat editor teks terkecil di dunia [citation needed].

Masukan

Apa pendapat Anda tentang API ini? Bantu kami dengan menjawab survei singkat ini:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda berhasil menjalankan contoh?

Ya Tidak

Ada hal lain yang ingin disampaikan? Apakah ada fitur yang tidak ada? Berikan masukan singkat dalam survei ini. Terima kasih!

4. Shape Detection API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. Codelab ini didasarkan pada desain saat ini, dan API dapat berubah sebelum fitur distandardisasi. Lihat postingan Shape Detection API untuk mengetahui detail terbaru.

Kompatibilitas: Shape Detection API tersedia di balik tanda #enable-experimental-web-platform-features. Dukungan untuk API ini bergantung pada fitur akselerasi hardware yang bervariasi menurut sistem operasi:

• FaceDetector: Android, macOS, Windows
• BarcodeDetector: Android, macOS
• TextDetector: Android, macOS (hanya kotak pembatas), Windows

Shape Detection API menyediakan akses ke detektor bentuk yang dipercepat (misalnya, untuk wajah manusia) dan berfungsi pada gambar diam dan/atau feed gambar live. Sistem operasi memiliki detektor fitur berperforma tinggi dan sangat dioptimalkan seperti FaceDetector Android. Shape Detection API membuka implementasi native ini dan mengeksposnya melalui serangkaian antarmuka JavaScript.

Saat ini, fitur yang didukung adalah deteksi wajah melalui antarmuka FaceDetector, deteksi kode batang melalui antarmuka BarcodeDetector, dan deteksi teks (pengenalan karakter optik) melalui antarmuka TextDetector.

Deteksi Wajah

Fitur menarik dari Shape Detection API adalah deteksi wajah. Untuk mengujinya, kita memerlukan halaman dengan wajah. Halaman ini dengan wajah penulis adalah awal yang baik. Tampilannya akan terlihat seperti pada screenshot di bawah. Di browser yang didukung, kotak batas wajah dan landmark wajah akan dikenali.

Anda mungkin melihat bahwa saat ini landmark wajah terlihat tidak akurat dalam screenshot. Hal ini karena crbug.com/914348

¯_(ツ)_/¯.

Anda dapat melihat sedikitnya kode yang diperlukan untuk mewujudkan hal ini dengan me-remix atau mengedit project Glitch, terutama file script.js.

Jika Anda ingin menggunakan fitur sepenuhnya dinamis dan tidak hanya bekerja dengan wajah penulis, buka halaman hasil Google Penelusuran ini yang penuh dengan wajah di tab pribadi atau dalam mode tamu. Sekarang di halaman tersebut, buka Chrome Developer Tools dengan mengklik kanan di mana saja, lalu klik Periksa. Selanjutnya, di tab Konsol, tempel cuplikan di bawah. Kode akan menandai wajah yang terdeteksi dengan kotak merah semi-transparan.

Perhatikan bahwa secara umum, menyalin dan menempelkan kode ke situs produksi adalah ide yang buruk, dan Google akan memperingatkan Anda untuk tidak melakukannya. Namun, dalam kasus ini, tidak masalah karena kita tidak login (maka tab pribadi atau mode tamu).

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, ingatlah untuk menetapkan flag #enable-experimental-web-platform-features.

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

Anda akan melihat bahwa ada beberapa pesan DOMException, dan tidak semua gambar diproses. Hal ini karena gambar di atas area yang terlihat disisipkan sebagai URI data sehingga dapat diakses, sedangkan gambar di bawah area yang terlihat berasal dari domain lain yang tidak dikonfigurasi untuk mendukung CORS. Demi demo ini, kita tidak perlu mengkhawatirkannya.

Deteksi titik wajah

Selain wajah itu sendiri, macOS juga mendukung deteksi landmark wajah. Untuk menguji deteksi penanda wajah, tempelkan cuplikan berikut ke Konsol. Pengingat: susunan landmark tidak sempurna karena crbug.com/914348, tetapi Anda dapat melihat ke mana arahnya dan seberapa efektif fitur ini.

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

Deteksi kode batang

Fitur kedua Shape Detection API adalah deteksi kode batang. Seperti sebelumnya, kita memerlukan halaman dengan kode batang, seperti halaman ini. Saat membukanya di browser, Anda akan melihat berbagai kode QR yang telah diterjemahkan. Lakukan remix atau edit project Glitch, terutama file script.js untuk melihat cara melakukannya.

Jika Anda menginginkan sesuatu yang lebih dinamis, kita dapat menggunakan Google Penelusuran Gambar lagi. Kali ini, di browser Anda, buka halaman hasil Google Penelusuran ini di tab pribadi atau dalam mode tamu. Sekarang tempel cuplikan di bawah di tab Konsol Chrome DevTools. Setelah beberapa saat, kode batang yang dikenali akan diberi anotasi dengan nilai mentah dan jenis kode batang.

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

Deteksi teks

Fitur terakhir Shape Detection API adalah deteksi teks. Sekarang Anda sudah tahu caranya: Kita memerlukan halaman dengan gambar yang berisi teks, seperti halaman ini dengan hasil pindaian Google Buku. Di browser yang didukung, Anda akan melihat teks yang dikenali dan kotak pembatas yang digambar di sekitar bagian teks. Lakukan remix atau edit project Glitch, terutama file script.js untuk melihat cara melakukannya.

Untuk mengujinya secara dinamis, buka halaman Hasil penelusuran ini di tab pribadi atau dalam mode tamu. Sekarang tempel cuplikan di bawah di tab Konsol Chrome DevTools. Dengan menunggu sebentar, beberapa teks akan dikenali.

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

Masukan

Apa pendapat Anda tentang API ini? Bantu kami dengan menjawab survei singkat ini:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda berhasil menjalankan contoh?

Ya Tidak

Ada hal lain yang ingin disampaikan? Apakah ada fitur yang tidak ada? Berikan masukan singkat dalam survei ini. Terima kasih!

5. Web Share Target API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. API kini telah diluncurkan 🎉 dan codelab ini didasarkan pada desain stabil saat ini. Lihat postingan Web Share Target API untuk mengetahui detail terbaru.

Kompatibilitas: Web Share Target API tersedia di Android, Windows, Linux, dan ChromeOS.

Web Share Target API memungkinkan aplikasi web yang diinstal mendaftar ke sistem operasi yang mendasarinya sebagai target berbagi untuk menerima konten yang dibagikan dari Web Share API atau peristiwa sistem, seperti tombol berbagi tingkat sistem operasi.

Menginstal PWA untuk berbagi ke

Sebagai langkah pertama, Anda memerlukan PWA yang dapat Anda bagikan. Kali ini, Airhorner (untungnya) tidak akan berfungsi, tetapi aplikasi demo Target Berbagi Web akan membantu Anda. Instal aplikasi ke layar utama perangkat Anda.

Membagikan sesuatu ke PWA

Selanjutnya, Anda memerlukan sesuatu untuk dibagikan, seperti foto dari Google Foto. Gunakan tombol Bagikan dan pilih PWA Scrapbook sebagai target berbagi.

Saat Anda mengetuk ikon aplikasi, Anda akan langsung membuka PWA Album Foto, dan foto akan langsung muncul.

Jadi, bagaimana cara kerjanya? Untuk mengetahuinya, jelajahi manifes aplikasi web PWA Scrapbook. Konfigurasi agar Web Share Target API berfungsi berada di properti "share_target" dari manifes yang di kolom "action"-nya mengarah ke URL yang dihiasi dengan parameter seperti yang tercantum di "params".

Sisi yang membagikan kemudian mengisi template URL ini dengan tepat (baik difasilitasi melalui tindakan berbagi, atau dikontrol secara terprogram oleh developer menggunakan Web Share API), sehingga sisi penerima kemudian dapat mengekstrak parameter dan melakukan sesuatu dengannya, seperti menampilkannya.

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

Masukan

Apa pendapat Anda tentang API ini? Bantu kami dengan menjawab survei singkat ini:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda berhasil menjalankan contoh?

Ya Tidak

Ada hal lain yang ingin disampaikan? Apakah ada fitur yang tidak ada? Berikan masukan singkat dalam survei ini. Terima kasih!

6. Wake Lock API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. Codelab ini didasarkan pada desain saat ini, dan API dapat berubah sebelum fitur distandardisasi. Lihat postingan Wake Lock API untuk mengetahui detail terbaru.

Kompatibilitas: Wake Lock API tersedia di balik tanda #enable-experimental-web-platform-features di Android, Windows, Linux, dan macOS.

Agar baterai tidak habis, sebagian besar perangkat akan segera beralih ke mode tidur jika tidak ada aktivitas. Meskipun hal ini tidak menjadi masalah, beberapa aplikasi perlu menjaga layar atau perangkat tetap aktif untuk menyelesaikan pekerjaannya. Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan dan mengunci layar atau mencegah perangkat beralih ke mode tidur. Kemampuan ini memungkinkan pengalaman baru yang, hingga saat ini, memerlukan aplikasi native.

Menyiapkan screensaver

Untuk menguji Wake Lock API, Anda harus memastikan terlebih dahulu bahwa perangkat Anda akan dalam mode tidur. Oleh karena itu, di panel preferensi sistem operasi Anda, aktifkan screensaver pilihan Anda dan pastikan screensaver tersebut dimulai setelah 1 menit. Pastikan fitur ini berfungsi dengan membiarkan perangkat Anda selama waktu tersebut (ya, kami tahu, ini menyakitkan). Screenshot di bawah menampilkan macOS, tetapi Anda tentu saja dapat mencobanya di perangkat Android seluler atau platform desktop yang didukung.

Menyetel kunci aktif layar

Sekarang setelah mengetahui bahwa screensaver Anda berfungsi, Anda akan menggunakan kunci aktif jenis "screen" untuk mencegah screensaver melakukan tugasnya. Buka aplikasi demo Wake Lock dan klik Aktifkan

screen kotak centang Penguncian Layar Saat Aktif.

Mulai saat itu, kunci tetap aktif diaktifkan. Jika Anda cukup sabar untuk tidak menyentuh perangkat selama satu menit, Anda akan melihat bahwa screensaver memang tidak dimulai.

Jadi, bagaimana cara kerjanya? Untuk mengetahuinya, buka project Glitch untuk aplikasi demo Wake Lock dan lihat script.js. Inti dari kode ini ada di cuplikan di bawah. Buka tab baru (atau gunakan tab yang sedang Anda buka) dan tempel kode di bawah di konsol Chrome Developer Tools. Saat Anda mengklik jendela, Anda akan melihat kunci tetap aktif selama tepat 10 detik (lihat log konsol), dan screensaver Anda tidak akan dimulai.

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, ingatlah untuk menetapkan flag #enable-experimental-web-platform-features.

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

Masukan

Apa pendapat Anda tentang API ini? Bantu kami dengan menjawab survei singkat ini:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda berhasil menjalankan contoh?

Ya Tidak

Ada hal lain yang ingin disampaikan? Apakah ada fitur yang tidak ada? Berikan masukan singkat dalam survei ini. Terima kasih!

7. Contact Picker API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. Codelab ini didasarkan pada desain saat ini, dan API dapat berubah sebelum fitur distandardisasi. Lihat postingan Contact Picker API untuk mengetahui detail terbaru.

Kompatibilitas: Wake Lock API tersedia di balik tanda #enable-experimental-web-platform-features di Android.

Salah satu API yang sangat kami nantikan adalah Contact Picker API. Dengan begitu, aplikasi web dapat mengakses kontak dari pengelola kontak bawaan perangkat, sehingga aplikasi web Anda memiliki akses ke nama, alamat email, dan nomor telepon kontak Anda. Anda dapat menentukan apakah Anda hanya menginginkan satu atau beberapa kontak dan apakah Anda menginginkan semua kolom atau hanya subkumpulan nama, alamat email, dan nomor telepon.

Pertimbangan privasi

Setelah pemilih terbuka, Anda dapat memilih kontak yang ingin dibagikan. Anda akan melihat bahwa tidak ada opsi "pilih semua", yang memang disengaja: kami ingin berbagi menjadi keputusan yang disadari. Demikian pula, akses tidak berkelanjutan, melainkan keputusan satu kali.

Mengakses kontak

Mengakses kontak adalah tugas yang mudah. Sebelum pemilih terbuka, Anda dapat menentukan kolom yang diinginkan (opsinya adalah name, email, dan telephone), dan apakah Anda ingin mengakses beberapa atau hanya satu kontak. Anda dapat menguji API ini di perangkat Android dengan membuka aplikasi demo. Bagian kode sumber yang relevan pada dasarnya adalah cuplikan di bawah:

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

8. Async Clipboard API

Catatan: Kami sedang mengerjakan API ini sebagai bagian dari project Kemampuan baru. API kini telah diluncurkan 🎉 dan codelab ini didasarkan pada desain stabil saat ini. Lihat artikel Async Clipboard API untuk mengetahui detail terbaru.

Menyalin dan menempelkan teks

Hingga saat ini, tidak ada cara untuk menyalin dan menempelkan gambar ke papan klip sistem secara terprogram. Baru-baru ini, kami menambahkan dukungan gambar ke Async Clipboard API,

sehingga kini Anda dapat menyalin dan menempelkan gambar. Yang baru adalah Anda juga dapat menulis gambar ke papan klip. Asynchronous clipboard API telah mendukung penyalinan dan penempelan teks selama beberapa waktu. Anda dapat menyalin teks ke papan klip dengan memanggil navigator.clipboard.writeText(), lalu menempelkan teks tersebut nanti dengan memanggil navigator.clipboard.readText().

Menyalin dan menempelkan gambar

Sekarang Anda juga dapat menulis gambar ke papan klip. Agar ini berfungsi, Anda memerlukan data gambar sebagai blob yang kemudian Anda teruskan ke konstruktor item papan klip. Terakhir, Anda dapat menyalin item papan klip ini dengan memanggil 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);
}

Menempelkan kembali gambar dari papan klip terlihat cukup rumit, tetapi sebenarnya hanya terdiri dari mendapatkan kembali blob dari item papan klip. Karena bisa ada beberapa, Anda perlu melakukan loop hingga mendapatkan yang Anda inginkan. Untuk alasan keamanan, saat ini fitur ini terbatas pada gambar PNG, tetapi format gambar lainnya mungkin akan didukung pada masa mendatang.

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

Anda dapat melihat cara kerja API ini di aplikasi demo. Cuplikan yang relevan dari kode sumber-nya disematkan di atas. Menyalin gambar ke papan klip dapat dilakukan tanpa izin, tetapi Anda perlu memberikan akses untuk menempelkan dari papan klip.

Setelah memberikan akses, Anda dapat membaca gambar dari papan klip dan menempelkannya di aplikasi:

9. Anda berhasil!

Selamat, Anda telah mencapai akhir codelab. Sekali lagi, kami ingin mengingatkan bahwa sebagian besar API masih dalam tahap pengembangan dan sedang diupayakan secara aktif. Oleh karena itu, tim sangat menghargai masukan Anda, karena hanya interaksi dengan orang seperti Anda yang akan membantu kami mendapatkan API ini dengan benar.

Jika Anda tidak ingin menggunakan fitur terbaru yang belum stabil, sekarang mungkin saat yang tepat untuk mengubah kembali tanda #enable-experimental-web-platform-features ke Disabled.

Sebaiknya Anda juga sering melihat halaman landing Kemampuan kami. Kami akan terus memperbaruinya, dan berisi pointer ke semua artikel mendalam untuk API yang kami kerjakan. Teruslah berkreasi!

Tom dan seluruh tim Kemampuan 🐡