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
- Geolocation mendapatkan lokasi pengguna melalui berbagai penyedia, seperti satelit atau Wi-Fi melalui Geolocation API.
- Kamera dan mikrofon menerima streaming media dari kamera dan mikrofon menggunakan antarmuka Perangkat media.
- Sensor mengumpulkan informasi real-time dari akselerometer, giroskop, magnetometer, dan lainnya menggunakan Sensors API atau antarmuka yang lebih lama, seperti DeviceMotionEvent dan DeviceOrientationEvent. Di Safari, Anda harus menggunakan permintaan dialog izin non-standar untuk menggunakannya.
- Sentuhan dan kursor mengakses informasi tentang semua sentuhan dan klik berbasis pointer yang Anda buat dengan jari, mouse, trackpad, atau pena, berkat Peristiwa pointer dan Peristiwa sentuh.
- 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
- Kontrol kamera lanjutan untuk mengakses kontrol geser, kemiringan, dan zoom, selain API Media.
- Bluetooth LE untuk berkomunikasi dengan perangkat Bluetooth hemat energi di dekat pengguna menggunakan Web Bluetooth API. Lihat berkomunikasi dengan perangkat Bluetooth melalui JavaScript untuk informasi selengkapnya.
- Komunikasi nirkabel jarak dekat untuk bertukar data melalui NFC melalui pesan format pertukaran data NFC (NDEF) ringan, seperti tag atau kartu NFC menggunakan WebNFC API. Anda juga dapat membaca Berinteraksi dengan perangkat NFC di Chrome untuk Android untuk mengetahui detail selengkapnya.
Periferal serial untuk akses tingkat rendah ke perangkat yang terhubung ke perangkat menggunakan port serial, USB, atau serial melalui Bluetooth menggunakan WPI Serial Web. Pada link berikut, Anda dapat mempelajari cara membaca dan menulis ke port serial.
Akses perangkat USB untuk berkomunikasi dengan perangkat yang terhubung melalui USB WebUSB API. Lihat akses ke perangkat USB di web untuk informasi selengkapnya.
Perangkat antarmuka manusia memungkinkan PWA Anda berinteraksi dengan jenis perangkat apa pun yang disiapkan untuk interaksi manusia yang tidak umum, menggunakan WebHID API. Lihat panduan ini tentang menghubungkan ke perangkat HID yang tidak umum.
- 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
- Membaca dan menulis file di perangkat, berkat File System Access API, seperti yang Anda lihat dalam bab OS Integration.
- Dapatkan konten dari aplikasi lain berkat Target Berbagi Web, seperti yang saya tunjukkan dalam bab Integrasi OS.
- Mendapatkan data kontak menggunakan Contact Picker API, seperti yang ditampilkan dalam bab Integrasi OS.
- Sinkronkan di latar belakang saat PWA tidak digunakan, berkat Background Synchronization API.
- Penjadwalan tugas saat PWA tidak digunakan, berkat Web Periodic Background Synchronization API.
- Mengirim notifikasi menggunakan Web Push dan Web Notifications API.
- Transfer file di latar belakang saat pengguna tidak menggunakan PWA Anda, berkat Background Fetch API.
- Integrasikan media yang diputar dengan sistem operasi menggunakan Media Session API.
- Kelola pembayaran di PWA Anda, berkat Payment Request API. Apple juga menawarkan library Apple Pay JS selain Payment Request API.
- Buat kueri status jaringan, seperti jenis koneksi (4G, Wi-Fi) dan flag Simpan Data menggunakan Network Information API.
- Ambil gambar layar pengguna untuk screencast atau berbagi layar menggunakan Screen Capture API.
- Mendeteksi bentuk menggunakan detektor dengan akselerasi hardware di perangkat, termasuk kode batang (wajah manusia dan OCR teks masih dalam pengembangan) menggunakan Shape Detection API.
- Buat kueri memori perangkat menggunakan Device Memory interface.
- Sandi sekali pakai melalui SMS memungkinkan Anda menerima kode secara otomatis melalui SMS yang dikirim dari server Anda menggunakan WebOTP API. Safari menerapkan subset solusi berdasarkan elemen
<input>
. Baca selengkapnya di blog WebKit. - Kelola keyboard virtual yang muncul di layar perangkat seluler menggunakan Virtual Keyboard API.