Apa yang membuat Progressive Web App yang bagus?

Pete LePage
Sam Richard

Progressive Web App (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 saja dengan satu codebase. Untuk membantu Anda menciptakan pengalaman terbaik, gunakan checklist dan rekomendasi inti dan optimal sebagai panduan Anda.

Checklist Progressive Web App Inti

Checklist Progressive Web App menjelaskan faktor yang membuat aplikasi dapat diinstal dan dapat digunakan oleh semua pengguna, terlepas dari ukuran atau jenis inputnya.

Mulai cepat, bekerja tetap cepat

Performa memainkan peran penting dalam keberhasilan pengalaman online apa pun, karena situs berperforma tinggi berinteraksi dan mempertahankan pengguna dengan lebih baik daripada situs yang berperforma buruk. Situs harus berfokus pada pengoptimalan untuk metrik performa yang berfokus pada pengguna.

Mengapa

Kecepatan sangat penting untuk membuat pengguna menggunakan aplikasi Anda. Faktanya, seiring waktu muat halaman berubah dari satu detik menjadi sepuluh detik, probabilitas pengguna terpantul meningkat sebesar 123%. Performa tidak berhenti dengan peristiwa load. Pengguna seharusnya tidak bertanya-tanya apakah interaksi mereka—misalnya, mengklik tombol—telah terdaftar atau tidak. Scroll dan animasi akan terasa halus. Performa memengaruhi seluruh pengalaman Anda, mulai dari persepsi pengguna terhadap aplikasi Anda hingga performa aplikasi yang sebenarnya.

Meskipun semua aplikasi memiliki kebutuhan yang berbeda-beda, audit performa di Lighthouse didasarkan pada Data Web Inti, dan skor yang tinggi pada audit tersebut akan meningkatkan kemungkinan pengguna untuk 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 waktu pemuatan cepat kami untuk mempelajari cara membuat PWA Anda dimulai dengan cepat dan tetap cepat.

Berfungsi di semua browser

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 harus berfungsi di seluruh browser, bukan hanya di salah satunya.

Cara yang efektif untuk melakukannya adalah, menurut kata-kata Jeremy Keith dalam Desain Web yang Tangguh, mengidentifikasi fungsi inti, menyediakan fungsi tersebut menggunakan teknologi yang sesederhana mungkin, lalu meningkatkan pengalaman jika memungkinkan. Dalam banyak kasus, hal ini berarti memulai dengan HTML saja untuk membuat fungsi inti, dan meningkatkan 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 membuatnya, Anda dapat meningkatkan pengalaman dengan JavaScript untuk melakukan validasi formulir dan mengirimkan formulir menggunakan JavaScript, sehingga meningkatkan pengalaman bagi pengguna yang dapat mendukungnya.

Pertimbangkan bahwa pengguna akan merasakan pengalaman menggunakan situs Anda di berbagai perangkat dan browser. Anda tidak dapat menargetkan ujung atas spektrum. Dengan menggunakan deteksi fitur, Anda dapat memberikan pengalaman yang dapat digunakan kepada berbagai calon pengguna, termasuk mereka yang menggunakan browser dan perangkat yang mungkin belum ada saat ini.

Bagaimana

Resilient Web Design Jeremy Keith adalah referensi sangat baik yang menjelaskan cara mempertimbangkan desain web dalam metodologi progresif lintas browser ini.

Bacaan tambahan

Responsif terhadap semua ukuran layar

Pengguna dapat menggunakan PWA Anda di semua ukuran layar dan semua konten tersedia di semua ukuran area pandang.

Mengapa

Perangkat hadir dalam berbagai ukuran, dan pengguna dapat menggunakan aplikasi Anda di berbagai ukuran, bahkan pada perangkat yang sama. Oleh karena itu, sangat penting untuk memastikan konten Anda tidak hanya pas dalam area tampilan, tetapi juga semua fitur dan konten untuk situs Anda dapat digunakan di semua ukuran area tampilan.

Tugas yang ingin diselesaikan pengguna dan konten yang ingin mereka akses tidak berubah sesuai ukuran area tampilan. Konten dapat diatur ulang pada ukuran area pandang yang berbeda, dan semuanya harus ada di sana, bagaimanapun caranya. Sebenarnya, seperti yang dinyatakan Luke Wroblewski dalam bukunya, Mobile First, memulai dari yang kecil dan besar, bukannya sebaliknya, sebenarnya dapat meningkatkan desain situs:

Perangkat seluler mengharuskan tim pengembangan software untuk berfokus hanya pada data dan tindakan paling penting dalam aplikasi. Tidak ada ruang di layar 320 x 480 piksel untuk elemen yang tidak relevan dan tidak perlu. Anda harus membuat prioritas.

Bagaimana

Ada banyak referensi tentang desain responsif, termasuk artikel asli oleh Ethan Marcotte, koleksi konsep penting yang terkait dengannya, serta berbagai buku dan diskusi. Untuk mempersempit diskusi ini ke aspek konten desain responsif, Anda dapat mempelajari desain yang mengutamakan konten dan tata letak responsif konten-out. Terakhir, meskipun berfokus pada seluler, pelajaran dalam Seven Deadly Mobile Myths oleh Josh Clark sama relevannya dengan tampilan situs responsif berukuran kecil seperti halnya pada seluler.

Menyediakan halaman offline kustom

Saat pengguna offline, membiarkan mereka tetap berada di PWA Anda akan memberikan pengalaman yang lebih lancar daripada kembali ke halaman offline browser default.

Mengapa

Pengguna berharap aplikasi terinstal berfungsi, apa pun status koneksinya. Aplikasi khusus platform tidak pernah menampilkan halaman kosong saat offline, dan Progressive Web App 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, membantu pengalaman web Anda terasa seperti bagian dari perangkat yang menjalankannya.

Bagaimana

Selama peristiwa install pekerja layanan, Anda dapat melakukan pra-cache halaman offline kustom untuk digunakan nanti. Jika pengguna offline, Anda dapat merespons dengan halaman offline kustom yang telah di-pracache. Anda dapat mengikuti contoh halaman offline kustom untuk melihat contoh penerapannya dan mempelajari cara menerapkannya sendiri.

Dapat diinstal

Pengguna yang menginstal atau menambahkan aplikasi ke perangkat cenderung lebih sering berinteraksi dengan aplikasi tersebut.

Mengapa

Menginstal Progressive Web App memungkinkan aplikasi ini terlihat, bernuansa, dan berperilaku seperti aplikasi terinstal lainnya. Aplikasi diluncurkan dari tempat yang sama saat pengguna meluncurkan aplikasi mereka yang lain. Aplikasi berjalan di jendela aplikasinya sendiri, terpisah dari browser, dan muncul dalam daftar tugas, seperti aplikasi lain.

Mengapa Anda ingin pengguna menginstal PWA Anda? Alasan yang sama seperti Anda ingin pengguna menginstal aplikasi dari app store. Pengguna yang menginstal aplikasi Anda adalah audiens yang paling aktif berinteraksi, dan memiliki metrik engagement yang lebih baik daripada pengunjung biasa, sering kali 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.

Bagaimana

Anda dapat mengikuti panduan yang dapat diinstal untuk mempelajari cara membuat PWA dapat diinstal, cara menguji PWA untuk dapat diinstal, dan mencoba melakukannya sendiri.

Checklist Progressive Web App yang Optimal

Untuk membuat Progressive Web App yang hebat dan terasa seperti aplikasi terbaik di kelasnya, Anda perlu lebih dari sekadar checklist inti. Checklist Progressive Web App yang optimal adalah membuat PWA Anda terasa seperti bagian dari perangkat yang dijalankannya sekaligus memanfaatkan keunggulan web tersebut.

Memberikan pengalaman offline

Jika konektivitas tidak mutlak diperlukan, aplikasi Anda berfungsi secara offline seperti saat online.

Mengapa

Selain menyediakan halaman offline kustom, pengguna berharap Progressive Web Apps 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 memungkinkan pemutaran offline. Aplikasi sosial dan berita harus meng-cache konten terbaru sehingga pengguna dapat membacanya saat offline. Pengguna juga berharap untuk tetap diautentikasi saat offline, jadi buat desain untuk autentikasi offline. PWA offline memberikan pengalaman yang benar-benar seperti aplikasi bagi pengguna.

Bagaimana

Setelah menentukan fitur yang ingin digunakan oleh pengguna untuk digunakan secara offline, Anda harus menyediakan konten dan dapat disesuaikan dengan konteks offline. Selain itu, Anda dapat menggunakan IndexedDB, sistem penyimpanan NoSQL dalam browser untuk menyimpan dan mengambil data, serta sinkronisasi latar belakang untuk memungkinkan pengguna mengambil tindakan saat offline dan menunda komunikasi server hingga pengguna memiliki koneksi yang stabil. Anda juga dapat menggunakan pekerja layanan untuk menyimpan jenis konten lain, seperti gambar, file video, dan file audio untuk penggunaan offline. Dari perspektif pengalaman pengguna, Anda dapat menggunakan layar kerangka yang memberi pengguna persepsi tentang kecepatan dan konten saat memuat, yang kemudian dapat kembali ke konten yang disimpan dalam cache atau indikator offline sesuai kebutuhan.

Dapat diakses sepenuhnya

Semua interaksi pengguna memenuhi persyaratan aksesibilitas WCAG 2.0.

Mengapa

Sebagian besar orang pada suatu saat dalam hidup mereka ingin memanfaatkan PWA Anda dengan cara yang tercakup dalam persyaratan aksesibilitas WCAG 2.0. Kemampuan manusia untuk berinteraksi dan memahami PWA Anda ada di suatu spektrum dan kebutuhannya dapat bersifat sementara atau permanen. Dengan membuat PWA dapat diakses, Anda memastikannya dapat digunakan oleh semua orang.

Bagaimana

Pengantar Aksesibilitas Web dari W3C adalah tempat yang tepat 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 fungsi yang lebih canggih, ekspektasi yang dapat diakses 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 ditemukan melalui penelusuran.

Mengapa

Salah satu keuntungan terbesar dari web adalah kemampuan untuk menemukan situs dan aplikasi melalui penelusuran. Bahkan, lebih dari setengah traffic situs berasal dari penelusuran organik. Pastikan ada URL kanonis untuk konten dan bahwa mesin telusur dapat mengindeks situs Anda. Hal ini sangat penting agar pengguna dapat menemukan PWA Anda. Hal ini berlaku terutama 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 Pengoptimalan Mesin Telusur di Lighthouse untuk membantu Anda men-debug dan memperbaiki masalah visibilitas pada PWA. Anda juga dapat menggunakan alat webmaster Bing atau Yandex, dan mempertimbangkan untuk menyertakan data terstruktur menggunakan skema dari Schema.org di PWA.

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 dengan lancar saat menggunakan aplikasi Anda. Sama pentingnya, metode input tidak boleh bergantung pada ukuran layar, yang berarti area pandang yang besar perlu mendukung sentuhan dan area pandang yang kecil harus mendukung keyboard dan mouse. Sejauh kemampuan Anda, pastikan aplikasi Anda dan semua fiturnya mendukung penggunaan setiap metode input yang dapat dipilih pengguna. Jika memungkinkan, Anda juga harus meningkatkan pengalaman untuk memungkinkan kontrol khusus input juga (seperti pull-to-refresh).

Bagaimana

Pointer Events API menyediakan antarmuka terpadu untuk bekerja dengan berbagai opsi input, dan sangat bagus untuk menambahkan dukungan stilus. Untuk mendukung sentuhan dan keyboard, pastikan Anda menggunakan elemen semantik yang benar (anchor, tombol, kontrol formulir, dll.) dan tidak membangun ulang elemen tersebut dengan HTML non-semantik (yang baik untuk aksesibilitas). Saat menyertakan interaksi yang aktif saat kursor diarahkan, pastikan interaksi juga dapat diaktifkan saat diklik atau diketuk.

Menyediakan konteks untuk permintaan izin

Saat meminta izin untuk menggunakan API yang canggih, berikan konteks dan hanya minta saat API diperlukan.

Mengapa

API yang memicu permintaan izin, seperti notifikasi, geolokasi, dan kredensial, sengaja didesain untuk mengganggu pengguna karena cenderung terkait dengan fungsi canggih yang memerlukan keikutsertaan. Memicu perintah ini tanpa konteks tambahan, seperti saat pemuatan halaman, akan mengurangi kemungkinan pengguna menerima izin tersebut dan cenderung tidak memercayainya di masa mendatang. Sebagai gantinya, hanya picu perintah tersebut setelah memberikan alasan dalam konteks kepada pengguna terkait alasan Anda memerlukan izin tersebut.

Bagaimana

Artikel Izin UX dan Cara Tepat untuk Meminta Izin Pengguna dari 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 codebase agar tetap sehat akan mempermudah Anda mencapai sasaran dan memberikan fitur baru.

Mengapa

Ada banyak hal yang diperlukan dalam membangun aplikasi web modern. Menjaga aplikasi Anda selalu yang terbaru dan codebase yang sehat akan memudahkan Anda mengirimkan fitur baru yang memenuhi sasaran lain yang diuraikan dalam checklist ini.

Bagaimana

Ada sejumlah pemeriksaan prioritas tinggi untuk memastikan codebase yang sehat: menghindari penggunaan library dengan kerentanan yang diketahui, memastikan Anda tidak menggunakan API yang tidak digunakan lagi, menghapus antipola web dari codebase Anda (seperti menggunakan document.write() atau memiliki pemroses peristiwa scroll non-pasif), dan bahkan melakukan coding secara defensif untuk memastikan PWA Anda 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-teknik ini dapat membantu mendeteksi kesalahan sebelum masuk ke proses produksi.