Apa yang membuat Progressive Web App yang bagus?

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. Fokuskan 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 lancar. Performa memengaruhi seluruh pengalaman Anda, baik dalam perilaku aplikasi maupun persepsi pengguna terhadapnya.

Meskipun semua aplikasi memiliki kebutuhan yang berbeda, audit performa di Lighthouse didasarkan pada Data Web Inti, dan skor yang tinggi pada audit tersebut akan membuat pengguna Anda lebih cenderung mendapatkan pengalaman yang menyenangkan. Anda juga dapat menggunakan PageSpeed Insights atau Laporan Pengalaman Pengguna Chrome untuk mendapatkan data performa di dunia nyata untuk aplikasi web Anda.

Bagaimana

Ikuti panduan kami 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 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 termudah untuk menerapkannya adalah dengan formulir HTML yang mengirimkan permintaan POST. Setelah membangunnya, Anda dapat meningkatkan pengalaman dengan JavaScript untuk melakukan validasi formulir dan mengirimkan formulir melalui AJAX, sehingga meningkatkan pengalaman bagi pengguna yang dapat mendukungnya.

Pengguna Anda menggunakan 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

• 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 lanjutan.
• Artikel Mengimplementasikan deteksi fitur MDN membahas cara mendeteksi fitur dengan membuat kueri 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 dengan ukuran area pandang. Anda dapat mengatur ulang konten untuk berbagai ukuran area pandang, dan semuanya akan ada, 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. Layar dengan ukuran 320x480 piksel tidak memiliki ruang untuk elemen tambahan yang tidak diperlukan. Anda harus memprioritaskan.

Bagaimana

Ada banyak referensi tentang desain responsif, termasuk artikel asli oleh Ethan Marcotte, 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 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 mengharapkan aplikasi terinstal berfungsi terlepas dari status koneksinya. 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 pra-cache 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 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 penginstalan kami untuk mempelajari cara membuat PWA Anda dapat diinstal.

Jika konektivitas tidak benar-benar diperlukan, aplikasi Anda akan berfungsi sama saat offline seperti saat 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 siap tersedia saat offline. Aplikasi musik, video, dan podcast harus mengizinkan pemutaran offline. Aplikasi sosial dan berita harus meng-cache konten terbaru agar pengguna dapat membacanya secara offline. Pengguna juga ingin tetap diautentikasi saat offline, jadi desain untuk autentikasi offline. PWA offline memberikan pengalaman seperti aplikasi yang sebenarnya bagi pengguna.

Bagaimana

Setelah menentukan fitur yang diharapkan pengguna untuk berfungsi secara offline, Anda harus menyediakan konten dan menyesuaikannya dengan konteks offline. 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 lagi. 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 memberi pengguna persepsi tentang kecepatan dan konten saat memuat, yang kemudian dapat kembali ke konten yang di-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 dengan dan memahami PWA Anda berada dalam spektrum, dan kebutuhan 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, 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, misalnya, elemen a dan button. Hal ini memastikan bahwa saat Anda perlu mem-build fitur lanjutan, 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.

PWA Anda dapat dengan mudah ditemukan melalui penelusuran.

Mengapa

Salah satu keunggulan terbesar 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 setiap URL memiliki judul dan deskripsi meta yang unik dan deskriptif. 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 Bing atau Yandex, dan pertimbangkan 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 tidak kurang penting, metode input tidak boleh bergantung pada ukuran layar, yang berarti bahwa area pandang besar harus mendukung sentuh dan area pandang kecil harus mendukung keyboard dan 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 menggunakan 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 mem-build ulang 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, membuat pengguna cenderung tidak menerima izin tersebut dan lebih cenderung tidak memercayainya di masa mendatang. Sebagai gantinya, picu perintah tersebut hanya setelah memberikan alasan dalam konteks kepada pengguna tentang alasan Anda memerlukan izin tersebut.

Bagaimana

Artikel UX Izin dan artikel UX Planet Cara yang Tepat untuk Meminta Izin kepada Pengguna adalah referensi yang bagus untuk memahami cara mendesain perintah 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 dengan 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 Anda tidak rusak jika analisis 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 mendeteksi error sebelum masuk ke produksi.