Progressive Web Apps (PWA) dibuat dan ditingkatkan dengan API modern untuk memberikan kemampuan, keandalan, dan kemampuan penginstalan yang ditingkatkan sekaligus menjangkau siapa saja, di mana saja, di perangkat apa pun dengan satu codebase. Untuk membantu Anda membuat pengalaman terbaik, gunakan checklist dan rekomendasi inti serta optimal untuk memandu Anda.
Checklist Core Progressive Web App
Checklist Progressive Web App menjelaskan hal-hal yang membuat aplikasi dapat diinstal dan digunakan oleh semua pengguna, terlepas dari ukuran atau jenis input.
Performa memainkan peran penting dalam keberhasilan pengalaman online, karena situs berperforma tinggi memiliki engagement dan retensi pengguna yang lebih baik daripada situs berperforma buruk. Fokus pada pengoptimalan untuk metrik performa yang berfokus pada pengguna.
Mengapa
Kecepatan sangat penting untuk mendorong pengguna menggunakan aplikasi Anda.
Faktanya, saat waktu muat halaman meningkat dari satu detik menjadi sepuluh detik,
kemungkinan pengguna berhenti mengakses halaman tersebut akan meningkat sebesar 123%. Performa juga tidak berhenti dengan peristiwa load. Pengguna tidak boleh bertanya-tanya
apakah interaksi mereka—misalnya, mengklik tombol—
terdaftar atau tidak. Scroll dan animasi harus terasa halus.
Performa memengaruhi seluruh pengalaman Anda, baik dalam perilaku aplikasi
maupun persepsi pengguna terhadapnya.
Meskipun semua aplikasi memiliki kebutuhan yang berbeda-beda, audit performa di Lighthouse didasarkan pada Core Web Vitals, dan mendapatkan skor yang tinggi pada audit tersebut akan membuat pengguna lebih mungkin memiliki pengalaman yang menyenangkan. Anda juga dapat menggunakan PageSpeed Insights atau Laporan Pengalaman Pengguna Chrome untuk mendapatkan data performa nyata untuk aplikasi web Anda.
Bagaimana
Ikuti panduan tentang waktu pemuatan yang cepat untuk mempelajari cara membuat PWA Anda dimulai dengan cepat dan tetap cepat.
Pengguna dapat menggunakan browser apa pun yang mereka pilih untuk mengakses aplikasi web Anda sebelum diinstal.
Mengapa
Progressive Web App adalah aplikasi web terlebih dahulu, dan itu berarti aplikasi tersebut harus berfungsi di seluruh browser.
Cara efektif untuk melakukannya adalah dengan, menurut Jeremy Keith dalam Resilient Web Design, mengidentifikasi fitur inti, menyediakan fitur tersebut menggunakan teknologi yang paling sederhana, lalu meningkatkan pengalaman jika memungkinkan. Dalam banyak kasus, ini berarti memulai dengan HTML saja untuk membuat fitur inti, lalu meningkatkan kualitas pengalaman pengguna dengan CSS dan JavaScript untuk menciptakan pengalaman yang lebih menarik.
Misalnya, pengiriman formulir. Cara paling sederhana untuk menerapkannya adalah
formulir HTML yang mengirimkan permintaan POST. Setelah itu, Anda dapat meningkatkan pengalaman dengan JavaScript untuk melakukan
validasi formulir dan mengirimkan formulir melalui AJAX, sehingga meningkatkan pengalaman
bagi pengguna yang dapat mendukungnya.
Pengguna menikmati situs Anda di berbagai perangkat dan browser. Anda tidak dapat menargetkan ujung atas spektrum tersebut. Gunakan deteksi fitur untuk memberikan pengalaman yang dapat digunakan bagi berbagai calon pengguna, termasuk mereka yang menggunakan browser dan perangkat yang belum ada.
Bagaimana
Resilient Web Design karya Jeremy Keith adalah referensi yang sangat baik yang menjelaskan cara memikirkan desain web dalam metodologi progresif lintas browser ini.
Bacaan tambahan
- Memahami Peningkatan Progresif dari List Apart adalah pengantar yang bagus untuk topik ini.
- Progressive Enhancement: What It Is, And How To Use It? dari Smashing Magazine memberikan pengantar praktis dan link ke topik lanjutan.
- Artikel Mengimplementasikan deteksi fitur MDN membahas cara mendeteksi fitur dengan mengkueri fitur tersebut secara langsung.
Pengguna dapat menggunakan PWA Anda di ukuran layar apa pun, dan semua kontennya tersedia di ukuran area pandang apa pun.
Mengapa
Perangkat memiliki berbagai ukuran, dan pengguna dapat menggunakan aplikasi Anda dalam berbagai ukuran, bahkan di perangkat yang sama. Oleh karena itu, penting untuk memastikan bahwa konten Anda tidak hanya sesuai dengan area pandang, tetapi semua fitur dan konten untuk situs Anda dapat digunakan di semua ukuran area pandang.
Tugas yang ingin diselesaikan pengguna dan konten yang ingin mereka akses tidak berubah sesuai ukuran area pandang. Anda dapat mengatur ulang konten untuk berbagai ukuran area pandang yang berbeda, dan semuanya harus ada di sana, dengan cara apa pun. Faktanya, seperti yang dinyatakan Luke Wroblewski dalam bukunya Mobile First, memulai dari yang kecil dan menyesuaikan desain untuk layar yang lebih besar dapat meningkatkan desain situs:
Perangkat seluler mengharuskan tim pengembangan software untuk berfokus pada data dan tindakan yang paling penting dalam aplikasi. Tidak ada ruang pada layar berukuran 320 x 480 piksel untuk elemen yang tidak relevan dan tidak diperlukan. Anda harus membuat prioritas.
Bagaimana
Ada banyak referensi mengenai desain responsif, termasuk artikel asli oleh Ethan Marcotte, kumpulan konsep penting yang terkait dengannya, serta berbagai buku dan diskusi. Untuk mempersempit diskusi ini ke aspek konten desain responsif, lihat desain yang mengutamakan konten dan tata letak responsif yang mengutamakan konten. Terakhir, meskipun berfokus pada perangkat seluler, pelajaran dalam Seven Deadly Mobile Myths oleh Josh Clark sama relevannya dengan tampilan berukuran kecil dari situs responsif seperti halnya untuk perangkat seluler secara umum.
Saat pengguna offline, mempertahankan mereka di PWA Anda akan memberikan pengalaman yang lebih lancar daripada kembali ke halaman offline browser default.
Mengapa
Pengguna berharap aplikasi terinstal dapat berfungsi, apa pun status koneksi mereka. Aplikasi khusus platform tidak pernah menampilkan halaman kosong saat offline, dan PWA tidak boleh menampilkan halaman offline default browser. Memberikan pengalaman offline kustom, baik saat pengguna membuka URL yang belum di-cache maupun saat pengguna mencoba menggunakan fitur yang memerlukan koneksi, akan membantu pengalaman web Anda terasa seperti bagian dari perangkat tempatnya berjalan.
Bagaimana
Selama peristiwa install pekerja layanan, Anda dapat melakukan precache halaman offline kustom untuk ditampilkan saat pengguna offline. Lihat artikel Membuat halaman penggantian offline untuk mempelajari cara menerapkannya sendiri. Perhatikan bahwa Chrome akan
menampilkan halaman offline dasar jika tidak ada yang disediakan.
Pengguna yang menginstal atau menambahkan aplikasi ke perangkat mereka cenderung lebih banyak berinteraksi dengan aplikasi tersebut.
Mengapa
Dengan menginstal Progressive Web App, aplikasi tersebut akan terlihat, terasa, dan berperilaku seperti semua aplikasi terinstal lainnya. Aplikasi ini diluncurkan dari tempat yang sama dengan tempat pengguna meluncurkan aplikasi lainnya. Aplikasi ini berjalan di jendela aplikasinya sendiri, terpisah dari browser, dan muncul di daftar tugas, seperti aplikasi lainnya.
Seperti aplikasi khusus perangkat, pengguna yang menginstal aplikasi Anda adalah audiens yang paling aktif, dan sering kali memiliki metrik engagement yang setara dengan pengguna aplikasi di perangkat seluler. Metrik ini mencakup kunjungan berulang yang lebih banyak, waktu yang lebih lama di situs Anda, dan rasio konversi yang lebih tinggi daripada pengunjung biasanya.
Bagaimana
Ikuti panduan penginstalan kami untuk mempelajari cara membuat PWA Anda dapat diinstal.
Checklist Progressive Web App yang Optimal
Untuk membuat PWA yang benar-benar hebat, yang terasa seperti aplikasi terbaik di kelasnya, Anda memerlukan lebih dari sekadar checklist inti. Checklist PWA yang optimal bertujuan untuk membuat PWA Anda terasa seperti bagian dari perangkat tempatnya berjalan sekaligus memanfaatkan hal-hal yang membuat web menjadi canggih.
Jika konektivitas tidak sepenuhnya diperlukan, aplikasi Anda berfungsi secara offline, seperti halnya online.
Mengapa
Selain menyediakan halaman offline kustom, pengguna mengharapkan PWA dapat digunakan secara offline. Misalnya, aplikasi perjalanan dan maskapai penerbangan harus memiliki detail perjalanan dan boarding pass yang tersedia saat offline. Aplikasi musik, video, dan podcasting harus memungkinkan pemutaran offline. Aplikasi sosial dan berita harus menyimpan konten terbaru dalam cache agar pengguna dapat membacanya secara offline. Pengguna juga berharap untuk tetap diautentikasi saat offline, jadi desainlah untuk autentikasi offline. PWA offline memberikan pengalaman seperti aplikasi yang sebenarnya bagi pengguna.
Bagaimana
Setelah menentukan fitur mana yang diharapkan pengguna untuk berfungsi secara offline, Anda harus membuat konten yang tersedia dan dapat disesuaikan dengan konteks offline. Anda dapat menggunakan IndexedDB, sistem penyimpanan NoSQL dalam browser, untuk menyimpan dan mengambil data, serta sinkronisasi latar belakang agar pengguna dapat melakukan tindakan saat offline dan menunda komunikasi server hingga pengguna memiliki koneksi yang stabil kembali. Anda juga dapat menggunakan pekerja layanan untuk menyimpan jenis konten lainnya, seperti gambar, file video, dan file audio, untuk penggunaan offline, dan untuk menerapkan sesi yang aman dan berumur panjang agar pengguna tetap diautentikasi. Dari perspektif pengalaman pengguna, Anda dapat menggunakan layar kerangka yang memberikan persepsi kecepatan dan konten kepada pengguna saat pemuatan, yang kemudian dapat beralih kembali ke konten yang disimpan dalam cache atau indikator offline sesuai kebutuhan.
Semua interaksi pengguna lulus persyaratan aksesibilitas WCAG 2.0.
Mengapa
Sebagian besar pengguna, pada suatu saat, ingin menggunakan PWA Anda dengan cara yang tercakup dalam persyaratan aksesibilitas WCAG 2.0. Kemampuan manusia untuk berinteraksi dan memahami PWA Anda ada dalam berbagai spektrum, dan kebutuhannya dapat bersifat sementara atau permanen. Dengan membuat PWA mudah diakses, Anda membuatnya dapat digunakan oleh semua orang.
Bagaimana
Pengantar Aksesibilitas Web
W3C adalah tempat yang baik untuk memulai. Sebagian besar pengujian aksesibilitas harus
dilakukan secara manual. Alat seperti audit Aksesibilitas
di Lighthouse, kapak,
dan Insight Aksesibilitas
dapat membantu Anda mengotomatiskan beberapa pengujian aksesibilitas. Penting juga untuk menggunakan elemen yang benar secara semantik, bukan membuat ulang elemen tersebut sendiri, misalnya, elemen a dan button. Hal ini memastikan bahwa ketika Anda perlu membuat fitur yang lebih canggih, ekspektasi aksesibilitas akan terpenuhi (seperti kapan harus menggunakan panah versus tab).
Kartu Nutrisi A11Y memiliki
saran yang sangat baik tentang hal ini untuk beberapa komponen umum.
PWA Anda dapat dengan mudah ditemukan melalui penelusuran.
Mengapa
Salah satu keuntungan terbesar dari web adalah kemampuan untuk menemukan situs dan aplikasi melalui penelusuran. Bahkan, lebih dari setengah dari semua traffic situs berasal dari penelusuran organik. Pastikan URL kanonis ada untuk konten dan mesin telusur dapat mengindeks situs Anda agar calon pengguna dapat menemukan PWA Anda. Hal ini terutama berlaku saat mengadopsi rendering sisi klien.
Bagaimana
Mulailah dengan memastikan bahwa setiap URL memiliki judul deskriptif dan deskripsi meta yang unik. Kemudian, Anda dapat menggunakan Google Search Console dan audit Search Engine Optimization di Lighthouse untuk men-debug dan memperbaiki masalah visibilitas PWA Anda. Anda juga dapat menggunakan alat pemilik situs milik Bing atau Yandex, dan mempertimbangkan untuk menyertakan data terstruktur menggunakan skema dari Schema.org di PWA Anda.
PWA Anda dapat digunakan dengan mouse, keyboard, stilus, atau sentuhan.
Mengapa
Perangkat menawarkan berbagai metode input, dan pengguna harus dapat beralih di antara metode tersebut dengan lancar saat menggunakan aplikasi Anda. Yang juga penting, metode input tidak boleh bergantung pada ukuran layar, yang berarti bahwa area pandang yang besar harus mendukung area sentuh dan area pandang yang kecil harus mendukung keyboard serta mouse. Sebisa mungkin, pastikan bahwa aplikasi dan semua fiturnya mendukung penggunaan metode input apa pun yang mungkin dipilih pengguna. Jika sesuai, tingkatkan pengalaman untuk mengizinkan kontrol khusus input juga (seperti tarik untuk memuat ulang).
Bagaimana
Pointer Events API menyediakan antarmuka terpadu untuk bekerja dengan berbagai opsi input, dan sangat cocok untuk menambahkan dukungan stilus. Untuk mendukung sentuhan dan keyboard, pastikan Anda menggunakan elemen semantik yang benar (anchor, tombol, kontrol formulir, dll.) dan tidak membangunnya kembali dengan HTML non-semantik. Saat menyertakan interaksi yang diaktifkan saat mengarahkan kursor, pastikan interaksi tersebut juga dapat diaktifkan saat diklik atau diketuk.
Saat meminta izin untuk menggunakan API yang canggih, berikan konteks dan minta hanya jika API diperlukan.
Mengapa
API yang memicu permintaan izin, seperti notifikasi, geolokasi, dan kredensial, sengaja dirancang untuk mengganggu pengguna karena cenderung terkait dengan fitur canggih yang memerlukan keikutsertaan. Memicu perintah ini tanpa konteks tambahan, seperti saat pemuatan halaman, pengguna cenderung tidak menyetujui izin tersebut dan cenderung tidak memercayainya pada masa mendatang. Sebaliknya, picu perintah tersebut hanya setelah memberikan alasan kontekstual kepada pengguna tentang alasan Anda memerlukan izin tersebut.
Bagaimana
Artikel Permission UX dan The Right Ways to Ask Users for Permissions dari UX Planet adalah referensi yang bagus untuk memahami cara mendesain dialog izin yang, meskipun berfokus pada perangkat seluler, berlaku untuk semua PWA.
Menjaga codebase tetap sehat akan mempermudah Anda mencapai sasaran dan menghadirkan fitur baru.
Mengapa
Ada banyak hal yang harus dilakukan untuk membuat aplikasi web modern. Menjaga aplikasi Anda tetap terbaru dan codebase Anda tetap sehat akan mempermudah Anda untuk menghadirkan fitur baru yang memenuhi sasaran lain yang diuraikan dalam checklist ini.
Bagaimana
Ada sejumlah pemeriksaan prioritas tinggi untuk memastikan codebase yang sehat:
- Hindari penggunaan library yang memiliki kerentanan umum.
- Pastikan Anda tidak menggunakan API yang tidak digunakan lagi.
- Hapus praktik coding yang tidak aman dari codebase Anda (seperti menggunakan
document.write()atau memiliki pemroses peristiwa scroll non-pasif), - Anda bahkan dapat membuat kode secara defensif untuk memastikan PWA tidak rusak jika analisis atau library pihak ketiga lainnya gagal dimuat.
- Pertimbangkan untuk mewajibkan analisis kode statis, seperti analisis lint, serta pengujian otomatis di beberapa browser dan saluran rilis. Teknik ini dapat membantu menemukan error sebelum diterapkan dalam produksi.