Apa yang membuat Progressive Web App yang bagus?

Performa berperan penting dalam keberhasilan pengalaman online karena situs berperforma tinggi akan berinteraksi dan mempertahankan pengguna dengan lebih baik dibandingkan situs yang berperforma buruk. Fokus pada pengoptimalan untuk metrik performa yang berfokus pada pengguna.

Mengapa

Kecepatan sangat penting untuk membuat pengguna menggunakan aplikasi Anda. Bahkan, seiring waktu muat halaman bertambah dari satu detik menjadi sepuluh detik, kemungkinan pengguna terpantul (bouncing) akan meningkat sebesar 123%. Performa juga tidak berhenti dengan peristiwa load. Pengguna tidak perlu bertanya-tanya apakah interaksi mereka—misalnya, mengklik tombol— terdaftar atau tidak. Scroll dan animasi harus terasa halus. Performa memengaruhi seluruh pengalaman Anda, baik dari segi 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 dipilih untuk mengakses aplikasi web Anda sebelum diinstal.

Mengapa

Progressive Web App adalah aplikasi web terlebih dahulu, dan itu berarti aplikasi web harus berfungsi di seluruh browser.

Cara efektif untuk melakukannya adalah dengan, menurut Jeremy Keith dalam Desain Web yang Tangguh, mengidentifikasi fitur-fitur inti, menyediakan fitur-fitur tersebut menggunakan teknologi sesederhana mungkin, 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 bisa hanya menargetkan bagian atas spektrum itu. Gunakan deteksi fitur untuk memberikan pengalaman yang dapat digunakan oleh sebanyak mungkin calon pengguna, termasuk mereka yang menggunakan browser dan perangkat yang belum ada.

Bagaimana

Resilient Web Design karya Jeremy Keith adalah referensi luar biasa yang menjelaskan cara mendesain 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? memberikan pengantar praktis dan tautan ke topik lanjutan.
• Artikel Mengimplementasikan deteksi fitur MDN membahas cara mendeteksi fitur dengan membuat kueri langsung.

Pengguna dapat menggunakan PWA Anda di semua ukuran layar, dan semua kontennya tersedia pada 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 tidak hanya konten Anda yang pas dalam 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. Bahkan, seperti yang dinyatakan Luke Wroblewski dalam bukunya Mobile First, memulai dari hal kecil dan menyesuaikan desain untuk layar yang lebih besar dapat meningkatkan desain situs:

Perangkat seluler mengharuskan tim pengembangan software untuk berfokus hanya pada data dan tindakan terpenting 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 hingga ke aspek konten desain responsif, lihat desain yang mengutamakan konten dan tata letak responsif content-out. Terakhir, meskipun berfokus pada perangkat seluler, pelajaran dalam Seven Deadly Mobile Myths oleh Josh Clark sama relevannya dengan tampilan situs responsif dalam ukuran kecil seperti halnya untuk perangkat seluler secara umum.

Saat pengguna offline, menyimpannya di PWA 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 yang menjalankannya.

Bagaimana

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

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

Mengapa

Menginstal Progressive Web App akan membuat aplikasi terlihat, terasa, dan berperilaku seperti semua aplikasi terinstal lainnya. Layanan ini diluncurkan dari tempat yang sama dengan lokasi pengguna meluncurkan aplikasi lainnya. Aplikasi 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 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 biasa.

Bagaimana

Ikuti panduan yang dapat diinstal untuk mempelajari cara membuat PWA Anda dapat diinstal.

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

Mengapa

Selain menyediakan halaman offline kustom, pengguna mengharapkan PWA dapat digunakan saat 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 ingin tetap diautentikasi saat offline, jadi buatlah desain untuk autentikasi offline. PWA offline memberikan pengalaman seperti aplikasi yang sesungguhnya 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 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, dan untuk mengimplementasikan 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 memenuhi persyaratan aksesibilitas WCAG 2.0.

Mengapa

Sebagian besar pengguna, pada suatu waktu dalam hidup mereka, 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 kebutuhan dapat bersifat sementara atau permanen. Dengan membuat PWA Anda dapat diakses, Anda membuatnya dapat digunakan oleh semua orang.

Bagaimana

Introduction to Web Accessibility di 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 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 web adalah kemampuan untuk menemukan situs dan aplikasi melalui penelusuran. Faktanya, lebih dari setengah semua traffic situs berasal dari penelusuran organik. Memastikan bahwa URL kanonis tersedia untuk konten dan mesin telusur dapat mengindeks situs Anda adalah hal yang 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 deskriptif dan deskripsi meta yang unik. Kemudian, Anda dapat menggunakan Google Search Console dan audit Pengoptimalan Mesin Telusur di Lighthouse untuk men-debug dan memperbaiki masalah visibilitas pada 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 sama-sama dapat digunakan dengan mouse, keyboard, stilus, atau sentuhan.

Mengapa

Perangkat menawarkan berbagai metode input, dan pengguna harus dapat beralih antar-metode input 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. Supaya terbaik, pastikan aplikasi Anda dan semua fiturnya mendukung penggunaan metode input apa pun yang mungkin dipilih pengguna. Jika perlu, tingkatkan pengalaman untuk memungkinkan kontrol khusus input juga (seperti pull untuk refresh).

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 kursor diarahkan, 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 berkaitan 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 agar tetap baik akan memudahkan Anda mencapai sasaran dan menghadirkan fitur baru.

Mengapa

Ada banyak hal yang diperlukan untuk membangun aplikasi web modern. Dengan memastikan aplikasi Anda selalu terbaru dan codebase yang bagus, akan memudahkan Anda untuk memberikan 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.
• Menghapus 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.