Progressive Web App (PWA) Desktop adalah cara lintas platform dan lintas browser yang efektif untuk membangun aplikasi dengan model keamanan yang berfokus pada keselamatan dan privasi pengguna serta mendapatkan fitur berbagi bawaan dengan kemampuan penautan web yang inheren. Bangun aplikasi web baru atau tingkatkan kualitas aplikasi web yang sudah ada dengan API modern untuk memberikan kemampuan, keandalan, dan kemampuan penginstalan seperti aplikasi desktop. PWA adalah cara terbaik untuk menghadirkan aplikasi web Anda untuk ChromeOS.
Di ChromeOS, kecanggihan platform web menjadi yang utama; aplikasi web adalah fitur platform inti. PWA yang diinstal akan muncul di peluncur ChromeOS, dapat disematkan ke panel aplikasi, dan terintegrasi secara mendalam dengan OS lainnya.
Mulailah dengan meninjau Daftar Periksa PWA dan pastikan aplikasi web Anda lulus daftar periksa PWA inti. Anda dapat menggunakan PWABuilder untuk membantu Anda menyediakan halaman offline kustom dan membuat aplikasi Anda dapat diinstal. Kemudian, gunakan rekomendasi ini untuk membuat PWA Anda tampil menarik di ChromeOS.
Membuatnya dapat diinstal
Salah satu keuntungan besar PWA dibandingkan aplikasi web biasa adalah kemampuannya untuk diinstal, seperti aplikasi desktop tradisional. Jalur Progressive Web App di web.dev memiliki bagian khusus untuk membuat PWA Anda dapat diinstal; gunakan bagian tersebut untuk memulai. Agar PWA diidentifikasi sebagai dapat diinstal di ChromeOS, kriteria berikut harus dipenuhi, yang dapat diperiksa menggunakan audit dapat diinstal Lighthouse:
- Harus memiliki manifes aplikasi web yang valid
-
Aplikasi harus memenuhi kriteria penginstalan Chrome
- Untuk PWA di ChromeOS, perintah penginstalan akan ditampilkan di kotak URL tanpa memenuhi nilai minimum heuristik engagement pengguna.
Ikon adalah bagian penting dari identitas PWA Anda, jadi pastikan ikon tersebut menarik dan unik; ikon tersebut bahkan dapat menyertakan transparansi. Karena PWA memiliki satu codebase yang dibagikan di semua platform, Anda harus memastikan bahwa Anda memiliki ikon yang dapat di-masking. Pastikan Anda juga menyertakan ikon normal untuk sistem operasi yang tidak mendukung ikon yang dapat di-masking.
Setelah PWA Anda dapat diinstal, PWA tersebut akan muncul di ChromeOS, dari peluncur hingga panel. Menginstal PWA juga membuka beberapa kemampuan tambahan untuk membuat aplikasi Anda terlihat lebih bagus.
Catatan tentang bekerja secara offline
Ada banyak keuntungan dalam hal penemuan, kegunaan, dan kemampuan hanya dengan membuat aplikasi Anda dapat diinstal. Membuat PWA Anda dapat diinstal tidak berarti seluruh pengalaman Anda harus berfungsi secara offline. Namun, agar aplikasi web yang diinstal terasa seperti aplikasi tradisional, aplikasi tersebut harus memiliki beberapa bentuk fungsi offline. Halaman offline kustom dasar sudah cukup untuk memulai; pengguna berharap aplikasi terinstal tidak error saat status koneksi berubah. Sama seperti aplikasi tradisional yang tidak pernah menampilkan halaman kosong saat offline, PWA tidak boleh menampilkan halaman offline default browser. Halaman offline kustom dapat berupa pesan yang memberi tahu pengguna bahwa mereka memerlukan koneksi untuk bermain game hingga mereka terhubung kembali. Menyediakan pengalaman offline kustom ini untuk halaman atau fitur yang tidak di-cache yang memerlukan koneksi akan membantu menjembatani kesenjangan aplikasi pengalaman pengguna.
Anda dapat membuat halaman offline sederhana selama peristiwa install pekerja layanan dengan melakukan pra-cache halaman yang diinginkan untuk digunakan nanti dan meresponsnya jika pengguna offline. Anda dapat mengikuti contoh halaman offline kustom kami untuk melihat contoh penerapannya dan mempelajari cara menerapkannya sendiri.
Jika Anda ingin memberikan pengalaman yang lebih andal, selain Cache Storage API, Anda dapat menggunakan fitur seperti IndexedDB untuk penyimpanan NoSQL dalam browser dan sinkronisasi latar belakang untuk memungkinkan pengguna melakukan tindakan saat offline dan menunda komunikasi server hingga pengguna memiliki koneksi yang stabil lagi. Anda juga dapat menerapkan pola seperti sesi yang aman dan berumur panjang untuk menjaga pengguna tetap diautentikasi dan layar kerangka untuk memberi tahu pengguna dengan cepat bahwa Anda sedang memuat konten yang dapat menggunakan konten yang di-cache atau indikator offline jika diperlukan.
Buat agar dapat disentuh
Hampir semua perangkat ChromeOS mendukung sentuhan dan banyak yang mendukung stylus juga, jadi Anda harus memastikan bahwa aplikasi Anda berfungsi dengan lancar dengan kedua input tersebut selain keyboard dan mouse normal. Pointer Events API dirancang khusus untuk menangani hal ini. Beberapa peristiwa terkait penunjuk mendasar yang kemungkinan tidak perlu Anda ubah, seperti peristiwa click. Peristiwa lain, seperti mouseup atau touchstart, harus dimigrasikan ke peristiwa pointer yang setara agar berfungsi lancar di semua jenis pointer. Anda bahkan dapat mengelola berbagai jenis input secara terpisah jika Anda mau. Untuk aplikasi dan game yang sangat mengandalkan input pengguna sentuh, beralih ke Pointer Events API akan memberikan perbedaan besar pada perangkat ChromeOS.
Menggambar dengan lancar di web
Jika Anda membuat aplikasi yang memungkinkan pengguna menggambar dengan jari atau stylus, menjaga latensi antara input dan output agar cukup cepat untuk terasa lancar secara historis sulit dilakukan. Saat mem-build aplikasi yang didukung Canvas API semacam ini untuk ChromeOS, sebaiknya gunakan petunjuk desynchronized untuk canvas.getContext() guna memberikan rendering latensi rendah. Untuk menggunakan petunjuk desynchronized untuk kanvas, lakukan hal berikut:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Pertimbangan desain untuk sentuhan
Penting untuk mempertimbangkan dukungan sentuhan dan stilus saat mendesain aplikasi web Anda. Interaksi yang mungkin Anda anggap remeh, seperti mengarahkan kursor, tidak berfungsi dengan baik, jika berfungsi, untuk metode input lainnya. Berikut adalah beberapa praktik terbaik yang perlu diingat saat mendesain antarmuka yang kompatibel dengan sentuhan dan stylus:
- Jangan membuat asumsi input berdasarkan ukuran layar. Sebagai gantinya, gunakan deteksi fitur, idealnya pada waktu input, untuk menentukan cara merespons. Ingat, di ChromeOS, pengguna dapat dan melakukan peralihan yang lancar antara mouse, sentuhan, dan stilus dalam satu sesi.
- Pastikan elemen yang Anda harapkan disentuh pengguna memiliki ukuran target minimum yang cukup besar sehingga elemen di sekitarnya tidak tersentuh secara tidak sengaja.
- Perlakukan pengarahan kursor sebagai peningkatan progresif dan pastikan interaksi dapat dilakukan melalui cara lain untuk sentuhan dan stilus (misalnya, tekan lama atau ketuk).
- Pengguna layar sentuh berharap dapat berinteraksi langsung dengan elemen di layar, misalnya mencubit untuk melakukan zoom pada peta, bukan menggunakan tombol zoom masuk/keluar. Menambahkan gestur sentuh umum, jika sesuai, dapat membuat aplikasi Anda terasa alami.
Buat agar dapat dilakukan
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 dan mempertahankan keunikan web: keamanan yang berfokus pada pengguna, gesekan rendah, dan kompatibilitas lintas platform.
Catatan: Kemampuan ini memiliki berbagai status penyelesaian, mulai dari dalam pertimbangan hingga sudah diluncurkan, dan mungkin hanya ditargetkan untuk perangkat desktop atau seluler, bukan keduanya. 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.