PWA yang Canggih

Meskipun beberapa kemampuan PWA sudah umum diketahui, seperti Notifications API yang memungkinkan aplikasi web menerima dan memublikasikan notifikasi platform, ada sejumlah fitur baru dan mendatang yang akan hadir di web untuk meningkatkan kemampuan aplikasi Anda. Project Kemampuan Web Chromium, yang juga dikenal sebagai Project Fugu 🐡, adalah upaya untuk mengaktifkan standar web baru yang canggih sekaligus mempertahankan keunikan web: keamanan yang berfokus pada pengguna, gesekan rendah, dan kompatibilitas lintas platform.

Catatan: Kemampuan ini berada dalam berbagai tahap penyelesaian, mulai dari dalam pertimbangan hingga sudah diluncurkan. Dokumen ini berfokus pada fitur yang berfungsi di desktop. Meskipun pengguna ChromeOS cenderung mendapatkan fitur yang ditargetkan untuk desktop saat fitur tersebut tersedia, dukungan lintas platform, bahkan dukungan yang stabil di ChromeOS, terkadang dapat menjadi proses bertahun-tahun. Periksa pelacak kemampuan untuk mengetahui informasi yang lebih akurat tentang rilis kemampuan.

Menjembatani kesenjangan aplikasi

Sebagian besar kemampuan ini dibangun untuk menjembatani kesenjangan antara aplikasi desktop atau seluler tradisional dan aplikasi web, dengan kemampuan utama pertama yang diluncurkan memungkinkan aplikasi web mengakses pemilih kontak dan kemampuan berbagi platform, serta PWA yang diinstal untuk mendaftar sebagai target berbagi platform dan menampilkan badge ikon, dan masih banyak lagi.

Setiap kemampuan menjalani proses standardisasi yang ekstensif untuk mendapatkan masukan dari komunitas guna membantu membentuk API dan memastikan desain akhirnya aman, pribadi, dan tepercaya. Kemampuan baru dilacak dalam pelacak terbuka dan dapat dibagi menjadi salah satu dari lima kategori:

DIKIRIM

Tersedia untuk digunakan di Chrome versi stabil terbaru. Dapat digunakan dengan andal asalkan penggunaannya dideteksi dengan benar.

DALAM UJI COBA ASAL

Tersedia sebagai uji coba origin (OT) Chrome, yang memungkinkan fitur dan API eksperimental divalidasi oleh tim Chrome dalam penggunaan di dunia nyata dan memungkinkan Anda memberikan masukan tentang kegunaan dan efektivitas API. OT bersifat keikutsertaan dan memungkinkan Anda menguji beta fungsi ini dengan pengguna tanpa mengharuskan mereka mengaktifkan tanda khusus apa pun di browser mereka. API dapat berubah setelah OT, dan OT dijamin tidak tersedia selama jangka waktu tertentu sebelum peluncuran, sehingga tidak boleh diperlakukan sebagai mekanisme peluncuran awal untuk API baru.

DALAM UJI COBA DEVELOPER

Tersedia di balik tanda di Chrome. API ini bersifat eksperimental dan masih dalam pengembangan aktif. API ini belum siap digunakan untuk produksi, dengan kemungkinan besar masih ada bug dan API akan berubah. Meskipun developer dapat menggunakan waktu ini untuk mencoba fitur eksperimental sendiri, mereka tidak boleh menginstruksikan pengguna untuk mengaktifkan tanda untuk menggunakan fitur mereka.

DIMULAI

Pengembangan telah dimulai, tetapi saat ini tidak ada API yang dapat digunakan.

DALAM PERTIMBANGAN

API yang diminati pengguna, tetapi implementasinya belum dimulai. Jika API belum dimulai, beri bintang atau tambahkan kasus penggunaan Anda ke masalahnya untuk membantu tim Chromium memprioritaskannya.

Meningkatkan kualitas PWA Anda

