Kemampuan

Progressive Web App dapat melakukan lebih dari sekadar merender konten di layar atau terhubung ke layanan web. PWA dapat menangani file dari sistem file, mereka dapat berinteraksi dengan papan klip sistem, dapat mengakses perangkat keras yang terhubung ke perangkat, dan banyak lagi. Setiap Web API tersedia untuk PWA Anda, dan ada beberapa API tambahan yang tersedia saat aplikasi Anda diinstal.

Anda dapat menggunakan Yang Dapat Dilakukan Web Hari Ini untuk mengetahui apa yang dapat dilakukan di setiap platform. Untuk setiap API atau kemampuan, Anda dapat menggunakan Can I Use atau tabel kompatibilitas browser di MDN.

Selalu periksa dukungan fitur

Huruf pertama di PWA adalah singkatan dari progresif, dan berasal dari ide progressive enhancement dan deteksi fitur. Anda tidak boleh mengharapkan aplikasi Anda berfungsi dengan cara yang sama di setiap perangkat. Keragaman konteks dan kemampuan pada miliaran perangkat di berbagai negara menjadikan PWA sebagai platform yang sangat baik, berkat progresifnya.

Ini berarti Anda perlu mengembangkan aplikasi secara berlapis yang mungkin tidak tersedia di setiap perangkat dan untuk memeriksa ketersediaan sebelum penggunaan.

Anda perlu memeriksa dengan JavaScript apakah API sudah ada sebelum menggunakannya, atau tanyakan kepada API apakah layanan tersedia di perangkat tersebut.

Web yang canggih

Kini internet semakin hebat. Contoh:

  • Anda dapat membuat aplikasi video chat hyperlocal dengan WebRTC, geolokasi, dan pesan push.
  • Anda dapat membuat aplikasi yang dapat diinstal.
  • Anda dapat menambahkan efek video dengan WebAssembly.
  • Anda bahkan dapat menghadirkannya ke dalam virtual reality dengan WebGL dan WebXR.

Memberdayakan PWA Anda

Mari kita bagi API kemampuan PWA menjadi empat grup:

  • Hijau: API tersedia di setiap browser pada setiap platform, jika secara teknis memungkinkan. Sebagian besar dari portofolio tersebut telah dikirim selama bertahun-tahun, dianggap matang, dan Anda dapat menggunakannya dengan percaya diri. Contoh API dari grup ini adalah geolokasi API.
  • Hijau muda: API hanya tersedia di beberapa browser. Mengingat kurangnya dukungan pada beberapa platform, platform ini menjadi lebih matang dalam subgrup browser yang didukung sehingga Anda dapat menggunakan kemampuan tersebut dengan baik. Contoh API dari grup ini adalah WebUSB.
  • Kuning: API eksperimental. API ini belum matang; API tersebut hanya tersedia di beberapa browser, dan dalam pengujian atau uji coba. Kami telah membicarakan beberapa kemampuan ini di Bab Eksperimental.
  • Merah: grup untuk API yang tidak dapat Anda gunakan di PWA, dan Anda berencana untuk menambahkannya dalam jangka panjang. Contoh API dari grup ini adalah pembatasan wilayah.

Kemampuan ramah lingkungan

Di bawah ini adalah daftar kemampuan terpenting yang dapat Anda gunakan di PWA.

Dasar-dasar

  • Menyimpan file dalam cache secara lokal menggunakan Cache API, seperti yang terlihat di bab Caching.
  • Mengeksekusi tugas dalam thread menggunakan pekerja web, seperti yang kita lihat di bab Pengelolaan kompleksitas.
  • Mengelola permintaan jaringan dengan strategi berbeda dalam pekerja layanan, seperti yang terlihat dalam bab Service worker.
  • Kanvas 2D untuk merender grafis 2D di layar menggunakan Canvas API.
  • Canvas berperforma tinggi 2D dan 3D, atau WebGL, untuk merender grafis 3D.
  • WebAssembly, atau WASM, untuk mengeksekusi kode yang dikompilasi tingkat rendah demi performa.
  • Komunikasi Real-Time, menggunakan WebRTC API.
  • Web Performance API untuk mengukur dan membantu memberikan pengalaman yang lebih baik. Lihat panduan Performance API untuk informasi selengkapnya.
  • Simpan data secara lokal dengan IndexedDB dan pengelolaan penyimpanan untuk mengkueri kuota dan meminta penyimpanan persisten, seperti yang terlihat di Bab data offline.
  • Audio tingkat rendah berkat Web Audio API.
  • Deteksi latar depan menggunakan Page Visibility API.
  • Komunikasi jaringan menggunakan Fetch API dan WebSocket API.

