Codelab Kemampuan Web

Kemampuan Web

Kami ingin menutup perbedaan kemampuan antara web dan native serta memudahkan developer dalam membangun pengalaman yang luar biasa di web terbuka. Kami sangat yakin bahwa setiap developer harus memiliki akses ke kemampuan yang mereka butuhkan untuk membuat pengalaman web yang luar biasa, dan kami berkomitmen untuk menghadirkan web yang lebih andal.

Namun, ada beberapa kemampuan—seperti akses sistem file dan deteksi tidak ada aktivitas—yang tersedia untuk native namun tidak tersedia di web. Kemampuan yang hilang ini berarti bahwa 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 saat 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 penerbangan yang sedang kami kerjakan!

Yang akan Anda build

Dalam codelab ini, Anda akan menggunakan beberapa API web baru atau hanya tersedia di balik tanda. Jadi, codelab ini berfokus pada API itu sendiri dan pada kasus penggunaan yang dibuka oleh API ini, bukan membuat produk akhir tertentu.

Yang akan Anda pelajari

Codelab ini akan mengajari Anda mekanisme dasar beberapa API terbaru. Perlu diketahui bahwa mekanisme ini belum sepenuhnya tersedia, dan kami sangat menghargai masukan Anda terkait alur developer.

Yang Anda butuhkan

Karena API yang ditampilkan di codelab ini benar-benar canggih, persyaratan untuk setiap API bervariasi. Pastikan Anda membaca informasi kompatibilitas dengan saksama di awal setiap bagian.

Cara mendekati codelab

Codelab ini belum tentu ditujukan untuk dikerjakan secara berurutan. Setiap bagian mewakili API independen, jadi silakan pilih sesuai minat Anda.

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 distandarisasi. Lihat postingan Badging API untuk mengetahui detail terbaru.

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

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

Menginstal 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 Install di sudut kanan atas atau gunakan menu tiga titik untuk menginstal secara manual.

Tindakan ini akan menampilkan perintah konfirmasi, klik Install.

Sekarang Anda memiliki ikon baru di dok sistem operasi Anda. Klik tombol tersebut untuk meluncurkan PWA. Aplikasi akan memiliki jendela aplikasi sendiri dan berjalan dalam mode mandiri.

Menetapkan badge

Setelah PWA diinstal, Anda memerlukan data numerik (badge hanya boleh berisi angka) untuk ditampilkan di badge. Hal yang mudah untuk dihitung di The Air Horner adalah, mengeluh dalam beberapa kali klakson dipanggil. Sebenarnya, dengan aplikasi Airhorner yang terpasang, coba tanduk tanduk dan periksa lencana. Alat ini menghitungnya setiap kali Anda membunyikan klakson.

Jadi, bagaimana cara kerjanya? Pada dasarnya, kodenya adalah ini:

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

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, jangan lupa untuk menetapkan tanda #enable-experimental-web-platform-features.

Aktifkan airhorn beberapa kali dan periksa ikon PWA: ini akan diperbarui setiap satu kali. suara klakson berbunyi. Semudah itu.

Menghapus badge

Penghitung dapat diteruskan hingga 99 dan kemudian dimulai lagi. Anda juga dapat meresetnya secara manual. Buka tab DevTools Console, 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 ini secara singkat:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda mendapatkan contoh untuk dijalankan?

Ya Tidak

Punya pendapat lain yang ingin disampaikan tentang hal ini? Apakah ada fitur yang hilang? Harap berikan masukan cepat dalam survei ini. Thank you!

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 distandarisasi. Lihat postingan Native File System API untuk mengetahui detail terbaru.

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

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

Membaca file

The "Hello, world" dari Native File System API adalah membaca file lokal dan mendapatkan konten file. Buat file .txt biasa dan masukkan beberapa teks. Berikutnya, buka situs aman (yaitu, situs yang ditayangkan melalui HTTPS) seperti example.com dan buka konsol DevTools. Tempel cuplikan kode di bawah ini di konsol. Karena Native File System API memerlukan gestur pengguna, kami melampirkan pengendali klik dua kali pada dokumen. Kita akan memerlukan handle file di lain waktu, jadi kita cukup menjadikannya variabel global.

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

Saat Anda mengklik dua kali di mana saja di halaman example.com, alat pilih file akan muncul.

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, jangan lupa untuk menetapkan tanda #native-file-system-api.

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

Menyimpan file

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

document.body.contentEditable = true;

Sekarang, kita ingin menuliskan perubahan ini kembali ke file asli. Oleh karena itu, kita memerlukan penulis pada tuas file yang dapat diperoleh dengan menempelkan cuplikan di bawah ini pada konsol. Sekali lagi kita perlu 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();
};

Jika Anda sekarang mengklik (bukan mengklik dua kali) dokumen tersebut, perintah izin akan muncul. Saat Anda memberikan izin, konten file akan berupa konten apa pun yang telah Anda edit di body sebelumnya. Verifikasi perubahan dengan membuka file di editor lain (atau mulai prosesnya lagi dengan mengklik dua kali dokumen lagi dan membuka kembali file).

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

Masukan

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

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda mendapatkan contoh untuk dijalankan?

Ya Tidak

Punya pendapat lain yang ingin disampaikan tentang hal ini? Apakah ada fitur yang hilang? Harap berikan masukan cepat dalam survei ini. Thank you!

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 distandarisasi. Baca postingan API Deteksi Bentuk untuk mengetahui detail terbaru.

Kompatibilitas: Shape Detection API tersedia di belakang flag #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 pendeteksi bentuk yang dipercepat (misalnya, untuk wajah manusia) dan berfungsi pada gambar diam dan/atau feed gambar live. Sistem operasi memiliki pendeteksi fitur yang berperforma tinggi dan sangat optimal, seperti FaceDetector Android. Shape Detection API akan membuka implementasi native ini dan menampilkannya melalui kumpulan 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 yang menarik dari Shape Detection API adalah deteksi wajah. Untuk mengujinya, kita memerlukan halaman dengan wajah. Halaman ini dengan wajah penulis merupakan awal yang baik. Aplikasi akan terlihat seperti di screenshot di bawah. Di browser yang didukung, kotak batas wajah dan bangunan terkenal wajah akan dikenali.

Anda mungkin melihat bahwa saat ini tempat terkenal wajah terlihat di screenshot. Hal ini dikarenakan crbug.com/914348

\t\_(]%)_/ \t.

Untuk mengetahui seberapa kecil kode yang diperlukan guna melakukan migrasi ini, cukup remix atau edit project Glitch, terutama file script.js.

Jika Anda ingin sepenuhnya dinamis dan tidak hanya bekerja dengan wajah penulis, buka halaman hasil Google Penelusuran yang penuh dengan wajah di tab pribadi atau dalam mode tamu. Di halaman tersebut, buka Developer Tools Chrome dengan mengklik kanan di mana saja, lalu mengklik Periksa. Selanjutnya, pada tab Console, tempelkan cuplikan di bawah. Kode akan menyoroti wajah yang terdeteksi dengan kotak merah semi-transparan.

Perhatikan bahwa secara umum, cukup salin dan tempel kode ke situs web produksi, dan Google akan memperingatkan Anda dengan benar untuk tidak melakukannya. Dalam hal ini, tidak apa-apa, karena kami tidak masuk (jadi tab pribadi atau mode tamu).

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, jangan lupa untuk menetapkan tanda #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 sedang diproses. Hal ini karena gambar paruh atas disisipkan sebagai URI data dan dapat diakses, sedangkan gambar paruh bawah berasal dari domain yang berbeda yang tidak dikonfigurasi untuk mendukung CORS. Untuk demo, kita tidak perlu khawatir tentang hal ini.

Deteksi struktur wajah

Selain wajah, macOS juga mendukung deteksi bangunan terkenal wajah. Untuk menguji deteksi bangunan terkenal wajah, tempel cuplikan berikut ke dalam Konsol. Pengingat: deretan tempat terkenal ini tidak sempurna sama sekali karena crbug.com/914348, tetapi Anda dapat melihat ke mana kepala ini mengarah dan seberapa kuat fitur ini lagi.

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 di Shape Detection API adalah deteksi kode batang. Sama seperti sebelumnya, kita memerlukan halaman dengan kode batang, seperti yang ini. Saat membukanya di browser, Anda akan melihat berbagai kode QR yang diuraikan. Remix atau edit project Glitch, terutama file script.js untuk melihat cara melakukannya.

Jika Anda menginginkan sesuatu yang lebih dinamis, kita dapat kembali menggunakan Google Penelusuran Gambar. 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 dianotasi 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 dari Shape Detection API adalah deteksi teks. Sekarang Anda tahu latihannya: Kami memerlukan halaman dengan gambar yang berisi teks, seperti yang ini dengan hasil pemindaian Google Buku. Pada browser yang didukung, Anda akan melihat teks yang dikenali dan kotak pembatas yang digambar di sekitar bagian teks. Remix atau edit project Glitch, terutama file script.js untuk melihat cara melakukannya.

Untuk mengujinya secara dinamis, buka halaman hasil Penelusuran di tab pribadi atau dalam mode tamu. Sekarang tempel cuplikan di bawah di tab Konsol Chrome DevTools. Dengan sedikit menunggu, 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 ini secara singkat:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda mendapatkan contoh untuk dijalankan?

Ya Tidak

Punya pendapat lain yang ingin disampaikan tentang hal ini? Apakah ada fitur yang hilang? Harap berikan masukan cepat dalam survei ini. Thank you!

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 Chrome OS.

Web Share Target API memungkinkan aplikasi web terinstal untuk mendaftar ke sistem operasi dasar sebagai target berbagi untuk menerima konten bersama dari Web Share API atau peristiwa sistem, seperti tombol berbagi tingkat sistem operasi.

Menginstal PWA untuk dibagikan

Sebagai langkah pertama, Anda memerlukan PWA yang dapat dibagikan. Kali ini, Airhorner (untungnya) tidak akan melakukan pekerjaan tersebut, tetapi aplikasi demo Target Berbagi Web mendukung Anda. Instal aplikasi ke layar utama perangkat Anda.

Membagikan informasi ke PWA

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

Jika Anda mengetuk ikon aplikasi, Anda akan diarahkan langsung ke Scrapbook PWA, dan foto akan muncul di sana.

Jadi, bagaimana cara kerjanya? Untuk mencari tahu, jelajahi manifes aplikasi web PWA Scrapbook. Konfigurasi agar Web Share Target API berfungsi di properti "share_target" manifes yang pada kolom "action" mengarah ke URL yang didekorasi dengan parameter seperti yang tercantum dalam "params".

Sisi berbagi kemudian mengisi template URL ini sebagaimana mestinya (baik difasilitasi melalui tindakan berbagi, atau dikontrol secara terprogram oleh developer menggunakan Web Share API), sehingga sisi penerima dapat mengekstrak parameter dan melakukan sesuatu dengan parameter tersebut, 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 ini secara singkat:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda mendapatkan contoh untuk dijalankan?

Ya Tidak

Punya pendapat lain yang ingin disampaikan tentang hal ini? Apakah ada fitur yang hilang? Harap berikan masukan cepat dalam survei ini. Thank you!

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 distandarisasi. Lihat postingan Wake Lock API untuk mengetahui detail terbaru.

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

Agar baterai tidak habis, sebagian besar perangkat akan tidur dengan cepat saat tidak ada aktivitas. Meskipun tidak masalah di sebagian besar waktu, beberapa aplikasi perlu menjaga layar atau perangkat tetap aktif untuk menyelesaikan pekerjaan mereka. Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan dan mengunci layar atau mencegah perangkat 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 akan beralih ke mode tidur. Oleh karena itu, di panel preferensi sistem operasi Anda, aktifkan screensaver pilihan Anda dan pastikan itu dimulai setelah 1 menit. Pastikan ini berfungsi dengan membiarkan perangkat Anda sendiri selama waktu yang sama (ya, saya tahu, menyakitkan). Screenshot di bawah ini menampilkan macOS, tetapi Anda dapat mencobanya di perangkat Android seluler atau platform desktop yang didukung.

Menyetel penguncian layar saat aktif layar

Setelah mengetahui bahwa screensaver Anda berfungsi, Anda akan menggunakan penguncian layar saat aktif jenis "screen" untuk mencegah screensaver melakukan tugasnya. Buka aplikasi demo Wake Lock dan klik kotak centang Aktifkan screen Wake Lock.

Sejak saat itu, fitur penguncian layar saat aktif akan aktif. Jika Anda cukup sabar untuk membiarkan perangkat tidak tersentuh selama satu menit, Anda sekarang akan melihat bahwa screensaver memang tidak dimulai.

Jadi, bagaimana cara kerjanya? Untuk mencari tahu, buka project Glitch untuk aplikasi demo Wake Lock dan buka script.js. Inti kode terdapat dalam cuplikan di bawah. Buka tab baru (atau gunakan tab apa pun yang Anda buka), lalu tempel kode di bawah ini pada konsol Developer Tools Chrome. Saat mengklik jendela, Anda akan melihat penguncian layar saat aktif yang aktif selama 10 detik (lihat log konsol), dan screensaver tidak boleh dimulai.

Catatan: Jika Anda mendapatkan Uncaught ReferenceError, jangan lupa untuk menetapkan tanda #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 ini secara singkat:

Apakah API ini intuitif untuk digunakan?

Ya Tidak

Apakah Anda mendapatkan contoh untuk dijalankan?

Ya Tidak

Punya pendapat lain yang ingin disampaikan tentang hal ini? Apakah ada fitur yang hilang? Harap berikan masukan cepat dalam survei ini. Thank you!

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 distandarisasi. Lihat postingan Contact Picker API untuk mengetahui detail terbaru.

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

API yang sangat kami sukai adalah Contact Picker API. Ini memungkinkan aplikasi web mengakses kontak dari pengelola kontak asli perangkat, sehingga aplikasi web Anda memiliki akses ke nama, alamat email, dan nomor telepon kontak Anda. Anda dapat menentukan apakah ingin satu atau beberapa kontak saja dan apakah Anda menginginkan semua kolom atau hanya subkumpulan nama, alamat email, dan nomor telepon.

Pertimbangan privasi

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

Mengakses kontak

Mengakses kontak adalah tugas yang mudah. Sebelum alat pilih 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 yang relevan dari kode sumber 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);
});

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 API Papan Klip Asinkron untuk mengetahui detail terbaru.

Menyalin dan menempelkan teks

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

sehingga sekarang Anda dapat menyalin dan menempelkan gambar. Yang baru adalah Anda juga dapat menulis gambar ke papan klip. API papan klip asinkron mendukung penyalinan dan penempelan teks untuk sementara waktu sekarang. Anda dapat menyalin teks ke papan klip dengan memanggil navigator.clipboard.writeText(), lalu menempelkan teks tersebut dengan memanggil navigator.clipboard.readText().

Menyalin dan menempelkan gambar

Sekarang Anda juga dapat menulis gambar ke papan klip. Agar hal ini dapat bekerja, Anda memerlukan data gambar sebagai blob yang kemudian Anda teruskan ke konstruktor item papan klip. Terakhir, Anda kemudian 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 gambar kembali dari papan klip tampak cukup rumit, tetapi sebenarnya hanya terdiri dari mendapatkan blob kembali dari item papan klip. Karena mungkin ada lebih dari satu, Anda perlu mengulanginya sampai Anda memiliki domain yang diminati. Untuk alasan keamanan, saat ini fitur ini dibatasi pada gambar PNG, tetapi format gambar lainnya mungkin didukung di 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 sumbernya disematkan di atas. Menyalin gambar ke papan klip dapat dilakukan tanpa izin, tetapi Anda harus memberikan akses untuk menempelkan dari papan klip.

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

Selamat, Anda telah berhasil sampai di akhir codelab. Sekali lagi, ini adalah pengingat bahwa sebagian besar API masih berubah-ubah dan sedang dikerjakan secara aktif. Oleh karena itu, tim sangat menghargai masukan Anda, karena hanya interaksi dengan orang-orang seperti Anda yang akan membantu kami mendapatkan API ini dengan benar.

Jika Anda tidak ingin tetap aktif, sekarang mungkin ide yang tepat untuk mengembalikan tanda #enable-experimental-web-platform-features ke Disabled.

Sebaiknya Anda juga membaca Halaman landing kemampuan kami secara rutin. Kami akan terus memperbaruinya, dan memiliki pointer ke semua artikel mendalam untuk API yang kami kerjakan. Teruslah bermain rock'!

Tom dan seluruh tim Kemampuan 🐡