Langkah pertama
Progressive Web App adalah situs web dengan fitur dan kemampuan yang ditingkatkan. Mereka tidak melekat pada technology stack tertentu dan Anda dapat memulai dari awal dengan situs baru atau memperbarui situs Anda yang sudah ada tanpa perombakan total. Dalam panduan ini, Anda akan belajar membuat penerapan pola PWA yang baik. Berikut beberapa strategi untuk memulai:
Buat agar dapat diinstal
Mulai dari yang kecil! Pendekatan ini termasuk dimulai dengan file manifes dasar, halaman offline sederhana, dan pekerja layanan untuk menyalurkan halaman offline dan meng-cache beberapa CSS dan JavaScript penting. Berkat penyimpanan CSS dan JavaScript yang penting, aplikasi web yang ada akan siap untuk bekerja secara offline sekaligus meningkatkan performanya.
Fokus pada fitur
Pilih satu fitur baru—seperti notifikasi push atau penanganan file—yang akan memengaruhi pengguna atau bisnis Anda secara signifikan. Ini akan memungkinkan Anda memasukkan jari kaki Anda ke dalam kumpulan PWA tanpa membuat terlalu banyak perubahan sekaligus.
Membuat versi sederhana
Ambil bagian aplikasi Anda yang sudah ada atau perjalanan pengguna tertentu, seperti pemutaran video atau akses ke boarding pass, dan jadikan aplikasi tersebut berfungsi secara berurutan sebagai PWA offline-first, baik secara mandiri maupun dalam konteks. Hal ini memungkinkan eksperimen berisiko rendah yang memungkinkan Anda memikirkan kembali pengalaman bagi pengguna dengan PWA.
Mulai dari awal
Jika Anda ingin mendesain ulang situs atau memulai dari awal, strategi ini sangat masuk akal. Ini memungkinkan Anda untuk lebih mudah membangun pola desain PWA daripada strategi lainnya, khususnya memungkinkan Anda untuk memanfaatkan semua kekuatan pekerja layanan sejak awal.
Mengupgrade aplikasi Play Store
Dengan kemampuan untuk memublikasikan PWA ke app store, Anda dapat menggabungkan PWA ke dalam peluncur PWA dan menguploadnya ke penyimpanan, seperti Google Play Store atau Windows Store. Jika Anda memiliki aplikasi khusus platform yang sudah ada, Anda dapat menggantinya dengan PWA yang dipublikasikan di Play Store.
Dengan pendekatan ini, pengguna yang ada akan mendapatkan upgrade pengalaman mereka ke PWA, dan pengguna baru tetap dapat menggunakan atau menginstal PWA Anda dari browser, atau app store. Dan, Anda akan memiliki satu aplikasi untuk semua orang, menghemat biaya, waktu, dan meningkatkan pengalaman pengguna.
Checklist PWA
Progressive Web App adalah situs web, yang kemudian mengarah ke pertanyaan: Kapan aplikasi tersebut menjadi Progressive Web App? Jawabannya tidak begitu sederhana, karena konsep PWA tidak merujuk pada teknologi atau stack tertentu, PWA adalah sebuah pola yang mencakup berbagai komponen teknis.
Meskipun tidak ada aturan unik di antara semua browser, ada serangkaian rekomendasi yang disebut Checklist Progressive Web App, untuk membantu Anda membuat PWA yang akan disukai pengguna.
Persyaratan inti
Karena PWA mencakup semua perangkat, mulai dari seluler hingga desktop, Checklist Progressive Web App inti berisi hal yang perlu Anda lakukan untuk menjadikan aplikasi dapat diinstal dan andal bagi semua pengguna, terlepas dari ukuran layar atau jenis input.
Persyaratan intinya adalah:
Mulai cepat, bekerja tetap cepat
Performa memainkan peran 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.
Berfungsi di semua browser
Progressive Web App adalah aplikasi web terlebih dahulu, yang berarti mereka harus berfungsi di seluruh browser, bukan hanya di salah satunya. Namun, pengalaman ini tidak harus sama di semua browser. Mungkin ada fitur yang tidak didukung oleh satu browser, dengan penggantian untuk memastikan pengalaman yang baik.
Responsif terhadap semua ukuran layar
Pengguna dapat menggunakan PWA Anda pada semua ukuran layar, dan semua konten tersedia di semua ukuran area pandang.
Menyediakan halaman offline kustom
Saat pengguna offline, menyimpannya di PWA akan memberikan pengalaman yang lebih lancar dan seperti native daripada kembali ke halaman offline browser default.
Dapat diinstal
Pengguna yang menginstal atau menambahkan aplikasi ke layar utama mereka cenderung lebih sering berinteraksi dengan aplikasi tersebut, dan saat PWA diinstal, PWA dapat memanfaatkan lebih banyak kemampuan untuk memberikan pengalaman pengguna yang lebih baik.
Karakteristik PWA yang optimal
Untuk membuat Progressive Web App yang hebat, yang terasa seperti aplikasi terbaik di kelasnya, Anda tidak hanya memerlukan checklist inti. Checklist Progressive Web App yang optimal adalah tentang membuat PWA Anda terasa mampu dan andal sekaligus memanfaatkan apa yang membuat web canggih.
Memberikan pengalaman offline
Dengan mengizinkan pengguna menggunakan PWA Anda saat offline, Anda akan menciptakan pengalaman seperti aplikasi yang autentik untuk mereka. Lakukan ini dengan mengidentifikasi fitur-fitur yang tidak memerlukan konektivitas, sehingga pengguna dapat mengakses setidaknya beberapa fungsi.
Dapat diakses sepenuhnya
Pastikan semua konten dan interaksi aplikasi dipahami oleh pembaca layar, dapat digunakan hanya dengan keyboard, menunjukkan fokus, dan kontras warnanya kuat. Dengan membuat PWA Anda mudah diakses, Anda memastikannya dapat digunakan oleh semua orang.
Menggunakan kemampuan canggih jika tersedia
Mulai dari pengiriman pesan push, WASM, dan WebGL, hingga akses sistem file, pemilih kontak, dan integrasi dengan app store. Alat untuk membuat PWA yang sangat mumpuni dan sangat terintegrasi ada di sini, memungkinkan Anda membuat pengalaman pengguna berfitur lengkap, yang sebelumnya disediakan untuk aplikasi platform, yang dapat dibawa pengguna ke mana pun mereka pergi.
Dapat ditemukan melalui penelusuran
Lebih dari separuh traffic situs web berasal dari penelusuran organik. Pastikan ada URL kanonis untuk konten dan bahwa mesin telusur dapat mengindeks situs Anda sangat penting bagi pengguna untuk menemukan PWA Anda.
Berfungsi dengan jenis input apa pun
Pengguna harus dapat berganti-ganti jenis input saat menggunakan aplikasi Anda dengan lancar, dan metode input seharusnya tidak bergantung pada ukuran layar.
Menyediakan konteks untuk permintaan izin
Hanya picu permintaan izin seperti notifikasi, geolokasi, dan kredensial, setelah memberikan alasan dalam konteks untuk meningkatkan peluang pengguna menyetujui permintaan tersebut.
Mengikuti praktik terbaik untuk kode yang sehat
Menjaga aplikasi Anda selalu yang terbaru dan codebase yang sehat akan memudahkan Anda dalam memberikan fitur baru yang memenuhi sasaran lain yang ditetapkan dalam checklist ini.