Hardware dan sensor

  • Gamepad untuk membaca informasi yang berasal dari gamepad dan joystick standar yang terhubung ke perangkat menggunakan Gamepad API.
  • Autentikasi biometrik (seperti pengenalan wajah atau sidik jari) menggunakan Autentikasi Web atau WebAuthn.

Integrasi sistem operasi

  • Sintesis ucapan dan pengenalan suara menggunakan suara yang diinstal di platform untuk berbicara dengan pengguna dan mengenali apa yang dikatakan pengguna, berkat Web Speech API.
  • Bagikan konten dari PWA Anda ke aplikasi dan tempat lain di perangkat, berkat Web Share API, seperti yang akan kita lihat di bab integrasi OS.
  • Akses papan klip untuk menyimpan dan mengambil konten dari papan klip dalam berbagai format, berkat Clipboard API, seperti yang saya tunjukkan di bab integrasi OS.
  • Kelola kredensial dan sandi pengguna menggunakan Credential Management API.
  • Aktifkan pemutaran video picture-in-picture dalam OS menggunakan API picture-in-picture.
  • Render konten dalam layar penuh berkat API Layar Penuh, seperti yang saya tampilkan di bab Windows.

Kemampuan hijau muda

Berikut adalah daftar kemampuan paling penting yang dapat Anda gunakan di PWA, dengan catatan bahwa fitur tersebut mungkin tidak tersedia di setiap browser.

Dasar-dasar

  • WebGL 2.0, versi baru spesifikasi WebGL agar cocok dengan OpenGL 3.0.
  • Codec, akses tingkat rendah ke setiap frame streaming video dan potongan audio; berguna untuk aplikasi web yang memerlukan kontrol penuh atas cara media diproses melalui Web Codecs API.

Hardware dan sensor

  • Lampu Ruangan membaca level cahaya saat ini atau iluminasi cahaya sekitar di sekitar perangkat, selain Sensors API.
  • Getaran memberikan respons haptik kepada pengguna saat terjadi sesuatu, jika perangkat mendukungnya, melalui Vibration API.
  • Media perekaman merekam data yang dihasilkan oleh objek MediaStream atau HTMLMediaElement (seperti tag <video>) untuk dianalisis, diproses, atau disimpan ke disk, berkat MediaRecorder API.
  • Menerapkan Penguncian layar saat aktif ke layar akan mencegah perangkat meredup atau mengunci layar, saat PWA perlu terus berjalan, menggunakan Screen Wake Lock API.
  • Virtual reality memungkinkan Anda menggunakan headset dan perangkat lain di PWA, berkat WebXR Device API.
  • Augmented reality dapat dicapai di PWA Anda dengan berbagai cara, seperti menggunakan WebXR Device API atau aplikasi Safari Quick Look untuk konten AR.
  • Deteksi pengguna tidak aktif dengan Idle Detection API.
  • Kunci orientasi mengunci orientasi ke potret atau lanskap saat PWA berada di layar, berkat Screen Orientation API, atau properti orientation dari Manifes Aplikasi Web untuk aplikasi terinstal.
  • Mempresentasikan konten di proyektor dan tampilan sekunder, berkat Presentation API.
  • Kunci pointer untuk menerima informasi gerakan delta dari pointer (mouse, trackpad, dan pointer), bukan nilai posisi—yang berguna untuk beberapa game—berkat Pointer Lock API.

Integrasi sistem operasi

Referensi