Progressive Web Apps (PWA) dibangun dan ditingkatkan dengan API modern untuk memberikan kemampuan, keandalan, dan kemudahan penginstalan yang lebih baik sekaligus menjangkau siapa saja, di mana saja, di perangkat apa pun dengan satu codebase. Untuk membantu Anda menciptakan pengalaman terbaik, gunakan checklist dan rekomendasi inti dan optimal sebagai panduan.
Checklist Progressive Web App inti
Daftar Periksa Progressive Web App menjelaskan apa yang membuat aplikasi dapat diinstal dan dapat digunakan oleh semua pengguna, terlepas dari ukuran atau jenis input.
Mulai cepat, bekerja tetap cepat
Performa memainkan peran penting dalam keberhasilan pengalaman online apa pun, karena situs berperforma tinggi memiliki engagement dan retensi pengguna yang lebih baik daripada situs berperforma buruk. Berfokuslah untuk mengoptimalkan metrik performa yang berfokus pada pengguna.
Mengapa
Kecepatan sangat penting untuk membuat 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, seperti
mengklik tombol, terdaftar atau tidak. Scrolling dan animasi harus terasa lancar. Performa memengaruhi seluruh pengalaman Anda, baik dalam perilaku aplikasi Anda maupun persepsi pengguna terhadapnya.
Meskipun semua aplikasi memiliki kebutuhan yang berbeda, audit performa di Lighthouse didasarkan pada Data Web Inti, dan skor tinggi dalam audit tersebut akan membuat pengguna Anda lebih mungkin mendapatkan pengalaman yang menyenangkan. Anda juga dapat menggunakan PageSpeed Insights atau Laporan Pengalaman Pengguna Chrome untuk mendapatkan data performa dunia nyata untuk aplikasi web Anda.
Bagaimana
Ikuti panduan kami tentang waktu pemuatan cepat untuk mempelajari cara membuat PWA Anda dimulai dengan cepat dan tetap cepat.
Berfungsi di browser apa pun
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 artinya aplikasi ini harus berfungsi di berbagai browser.
Cara yang efektif untuk melakukannya adalah dengan, menurut Jeremy Keith dalam Resilient Web Design, mengidentifikasi fitur inti, membuat fitur tersebut tersedia menggunakan teknologi sesederhana mungkin, lalu meningkatkan pengalaman jika memungkinkan. Dalam banyak kasus, ini berarti memulai hanya dengan HTML untuk membuat fitur inti, dan meningkatkan pengalaman pengguna dengan CSS dan JavaScript untuk menciptakan pengalaman yang lebih menarik.
Misalnya, pengiriman formulir. Cara paling sederhana untuk menerapkan hal tersebut adalah dengan menggunakan formulir
HTML yang mengirimkan permintaan POST. Setelah membuatnya, Anda dapat meningkatkan kualitas pengalaman dengan JavaScript untuk melakukan validasi formulir dan mengirimkan formulir melalui AJAX, sehingga meningkatkan kualitas pengalaman bagi pengguna yang dapat mendukungnya.
Pengguna Anda mengakses situs Anda di berbagai perangkat dan browser. Anda tidak dapat hanya menargetkan ujung atas spektrum tersebut. Gunakan deteksi fitur untuk memberikan pengalaman yang dapat digunakan bagi sebanyak mungkin 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
- Understanding Progressive Enhancement dari A List Apart adalah pengantar yang baik untuk topik ini.
- Progressive Enhancement: What It Is, And How To Use It? dari Smashing Magazine memberikan pengantar praktis dan link ke topik yang lebih mendalam.
- Artikel Menerapkan deteksi fitur di MDN membahas cara mendeteksi fitur dengan langsung membuat kueri.
Responsif terhadap ukuran layar apa pun
Pengguna dapat menggunakan PWA Anda di semua ukuran layar, dan semua kontennya tersedia di semua ukuran area tampilan.
Mengapa
Perangkat hadir dalam berbagai ukuran, dan pengguna dapat menggunakan aplikasi Anda dalam berbagai ukuran, bahkan di perangkat yang sama. Oleh karena itu, sangat penting untuk memastikan bahwa konten Anda sesuai dengan area tampilan, dan semua fitur serta konten situs Anda dapat digunakan di semua ukuran area tampilan.
Tugas yang ingin diselesaikan pengguna dan konten yang ingin diakses tidak berubah dengan ukuran area pandang. Anda dapat mengatur ulang konten untuk berbagai ukuran area tampilan, dan semuanya akan ada di sana, dengan satu atau lain cara. Faktanya, seperti yang dinyatakan Luke Wroblewski dalam bukunya Mobile First, memulai dengan ukuran kecil dan menyesuaikan desain untuk layar yang lebih besar dapat meningkatkan kualitas desain situs:
"Perangkat seluler mengharuskan tim pengembangan software untuk berfokus hanya pada data dan tindakan yang paling penting dalam aplikasi. Layar berukuran 320 x 480 piksel tidak memiliki ruang untuk elemen yang tidak relevan dan tidak perlu. Anda harus memprioritaskan."
Bagaimana
Ada banyak referensi tentang desain responsif, termasuk: artikel asli oleh Ethan Marcotte dan kumpulan konsep penting yang terkait dengannya, serta banyak buku dan diskusi.
Untuk mempersempit diskusi ini ke aspek konten desain responsif, lihat:
- Desain yang mengutamakan konten
- Tata letak responsif yang mengutamakan konten.
- Tujuh Mitos Seluler yang Mematikan, yang sama relevannya dengan tampilan situs responsif berukuran kecil seperti semua seluler.
Menyediakan halaman offline kustom
Saat pengguna offline, mempertahankan mereka di PWA Anda memberikan pengalaman yang lebih lancar daripada kembali ke halaman offline browser default.
Mengapa
Pengguna berharap aplikasi terinstal berfungsi terlepas dari status koneksi mereka. Aplikasi khusus platform tidak pernah menampilkan halaman kosong saat offline, dan PWA tidak boleh menampilkan halaman offline default browser. Menyediakan 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 pra-cache halaman offline kustom untuk ditampilkan saat pengguna offline. Baca artikel
Membuat halaman pengganti offline untuk mempelajari cara
menerapkannya sendiri. Chrome akan terus menampilkan
halaman offline dasar jika tidak ada
yang disediakan.
Dapat diinstal
Pengguna yang menginstal atau menambahkan aplikasi ke perangkat mereka cenderung berinteraksi dengan aplikasi tersebut lebih sering.
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 dalam daftar tugas, seperti aplikasi lainnya.
Seperti aplikasi khusus perangkat, pengguna yang menginstal aplikasi Anda adalah audiens yang paling berinteraksi, dan sering kali memiliki metrik engagement yang setara dengan pengguna aplikasi di perangkat seluler. Metrik ini mencakup lebih banyak kunjungan berulang, waktu yang lebih lama di situs Anda, dan rasio konversi yang lebih tinggi daripada pengunjung biasa.
Bagaimana
Ikuti panduan yang 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 daftar periksa inti. Checklist PWA yang optimal adalah tentang membuat PWA Anda terasa seperti bagian dari perangkat tempat PWA berjalan sekaligus memanfaatkan keunggulan web.
Menyediakan pengalaman offline
Jika konektivitas tidak benar-benar diperlukan, aplikasi Anda akan berfungsi sama baik saat offline maupun 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 podcast harus mengizinkan pemutaran offline. Aplikasi media sosial dan berita harus menyimpan dalam cache konten terbaru sehingga pengguna dapat membacanya secara offline. Pengguna juga berharap untuk tetap diautentikasi saat offline, jadi desain untuk autentikasi offline.
PWA offline memberikan pengalaman seperti aplikasi yang sebenarnya bagi pengguna.
Bagaimana
Setelah menentukan fitur mana yang diharapkan pengguna Anda berfungsi secara offline, Anda perlu membuat konten Anda 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 lagi. Anda dapat menggunakan pekerja layanan untuk menyimpan jenis konten lain, seperti gambar, file video, dan file audio, untuk penggunaan offline, dan untuk menerapkan sesi yang aman dan berdurasi panjang agar pengguna tetap diautentikasi.
Dari perspektif pengalaman pengguna, Anda dapat menggunakan layar kerangka yang memberikan persepsi kecepatan dan konten kepada pengguna saat memuat yang kemudian dapat melakukan penggantian ke konten yang di-cache atau indikator offline sesuai kebutuhan.
Dapat diakses sepenuhnya
Semua interaksi pengguna lulus standar internasional Web Content Accessibility Guidelines (WCAG) terbaru.
Mengapa
Sebagian besar pengguna, pada suatu titik dalam hidup mereka, ingin menggunakan PWA Anda dengan cara yang tercakup dalam WCAG. Kemampuan manusia untuk berinteraksi dengan dan memahami PWA Anda ada dalam spektrum, dan kebutuhan dapat bersifat sementara atau permanen. Dengan membuat PWA Anda dapat diakses, Anda membuatnya dapat digunakan oleh semua orang.
Bagaimana
Pengantar Aksesibilitas Web W3C adalah tempat yang tepat untuk memulai. Sebagian besar pengujian aksesibilitas harus dilakukan secara manual. Audit aksesibilitas di Lighthouse, axe, dan Accessibility Insights dapat membantu Anda mengotomatiskan beberapa pengujian aksesibilitas. Anda juga harus menggunakan elemen yang benar secara semantik, bukan membuat ulang elemen tersebut sendiri, seperti elemen <a> dan <button>. Hal ini memastikan bahwa saat Anda perlu membuat fitur yang lebih canggih, ekspektasi aksesibilitas terpenuhi, seperti kapan harus menggunakan panah versus tab.
Kartu Nutrisi A11Y memiliki saran yang sangat baik tentang hal ini untuk beberapa komponen umum.
Dapat ditemukan di penelusuran
PWA Anda dapat dengan mudah ditemukan melalui penelusuran.
Mengapa
Salah satu keunggulan terbesar web adalah kemampuan untuk menemukan situs dan aplikasi melalui penelusuran. Faktanya, lebih dari setengah dari semua traffic situs berasal dari penelusuran organik. Memastikan URL kanonis ada untuk konten dan mesin telusur dapat mengindeks situs Anda sangat penting 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 dan deskripsi meta yang unik dan deskriptif. Kemudian, Anda dapat menggunakan Google Search Console dan audit Pengoptimalan Mesin Telusur di Lighthouse untuk men-debug dan memperbaiki masalah penemuan dengan PWA Anda.
Anda juga dapat menggunakan alat pemilik situs Bing atau Yandex, dan mempertimbangkan untuk menyertakan data terstruktur menggunakan skema dari Schema.org di PWA Anda.
Berfungsi dengan jenis input apa pun
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 sama pentingnya, metode input tidak boleh bergantung pada ukuran layar, yang berarti area pandang besar harus mendukung sentuhan dan area pandang kecil harus mendukung keyboard dan mouse. Sebaik mungkin, pastikan aplikasi Anda dan semua fiturnya mendukung penggunaan metode input apa pun yang mungkin dipilih pengguna Anda. Jika sesuai, tingkatkan kualitas pengalaman untuk memungkinkan kontrol khusus input juga (seperti tarik untuk memperbarui).
Bagaimana
Pointer Events API menyediakan antarmuka terpadu untuk menangani berbagai opsi input, dan sangat cocok untuk menambahkan dukungan stylus. Untuk mendukung sentuhan dan keyboard, pastikan Anda menggunakan elemen semantik yang benar (link, tombol, kontrol formulir, dll.) dan tidak membangunnya kembali dengan HTML non-semantik. Saat menyertakan interaksi yang diaktifkan saat kursor mouse diarahkan ke elemen, pastikan interaksi tersebut juga dapat diaktifkan saat diklik atau diketuk.
Memberikan konteks untuk permintaan izin
Saat meminta izin untuk menggunakan API yang canggih, berikan konteks dan minta hanya jika API diperlukan.
Mengapa
API yang memicu dialog izin, seperti notifikasi, geolokasi, dan kredensial, sengaja didesain untuk mengganggu pengguna karena cenderung terkait dengan fitur canggih yang memerlukan keikutsertaan. Memicu permintaan ini tanpa konteks tambahan, seperti saat halaman dimuat, membuat pengguna cenderung tidak menerima izin tersebut dan cenderung tidak mempercayainya di masa mendatang.
Sebagai gantinya, picu dialog tersebut hanya setelah memberikan alasan dalam konteks kepada pengguna tentang alasan Anda memerlukan izin tersebut.
Bagaimana
Artikel UX Izin dan Cara yang Tepat untuk Meminta Izin Pengguna di UX Planet adalah referensi yang baik untuk memahami cara mendesain dialog izin yang, meskipun berfokus pada perangkat seluler, berlaku untuk semua PWA.
Mengikuti praktik terbaik untuk kode yang sehat
Menjaga kesehatan codebase akan mempermudah Anda mencapai sasaran dan menghadirkan fitur baru.
Mengapa
Ada banyak hal yang harus dilakukan untuk membangun aplikasi web modern. Dengan menjaga aplikasi Anda tetap terbaru dan codebase Anda tetap sehat, Anda akan lebih mudah menghadirkan fitur baru yang memenuhi sasaran lain yang tercantum dalam checklist ini.
Bagaimana
Ada sejumlah pemeriksaan prioritas tinggi untuk memastikan codebase yang sehat:
- Hindari penggunaan library dengan kerentanan yang diketahui.
- Pastikan Anda tidak menggunakan API yang sudah tidak digunakan lagi.
- Hapus praktik coding yang tidak aman dari codebase Anda, seperti
document.write()atau memiliki pemroses peristiwa scroll non-pasif. - Anda bahkan dapat membuat kode secara defensif untuk memastikan PWA Anda tidak rusak jika analytics atau library pihak ketiga lainnya gagal dimuat.
- Pertimbangkan untuk mewajibkan analisis kode statis, seperti linting, serta pengujian otomatis di beberapa browser dan saluran rilis. Teknik ini dapat membantu menemukan error sebelum masuk ke produksi.