Saat membangun PWA, pertimbangkan untuk menerapkan API dan praktik terbaik berikut untuk meningkatkan kualitas aplikasi web Anda secara signifikan. Berdasarkan kasus penggunaan umum, aplikasi Anda mungkin mendapatkan manfaat dari satu atau beberapa API untuk meningkatkan pengalaman pengguna secara keseluruhan. API yang ditandai dengan 🔮 berada dalam uji coba origin, yang ditandai dengan 🚩 berada dalam uji coba developer, yang ditandai dengan 📱 saat ini stabil di perangkat seluler dan implementasi desktopnya telah dimulai, dengan API lain yang disebutkan bersifat stabil (meskipun mungkin tidak tersedia di semua platform). Hanya API yang tersedia di versi stabil, beta (ditandai dengan β), atau canary (ditandai dengan α) Chrome saat ini yang disertakan; daftar ini akan diupdate secara rutin untuk mencerminkan API yang dirilis.

Penginstalan aplikasi

Jika Anda ingin aplikasi web tersedia bersama aplikasi terinstal lainnya, seperti di taskbar, peluncur, desktop, dan pengalih aplikasi, pertimbangkan untuk menerapkan API berikut agar PWA Anda dapat diinstal. Opsional, ikuti codelab ini.

• Manifes Aplikasi Web - Memberikan informasi tentang aplikasi web Anda ke browser dan sistem operasi, misalnya nama, logo, URL untuk memulai aplikasi, dan cara menampilkan aplikasi web Anda.
• Service Worker dan Cache Storage API - Memungkinkan aplikasi web Anda membuat server proxy dan mengontrol cara penanganan cache browser. Pekerja layanan yang bereaksi terhadap peristiwa pengambilan data browser dan dapat merespons permintaan pengambilan data untuk URL awal yang ditentukan dalam manifes aplikasi web dengan konten saat offline adalah persyaratan agar dapat diinstal.
• Jalankan saat Login 🚩β - Memungkinkan Anda mengonfigurasi PWA agar diluncurkan secara otomatis saat pengguna login.
• Pintasan Ikon Aplikasi - Menyediakan pintasan ke URL tertentu dengan aplikasi web Anda (misalnya, memulai chat, mengupload foto, dll…) dari menu konteks ikon aplikasi yang diinstal (yaitu, tekan lama di perangkat seluler, klik kanan di desktop), di platform yang didukung.
• getInstalledRelatedApps - Memungkinkan aplikasi web Anda memeriksa apakah PWA, aplikasi Android, atau aplikasi Windows (UWP) Anda telah diinstal.

Adaptif & mudah diakses

Jika Anda ingin aplikasi web Anda dapat digunakan oleh pengguna dengan perangkat yang berbeda dan kebutuhan fisik dan/atau mental yang berbeda, Anda harus mempertimbangkan untuk menerapkan hal berikut:

• Desain Responsif - Pastikan aplikasi web Anda memberikan pengalaman yang dapat digunakan, atau setidaknya tidak rusak, untuk ukuran layar kecil hingga besar agar pengguna dengan berbagai perangkat dan penempatan jendela dapat menggunakan aplikasi Anda.
• Panduan WCAG 2.0 - Pastikan aplikasi web Anda dapat digunakan oleh orang dengan berbagai kemampuan fisik dan mental, bukan hanya individu neurotipikal dan yang mampu secara fisik. Lihat juga Do’s and don’ts on designing for accessibility dari Pemerintah Inggris Raya.

Monetisasi & distribusi

• Web Payments - Antarmuka standar yang fleksibel untuk pembayaran online yang dimaksudkan untuk berfungsi di browser atau perangkat apa pun dan dengan penyedia layanan pembayaran atau pembayaran apa pun.
• Digital Goods API 🔮 - Antarmuka standar yang fleksibel untuk membuat kueri dan mengelola pembelian dalam aplikasi dari aplikasi web, termasuk dukungan untuk jenis pembelian umum seperti pembelian satu kali, pembelian berulang (seperti gem/mata uang dalam game), dan langganan. Berfungsi bersama dengan Pembayaran Web.
• Trusted Web Activity - Buat aplikasi Android untuk PWA Anda agar dapat dicantumkan untuk didownload di toko yang kompatibel, misalnya Google Play.

Akses papan klip

• Async Clipboard - Membaca dan menulis teks serta gambar ke papan klip pengguna, dan memproses peristiwa salin dan tempel dari pengguna.

Notifikasi

Jika aplikasi web Anda perlu memberi tahu pengguna, misalnya aplikasi chat atau encoding latar belakang yang sedang dikerjakan, Anda dapat mempertimbangkan untuk menerapkan API berikut:

• Notifikasi Push Web - Setelah pengguna memilih untuk menerima notifikasi, aplikasi web Anda dapat mengirimkan notifikasi push kepada mereka.
• Badging API - Memungkinkan aplikasi web yang diinstal untuk menyetel badge di seluruh aplikasi pada ikon aplikasi, dengan angka atau tidak.
• Pemicu Notifikasi 🔮 - Mengirim notifikasi kepada pengguna saat kondisi pemicu telah terpenuhi, misalnya berdasarkan waktu atau lokasi (seperti notifikasi acara kalender)

Berbagi maksud & penanganan protokol

• Pendaftaran protokol URL 🚩α - Memungkinkan aplikasi web mendaftarkan diri sebagai pengendali protokol/skema URL kustom menggunakan manifes penginstalannya.
• Web Share - Menggunakan UI berbagi sistem bawaan di perangkat yang didukung untuk membagikan URL, teks, dan file ke aplikasi lain yang diinstal di perangkat mereka. Aplikasi Anda tidak perlu diinstal.
• Target Berbagi Web - Membuat PWA terinstal Anda tersedia di UI berbagi sistem bawaan di perangkat yang didukung untuk memungkinkan pengguna membagikan teks dan file ke aplikasi Anda dari aplikasi lain.

Membuka & menyimpan file

• File Handling API 🚩 - Membuat aplikasi web yang diinstal mendaftarkan kemampuannya ke sistem operasi untuk menangani (membaca/mengalirkan/mengedit) file dengan jenis MIME dan/atau ekstensi file tertentu, sehingga aplikasi web tersebut dapat menjadi opsi dalam daftar “Buka dengan Aplikasi…” di menu konteks.
• File System Access API - Akses yang andal ke sistem file pengguna per sesi, yang memungkinkan interaksi berikut (sesuai kebutuhan aplikasi Anda)
  • Membaca file dari sistem file lokal - Menampilkan alat pilih file dan memungkinkan pengguna memilih satu atau, secara opsional, beberapa file untuk dibuka, termasuk membatasi jenis file yang diizinkan menurut jenis MIME dan ekstensi.
  • Simpan perubahan ke file yang terbuka - Simpan perubahan ke file yang dibuka dengan FSA secara langsung, tanpa meminta pengguna memilih tempat untuk menyimpan file atau mendownload salinannya.
  • Buat file baru di sistem file lokal - Izinkan pengguna membuat file baru, dengan ekstensi file default jika perlu, di sistem file lokal mereka, yang kemudian dapat diakses oleh aplikasi Anda untuk disimpan.
  • File yang baru dibuka - Handler file yang dibuat dengan FSA dapat disimpan di IndexedDB sehingga Anda dapat menampilkan daftar file yang baru digunakan di antara sesi pengguna (meskipun izin pengeditan tetap tidak dipertahankan di antara sesi)
  • Membaca, menulis, dan memanipulasi direktori - Memungkinkan pengguna memilih direktori di sistem file lokal mereka yang kemudian dapat dibaca kontennya oleh aplikasi Anda, membuat, membaca, dan menghapus file serta subdirektori di dalamnya, dan menentukan jalur file relatif di dalamnya.
• Compression Streams - Mengompresi atau mendekompresi menggunakan algoritma kompresi gzip dan deflate.

Pengelolaan Jendela

• Fullscreen API - Mengizinkan pengguna membuat elemen di aplikasi web Anda, misalnya video, ditampilkan di seluruh layar
• Cross-Screen Window Placement API 🔮 - Memungkinkan aplikasi web Anda mendapatkan informasi tentang layar yang terhubung dan memosisikan jendela relatif terhadap layar tersebut sehingga memungkinkan aplikasi web multi-jendela dan multi-layar.
• Mode Tampilan Aplikasi Bertab 🚩 - Mengizinkan aplikasi web yang diinstal ditampilkan dalam satu atau beberapa tab, bukan hanya dalam satu jendela.

Integrasi OS yang lebih mendalam

• Local Fonts API 🔮 - Memungkinkan aplikasi web Anda mencantumkan font yang diinstal secara lokal dan meminta akses penampung SFNT tingkat rendah (berorientasi byte) yang mencakup data font lengkap, sehingga aplikasi Anda dapat merender font yang diinstal secara lokal secara kustom.
• Wake Lock - Memungkinkan aplikasi web Anda mencegah layar menjadi tidak aktif, sehingga aplikasi web Anda dapat melakukan tugas yang berjalan lama tanpa takut terganggu (yaitu transkode file, atau menampilkan resep saat memasak)
• Deteksi Tidak Ada Aktivitas 🔮 - Memungkinkan aplikasi web Anda mendeteksi saat pengguna tidak aktif menggunakan perangkatnya.

Dukungan offline yang diperluas

Jika ingin aplikasi web Anda berfungsi lebih baik saat offline, Anda dapat mempertimbangkan untuk menerapkan API berikut:

• Sinkronisasi Latar Belakang - Saat offline, antrekan permintaan yang memerlukan koneksi, lalu sinkronkan data aplikasi web Anda di latar belakang, saat jaringan tersedia, alih-alih tidak memproses permintaan offline sama sekali. Misalnya, mengizinkan pesan dikirim atau perubahan inkremental pada dokumen disinkronkan saat kembali online.
• Sinkronisasi Latar Belakang Berkala - Mengizinkan aplikasi web yang diinstal dan sering digunakan untuk mengaktifkan pekerja layanannya secara berkala, berdasarkan waktu minimum yang berlalu, dan berjalan, misalnya untuk memperbarui cache, sehingga konten selalu terbaru saat pengguna membuka aplikasi.
• Content Indexing API - Memungkinkan aplikasi web Anda memberi tahu browser konten apa yang tersedia secara offline agar browser dapat menampilkannya kepada pengguna.
• Pengambilan di Latar Belakang - Memungkinkan pengambilan di latar belakang yang berjalan lama, seperti mendownload film atau mengupload video dan gambar, tanpa risiko menghentikan proses pekerja layanan.

Streaming, encoding, & decoding media

Jika aplikasi web Anda memutar kembali file media, seperti file video atau audio, Anda dapat mempertimbangkan untuk menerapkan API berikut:

• Streaming Adaptif - Mengizinkan streaming video beralih di antara kecepatan bit berdasarkan performa jaringan
• Picture-in-Picture - Memungkinkan pengguna mengeluarkan video dari aplikasi web Anda ke jendela yang selalu berada di atas, yang kemudian dapat dipindahkan dan diubah ukurannya secara independen
• Media Session API - Memungkinkan pengguna mengontrol pemutaran media untuk aplikasi web Anda menggunakan fungsi software tingkat OS dan hardware (seperti tombol putar/jeda/berhenti di keyboard atau di layar kunci), serta mengontrol notifikasi media tingkat OS (seperti judul, artis, album, dan poster)
• Chromecast API - Memungkinkan pengguna melakukan transmisi media ke penerima Chromecast yang tersedia, misalnya untuk memutar video dari aplikasi web Anda di TV mereka.
• Web Codecs 🔮 - Akses ke encoder dan dekoder media hardware dan software bawaan, berguna untuk kasus penggunaan real-time seperti live streaming dan encoding, decoding, serta transcoding file dengan latensi rendah.

Dukungan input yang diperluas

• Pointer Events - Bereaksi terhadap peristiwa sentuhan, stylus, dan mouse menggunakan satu API, sehingga memungkinkan lebih banyak opsi input untuk pengguna Anda. Lihat juga praktik terbaik untuk UI yang kompatibel untuk sentuhan dan input dan kontrol pengguna.
• Gamepad API - Memungkinkan aplikasi web Anda merespons input dari gamepad umum
• Web HID 🚩 - Memungkinkan aplikasi web Anda mengakses perangkat antarmuka manusia non-standar (seperti pengontrol kustom)

Dukungan periferal lanjutan

• Web USB - Memungkinkan aplikasi web Anda mengakses perangkat USB non-standar (yaitu keyboard dan mouse) dari aplikasi Anda
• Serial API 🔮 - Menambahkan API untuk berkomunikasi dengan perangkat hardware melalui port serial fisik atau virtual.

Checklist PWA Anda

Siap mulai meningkatkan kualitas PWA Anda dengan API baru yang canggih ini? Pilih salah satu kasus penggunaan di bawah untuk melihat kumpulan API yang direkomendasikan untuk digunakan, atau buat checklist Anda sendiri, dan selesaikan checklist tersebut.