Uncategories Mengenal Progressive Web Apps

Mengenal Progressive Web Apps

on No Comments
Raga Hariawan
Sebelumnya Progressive Web Apps sudah pernah diperkenalkan Google. Namun Google mengangkatnya kembali pada I/O bulan Mei yang lalu, Progressive Web Apps menarik perhatian banyak developer web, karena Progressive Web Apps (PWA) digadang-gadangkan mampu bersaing dengan aplikasi native.

Berbeda dengan aplikasi hybrid, aplikasi hybrid lebih menggabungkan antara aplikasi native dan web. PWA ini sepenuhnya web namun pengguna bisa merasakan experience seperti menggunakan aplikasi native. Seperti bisa dijalankan offline atau koneksi buruk sekalipun, bisa mengirim notifikasi, bahkan menggunakan animasi yang smooth seperti aplikasi native. Aplikasinya pun tidak perlu diinstall, namun icon-nya bisa di pasang di home screen untuk memudahkan membuka aplikasi. PWA sepenuhnya mengandalkan browser. Saat ini hanya browser Chrome minimal versi 47 keatas yang mendukung.
Sebenarnya apa sih Progressive Web Apps itu? Disini saya mencoba menjabarkan 6 poin penting yang membuat aplikasi web bisa disebut sebagai progressive web apps

1. Instant Loading

Teknologi yang mampu membuat PWA ini bisa digunakan offline bahkan pada koneksi internet yang buruk ialah karena service worker. Dengan service worker pula lah waktu muat web menjadi lebih cepat.
Teknologi service worker memiliki mekanisme untuk mengontrol asset yang akan di cache serta menyediakan custom permintaan ke jaringan sehingga dapat memberikan pengalaman akses secara offline bagi pengguna.
Tetapi untuk dapat menggunakannya pertama kali pengguna harus mengakses website tersebut. Setelah semua asset ter-cache oleh service worker, sekalipun koneksi terputus pengguna tidak akan melihat gambar offline dinosaurus. Kira-kira seperti ini alur kerja service worker
Saat ini browser yang mendukung teknologi service worker adalah Chrome minimal versi 44, Opera dan Firefox minimal versi 44. Sedangkan Microsoft Edge sedang dalam pengembangan dan Safari masih mempertimbangkan untuk menerapkan teknologi ini.

2. Add to Homescreen

Yang membuat PWA ini seperti native karena kemampuan untuk menambahkan icon ke homescreen. Jadi pengguna lebih mudah untuk membuka kembali aplikasi web tanpa harus mengakses URL-nya kembali melalui browser. Google menyediakan web app manifest yang berisi pengaturan gambar icon, nama aplikasi, besar resolusi icon shortcut, dan pengaturan tampilan agar ketika dibuka aplikasi web terbuka full screen tanpa menampilkan address bar lagi. Sebagai contoh app manifest ini dapat kamu lihat disini dan berikut contoh fitur Add to Home Screen

3. Notifikasi

Sejak Chrome versi 42, Google memberikan dukungan kepada browser agar mempu mengirimkan notifikasi layaknya aplikasi native. Yang menjadi kendala saat ini setiap browser memiliki API notifikasi yang berbeda-beda, hal ini membuat developer web harus koding untuk setiap browser yang berbeda. Namun kabarnya Apple, Google dan Mozilla juga Microsoft akan bekerja sama membuat standar untuk API notifikasi ini. Jadi developer web cukup koding satu kali yang dapat berjalan disetiap browser

4. Fast (Cepat)

Pengguna web saat ini berharap halaman web yang mereka kunjungi akan interaktif dan smooth. Maka developer perlu memfokuskan waktu dan usahanya disana. Halaman web tidak hanya cepat, tetapi juga harus berjalan dengan baik, scrolling yang cepat dan animasi serta interaksi yang juga harus tetap smooth.
Untuk menulis website dengan performance yang baik dan kamu perlu memahami bagaimana HTML, JavaScript dan CSS ditangani oleh browser, dan memastikan bahwa kode yang kamu tulis dan kode pihak ke-3 lainnya berjalan seefisien mungkin.
Mengakses di web di desktop berbeda dengan di mobile. Pada mobile diharapkan halaman web lebih ringan dengan tidak mendownload banyak asset. Google telah lama mengeluarkan tools PageSpeed Insight untuk menguji apakah website kamu sudah baik untuk diakses melalui mobile.

5. Secure (Aman)

Untuk dapat menggunakan service worker web haruslah sudah menggunakan protokol HTTPS. HTTPS akan menyandikan atau mengenkripsi data sesi menggunakan protokol SSL (Secure Socket layer) atau protokol TLS (Transport Layer Security). Jadi data diantara server web dan pengguna akan lebih aman. Jika tidak terproteksi penyusup bisa saja mengambil data komunikasi antara web kamu dengan browser pengguna. Seperti gambar, cookie, skrip, semuanya bisa dieksploitasi. Gangguan dapat terjadi pada setiap titik dalam jaringan, termasuk komputer pengguna, hotspot Wi-Fi, atau ISP.
HTTPS juga membantu mencegah penyusup dari gangguan komunikasi antara website kamu dengan browser pengguna. Seperti ISP atau hotel yang meng-inject iklan ke dalam halaman. Di Indonesia sendiri kamu pasti tahu ISP mana yang suka meng-inject iklan kehalaman web.
Penyusup dapat mengeksploitasi komunikasi yang tidak dilindungi untuk mengelabui pengguna agar memberikan informasi sensitif atau menginstal malware. Sebagai contoh, beberapa pihak ketiga menyuntikkan iklan ke dalam website yang berpotensi memecah pengalaman pengguna dan menciptakan kerentanan keamanan.
Sejak tahun 2014 Google mulai menggunakan HTTPS untuk semua produk dan layanannya. Bahkan Google memberikan prioritas sinyal peringkat dalam mesin pencarinya.

6. Responsive

Tentu saja Google sangat mendukung website responsive. Pada era saat ini pengguna mulai bergeser dari desktop ke perangkat mobile. Bahkan banyak juga pengguna yang pertama kali mengakses internet dari perangkat mobile. Agar website bisa menyesuaikan dibanyak perangkat seperti desktop, tablet dan smartphone maka penting sebuah website mendukung responsive.
Berikut ada video, kenapa membangun Progressive Web Apps itu pentting

Referensi

Berikut ada beberapa referensi yang bisa kamu pelajari lebih lanjut mengenai Progressive Web Apps
Sumber Artikel : https://chromplex.com/progressive-web-apps/
Raga Hariawan

Next PostPosting Lebih Baru Previous PostPosting Lama Beranda

0 komentar

Posting Komentar