Apa yang membuat Progressive Web App yang bagus?

Performa memainkan peran penting dalam keberhasilan pengalaman online, karena situs berperforma tinggi memiliki engagement dan retensi pengguna yang lebih baik daripada situs berperforma buruk. Fokus pada pengoptimalan untuk yang mengutamakan pengguna metrik performa.

Mengapa

Kecepatan sangat penting untuk membuat pengguna menggunakan aplikasi Anda. Faktanya, saat waktu muat laman bertambah dari satu detik menjadi sepuluh detik, kemungkinan pengguna terpantul meningkat sebesar 123%. Performa juga tidak berhenti dengan peristiwa load. Pengguna tidak akan bertanya-tanya apakah interaksi mereka—misalnya, mengeklik tombol— terdaftar atau tidak. Scroll dan animasi harus terasa halus. Performa memengaruhi keseluruhan pengalaman Anda, baik dalam cara aplikasi Anda berperilaku dan bagaimana pengguna melihatnya.

Meskipun semua aplikasi memiliki kebutuhan berbeda, audit kinerja dalam Lighthouse didasarkan pada Data Web Inti, dan mendapatkan nilai tinggi untuk audit tersebut akan membuat pengguna Anda lebih mungkin untuk 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 pelajari 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 dengan hanya 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 mengimplementasikannya adalah 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 menikmati situs Anda di berbagai spektrum perangkat dan browser. Anda tidak dapat menargetkan ujung atas spektrum tersebut. Gunakan deteksi fitur untuk memberikan pengalaman yang dapat digunakan beragam pengguna potensial, 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

• A List Apart Memahami Peningkatan Progresif adalah pengantar yang baik untuk topik ini.
• Majalah Smashing Peningkatan Progresif: Apa itu, dan Bagaimana Cara Menggunakannya? memberikan pengantar praktis dan link ke topik lanjutan.
• MDN Menerapkan deteksi fitur ini membahas cara mendeteksi fitur dengan membuat kuerinya secara 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 di berbagai ukuran, bahkan pada perangkat yang sama. Oleh karena itu, sangat penting memastikan konten tidak hanya pas dalam area pandang, tetapi 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 tampilan. Anda dapat mengatur ulang konten untuk berbagai ukuran area pandang, dan semuanya akan ada, dengan cara apa pun. Bahkan, seperti yang dinyatakan Luke Wroblewski dalam bukunya Mobile First, memulai dari yang kecil dan menyesuaikan desain Anda 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 320x480 piksel tidak memiliki ruang untuk elemen tambahan yang tidak diperlukan. Anda harus memprioritaskan.

Bagaimana

Ada banyak sumber daya tentang desain responsif, termasuk asli artikel oleh Ethan Marcotte, sebuah kumpulan konsep penting terkait dengannya, serta buku dan diskusi yang berlimpah. Untuk mempersempitnya diskusi hingga ke aspek konten dari desain responsif, lihat desain yang mengutamakan konten dan dan tata letak responsif content-out. Terakhir, saat ini fokus pada seluler, pelajaran di Tujuh Mitos Seluler yang Mematikan oleh Josh Clark sama relevannya dengan tampilan responsif berukuran kecil dibandingkan dengan situs 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, saat pengguna membuka URL yang belum di-cache dan 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 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 berinteraksi dengan aplikasi tersebut aplikasi.

Mengapa

Dengan menginstal Progressive Web App, aplikasi tersebut akan terlihat, terasa, dan berperilaku seperti semua aplikasi terinstal lainnya. Diluncurkan dari tempat yang sama dengan peluncuran pengguna aplikasi mereka yang lain. Aplikasi ini berjalan di jendela aplikasinya sendiri, terpisah dari browser, dan muncul di daftar tugas, seperti aplikasi lainnya.

Seperti halnya aplikasi khusus perangkat, pengguna yang menginstal aplikasi Anda adalah yang audiens yang aktif, dan sering kali memiliki metrik engagement yang setara dengan aplikasi pengguna 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 menjadi dapat digunakan saat offline. Misalnya, aplikasi perjalanan dan maskapai penerbangan harus memiliki perjalanan detail dan boarding pass akan 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 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 gunakan layar kerangka yang memberikan persepsi kecepatan dan konten kepada pengguna saat memuat, yang dapat kemudian kembali ke konten yang di-cache atau indikator offline sesuai kebutuhan.

Semua interaksi pengguna lulus WCAG 2.0 persyaratan aksesibilitas.

Mengapa

Sebagian besar pengguna, pada suatu saat, ingin menggunakan PWA Anda dengan cara yang tercakup dalam persyaratan aksesibilitas WCAG 2.0. Manusia kemampuan untuk berinteraksi dan memahami PWA Anda ada di berbagai spektrum, dan kebutuhan itu bisa bersifat sementara atau permanen. Dengan membuat PWA Anda dapat diakses, Anda membuatnya dapat digunakan oleh semua orang.

Bagaimana

W3C Pengantar Aksesibilitas Web adalah tempat yang baik untuk memulai. Sebagian besar pengujian aksesibilitas harus dilakukan secara manual. Alat seperti Aksesibilitas audit di Lighthouse, kapak, dan Accessibility Insights dapat membantu Anda mengotomatiskan beberapa pengujian aksesibilitas. Penting juga untuk menggunakan elemen yang benar secara semantik alih-alih membuat ulang elemen tersebut sendiri, misalnya, a dan button yang kurang penting. Hal ini memastikan bahwa saat Anda perlu mem-build 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.

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. Memastikan bahwa URL kanonis ada untuk konten dan bahwa mesin telusur dapat mengindeks URL situs Anda sangat penting 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 dengan PWA Anda. Anda juga dapat menggunakan milik Bing atau situs Yandex {i>tool<i} pemilik, dan pertimbangkan 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 {i>input<i}, dan pengguna harus dapat beralih di antara keduanya dengan lancar saat menggunakan aplikasi. Sama seperti yang penting, metode {i>input <i}seharusnya tidak bergantung pada ukuran layar, artinya area pandang besar harus mendukung area sentuh dan area pandang kecil harus mendukung {i>keyboard<i} dan {i>mouse<i}. Supaya Anda mampu, pastikan bahwa aplikasi dan semua fiturnya mendukung penggunaan metode input apa pun 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 bekerja dengan berbagai opsi {i>input<i}, 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 mem-build ulang dengan HTML non-semantik. Saat menyertakan interaksi yang aktif saat kursor diarahkan, memastikannya 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 agar tetap sehat akan memudahkan Anda mencapai sasaran dan menghadirkan fitur-fitur baru.

Mengapa

Ada banyak hal yang diperlukan untuk membangun aplikasi web modern. Menyimpan aplikasi Anda selalu yang terbaru dan codebase yang sehat akan memudahkan untuk menghadirkan fitur baru yang memenuhi sasaran lain yang diuraikan dalam {i>checklist <i}ini.

Bagaimana

Terdapat sejumlah pemeriksaan prioritas tinggi untuk memastikan kondisi codebase:

• 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 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.