Apa yang membuat Progressive Web App yang bagus?

Performa berperan penting dalam keberhasilan pengalaman online apa pun, karena situs berperforma tinggi menarik dan mempertahankan pengguna dengan lebih baik daripada situs yang berperforma buruk. Sites harus berfokus pada pengoptimalan metrik performa yang berfokus pada pengguna.

Mengapa

Kecepatan sangat penting untuk membuat pengguna menggunakan aplikasi Anda. Bahkan, seiring waktu muat halaman berubah dari satu detik menjadi sepuluh detik, kemungkinan pengguna terpantul meningkat sebesar 123%. Performa tidak berhenti dengan peristiwa load. Pengguna seharusnya tidak bertanya-tanya apakah interaksi mereka—misalnya, mengklik tombol—sudah 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 tinggi pada audit tersebut akan meningkatkan kemungkinan pengguna 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 yang cepat kami 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 artinya 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 pengalamannya jika memungkinkan. Dalam banyak kasus, 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 melalui AJAX, sehingga meningkatkan pengalaman bagi pengguna yang dapat mendukungnya.

Pertimbangkan bahwa pengguna akan menikmati situs Anda di berbagai perangkat dan browser. Anda tidak bisa begitu saja menargetkan ujung atas spektrum. Dengan menggunakan deteksi fitur, Anda akan dapat memberikan pengalaman yang bisa 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 bagus yang menjelaskan cara mempertimbangkan desain web dalam metodologi progresif lintas browser ini.

Bacaan tambahan

• Memahami Peningkatan Progresif dari Daftar Apart adalah pengantar yang bagus untuk topik ini.
• Peningkatan Progresif: Apa itu, dan Bagaimana Cara Menggunakannya? dari Smashing Magazine memberikan pengantar praktis dan tautan ke topik yang lebih lanjut.
• MDN memiliki artikel berjudul Menerapkan deteksi fitur yang membahas cara mendeteksi fitur dengan membuat kuerinya secara langsung.

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

Mengapa

Perangkat hadir dalam berbagai ukuran, dan pengguna dapat menggunakan aplikasi Anda pada 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 berbagai ukuran area pandang, dan semuanya harus ada di sana, dengan cara apa pun. Bahkan, seperti yang dinyatakan Luke Wroblewski dalam bukunya Mobile First, memulai dari kecil dan besar, bukannya sebaliknya, sebenarnya dapat meningkatkan kualitas desain suatu situs:

> Perangkat seluler mengharuskan tim pengembangan software untuk hanya berfokus pada > data dan tindakan yang paling penting dalam aplikasi. Tidak ada ruang > pada 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 perangkat seluler, pelajaran dalam Seven Deadly Mobile Myths oleh Josh Clark sama relevannya dengan tampilan situs responsif berukuran kecil seperti halnya pada perangkat seluler.

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, akan 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-precache. Anda dapat mengikuti contoh halaman offline kustom kami untuk melihat contoh penerapannya dan mempelajari cara menerapkannya sendiri.

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

Mengapa

Menginstal Progressive Web App memungkinkan aplikasi ini terlihat, bernuansa, dan berperilaku seperti semua aplikasi terinstal lainnya. Aplikasi diluncurkan dari tempat yang sama saat pengguna meluncurkan aplikasi lainnya. Fungsi ini 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 merupakan 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 apakah PWA dapat diinstal, dan mencoba melakukannya sendiri.

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

Mengapa

Selain menyediakan halaman offline kustom, pengguna mengharapkan Progressive Web App dapat digunakan secara offline. Misalnya, aplikasi perjalanan dan maskapai penerbangan harus memiliki detail perjalanan dan boarding pass yang mudah tersedia saat offline. Aplikasi musik, video, dan podcast harus memungkinkan pemutaran offline. Aplikasi sosial dan berita harus meng-cache konten terbaru agar 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 beradaptasi 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 kembali 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, serta menggunakannya untuk menerapkan sesi yang aman dan berdurasi 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 disimpan dalam cache atau indikator offline sesuai kebutuhan.

Semua interaksi pengguna memenuhi persyaratan aksesibilitas WCAG 2.0.

Mengapa

Sebagian besar orang pada suatu tahap tertentu 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 menjadikan 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, axis, dan Accessibility Insights 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 vs. 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 traffic situs berasal dari penelusuran organik. Memastikan ada URL kanonis untuk konten dan bahwa mesin telusur dapat mengindeks situs Anda 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 melakukan debug dan memperbaiki masalah visibilitas pada PWA Anda. Anda juga dapat menggunakan alat webmaster Bing atau Yandex, dan mempertimbangkan untuk menyertakan data terstruktur melalui skema dari Schema.org di PWA.

PWA Anda dapat digunakan dengan mouse, keyboard, stilus, atau sentuhan.

Mengapa

Perangkat menawarkan berbagai metode input, dan pengguna harus dapat beralih antar-metode dengan lancar saat menggunakan aplikasi Anda. Sama pentingnya, metode input tidak boleh bergantung pada ukuran layar, yang berarti area pandang yang besar harus mendukung sentuhan, dan area pandang yang kecil harus mendukung keyboard dan mouse. Sejauh kemampuan Anda, pastikan aplikasi Anda dan semua fiturnya mendukung penggunaan metode input apa pun yang dapat dipilih pengguna. Jika memungkinkan, Anda juga harus meningkatkan pengalaman guna memungkinkan kontrol khusus input juga (seperti operasi tarik untuk 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). Ketika menyertakan interaksi yang diaktifkan saat kursor diarahkan, pastikan interaksi juga dapat diaktifkan saat diklik atau diketuk.

Saat meminta izin untuk menggunakan API yang canggih, berikan konteks dan hanya minta jika 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 untuk 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 bagus untuk memahami cara mendesain permintaan izin yang, meskipun berfokus pada seluler, berlaku untuk semua PWA.

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 terbaru dan memiliki codebase akan memudahkan Anda dalam menghadirkan fitur-fitur baru yang memenuhi sasaran lain yang ditetapkan dalam checklist ini.

Bagaimana

Ada sejumlah pemeriksaan prioritas tinggi untuk memastikan codebase yang baik: menghindari penggunaan library yang telah diketahui kerentanannya, memastikan Anda tidak menggunakan API yang tidak digunakan lagi, menghapus antipola web dari codebase (seperti menggunakan document.write() atau memiliki pemroses peristiwa scroll non-pasif), dan bahkan melakukan coding secara defensif untuk memastikan PWA Anda tidak rusak jika library analisis atau library pihak ketiga lainnya gagal dimuat. Pertimbangkan untuk mewajibkan analisis kode statis, seperti analisis lint, serta pengujian otomatis, di berbagai browser dan saluran rilis. Teknik ini dapat membantu menemukan error sebelum diterapkan ke tahap produksi.