Kenalan dengan Progressive Web Apps(PWA)Di Posting Oleh : wandi
Kategori :
javascript
news coding
Pemprograman web
react
Kepanjangan dari PWA adalah Progressive Web Apps. lantar apa itu pengertian dari Progressive Web Apps ??
Apa itu Progressive Web Apps(PWA) ?
Progressive Web Apps adalah sebuah metode untuk membuat sebuah webiste berjalan,terlihat, dan terasa seperti aplikasi native pada umumnya, tetapi merupakan situs web yang sudah di optimized untuk dijalankan dimobile. meskipun seperti aplikasi native kita tidak perlu mendownload di app store, cukup dengan membuka webiste yang sudah teroptimized beberapa detik nanti akan muncul pop-up untuk mengijinkan apakah web tersebut diizinkan dipasang di HOME.
meskipun sudah terpasang dihome pwa tetap berjalan di atas browser dan pwa yang baik harus bisa berjalan meskipun di jaringan 3G dan offline, juga memiliki fitur offline caching,background syncing dan push notifications dengan menggunakan service worker.
apa itu service worker ?
service worker adalah sebuah aplikasi file javascript yang berjalan di background dan tidak dapat berintarksi langsung dengan halaman website maupun tidak bisa mengakses DOM Secara langsung tetapi dapat berkomunikasi melalui messages (Post Messages).
pwa harus menggunakan service worker karena service worker bertindak sebagai proxy server diantara web app, browser dan jaringan(bila tersedia). pada load pertama kali service worker akan mendownload content webiste tersebut dan di simpan dicache browser. dengan demikian jika mengakses lagi dapat memuat website tersebut lebih cepat karena tinggal mengambil data dari cache browser yang disimpan tadi. Dengan cara ini website akan bisa diakses secara offline atau sedang mengalami sinyal yang buruk.
Perusahan yang sudah menerapkan pwa pada website mereka
|
Alibaba |
|
trivago |
|
Instagram |
|
Twitter |
dan masi banyak lagi website keren yang sudah menggunakan pwa.
dengan menggunakan pwa akan memberikan pengalam kepada user yang membuka website kita sebagai berikut :
=>
Reliable
proses load website akan lebih cepat user tidak lagi melihat downasaur bahkan dalam jaringan yang sangat buruk sekalipun.
=>
fast
dengan respon yang cepat dapat mencegah user meninggalkan website kita karena 53% user akan meninggakan webiste kita jika dalam 3 menit webiste kita tidak memberikan respon apapun atau malah muncul downasaur.
=>
Engaging
karena pwa terlihat seperti aplikasi native pada umunya maka akan memberikan user experience yang sangat mendalam.
hal yang perlu di perhatikan dalam pembuatan pwa:
Service Worker
service worker bertindak sebagai proxy server diantara web app, browser dan jaringan(bila tersedia). pada load pertama kali service worker akan mendownload content webiste tersebut dan di simpan dicache browser. dengan demikian jika mengakses lagi dapat memuat website tersebut lebih cepat karena tinggal mengambil data dari cache browser yang disimpan tadi. Dengan cara ini website akan bisa diakses secara offline atau sedang mengalami sinyal yang buruk.
Manifest File
manifest File adalah file JSON config yang mencakup tentang informasi dari aplikasi seperti jenis icon yang akan disimpan dilayar ketika diisntall, tema,dan nama pendek dari aplikasi.
HTTPS
service worker memerlukan https untuk tujuan keamanan.karena service worker memiliki kemampuan untuk memodifikasi respon disisi client dan dapat mencegah request jaringan, semua komunikasi antara browser dan jaringan perlu di dienkripsi.
alat yang dibutuhkan untuk membuat pwa:
- Chrome 52 atau di atasnya
- Web Server for Chrome, atau server web pilihan Anda
- Text Editor
- Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools
setelah pwa selesai di bagun jangan lupa testing dengan developer tools => audits
semoga bermanfaat
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar