Progressive Web Apps : Akses website tanpa koneksi internet

Posted on 4 min read

Hai, beberapa hari ini saya selalu berkutat dalam hal optimisasi website saya sendiri. Kemudian suatu waktu pada siang hari, saya menemukan sesuatu yang menarik dalam hal optimasi website. Yaitu tentang PWA (Progressive Web Apps), PWA ini adalah sebutan untuk sebuah pengalaman browsing yang lebih nyaman.

Biasanya, saat kamu tidak terkoneksi ke internet, kamu tidak akan bisa mengunjungi situs favorit atau website yang sering kamu kunjungi dan jika kamu menggunakan google chrome biasanya kamu akan langsung di direct ke halaman Dinosaurus.

Nah halaman dinosaurus atau (no internet connection) ini tidak akan muncul di situs yang telah mengimplementasikan PWA (Progressive Web Apps) ini. Dengan PWA, kamu bisa mengunjungi sebuah halaman pada website (yang sebelumnya pernah dikunjungi), tanpa harus terkoneksi di internet.

Selain itu, ada lagi kelebihan dengan mengimplementasikan Progressive Web Apps pada website kita, seperti :

Bisa di pasang ke Layar Utama sebagai Aplikasi

Nah jadi salah satu kelebihan saat mengimplementasikan PWA pada situs kita adalah, situs kita bisa ditambahkan ke layar utama pada smartphone kita sebagai aplikasi tanpa melalui Apps Store.

Jadi kita udah ga perlu lagi susah-susah membuat website kita ke versi aplikasi android/ios. Karena tinggal plug & play aja.

muncul popup bar untuk menambahkan website ke layar utama

Oh iya, ini berbeda ya dengan menambahkan website secara manual tanpa adanya fitur PWA. Jika menambahkan website ke layar utama tanpa PWA, tetap saja bisa, tetapi tampilan website tidak akan full screen seperti website yang sudah menggunakan PWA, contohnya seperti situs wikipedia dibawah ini :

wikipedia tanpa PWA 1
Wikipedia sudah ditambahkan ke layar utama
Wikipedia sudah ditambahkan ke layar utama, tetapi saat dibuka tetap muncul address bar atau tidak full screen.

Coba kita lihat perbedaan bagaimana saat website saya ini ditambahkan ke layar utama

PWA ariestwn

Nah, kelihatan saat website saya ditambahkan ke layar utama, judul sudah ditetapkan dari pengaturan PWA dan tidak bisa diganti dari pihak pengguna.

Saat aplikasi sudah dibuka, maka tampilan pun akan full screen (tanpa address bar), seperti pada gambar dibawah ini :

website dengan PWA akan menjadi full screen saat dibuka melalui aplikasi.

Selain itu, website yang ditambahkan ke layar utama dengan adanya PWA ini, icon bisa muncul di menu aplikasi (drawer), sedangkan untuk menambahkan layar utama tanpa PWA, icon hanya muncul di layar utama saja.

Bisa mengakses website tanpa harus terkoneksi ke internet

Ini adalah fitur yang menurut saya lumayan menarik dari PWA, pengguna kita bisa mengakses halaman website tanpa harus terkoneksi ke internet. Jadi pengguna pun bisa lebih hemat data, selain itu akses website juga jadi lebih cepat karena cache halaman kita sudah tersimpan di browser.

Menurut saya seharusnya, beberapa situs raksasa seperti wikipedia dan beberapa situs lainnya harus mulai mengimplementasikan Progressive Web Apps ini pada website mereka.

Saya lihat Bukalapak.com juga sudah mengimplementasikan PWA ini pada website mereka. Karena biar penggunanya juga merasa senang kan, bisa lebih cepat mengakses situsnya.

pwa pada bukalapak.com

Mendukung Push Notification

Nah, salah satu yang cukup menarik adalah bisa menggunakan fitus Push Notification. Yang unik dengan fitur ini adalah, metodenya berbeda dengan mengimplementasikan push notification pada website kita tanpa PWA, dengan PWA kita mengirimkan notifikasi kepada pengguna yang telah menambahkan website kita ke layar utama tanpa harus meminta ijin seperti halnya pada browser.

Saya sendiri belum sempat mencoba fitur push notification ini, nantinya akan saya update bagian ini jika saya sudah mencobanya.

edit : Ternyata untuk mengaktifkan fitur push notification pada PWA, tetap harus menggunakan layanan push notification terlebih dahulu seperti Onesignal.

Tak ada lagi Halaman Dinosaurus

no internet connection

Halaman dinosaurus selalu akan muncul saat kita mengunjungi website tanpa adanya koneksi internet. Nah hal ini tidak akan pernah terjadi jika website yang kita kunjungi tersebut telah menerapkan Progressive Web Apps. Tentu ini akan sangat bagus untuk kedua belah pihak antara si pemilik website dan pengunjung website.

Tetapi halaman yang bisa diakses tersebut hanyalah halaman yang sebelumnya sudah pernah di akses. Jika halaman yang dituju belum pernah diakses oleh pengguna, maka bisa diarahkan ke halaman offline seperti digambar dibawah ini

Custom offline page

Di wordpress, cara implementasinya bagaimana ?

Untungnya, di wordpress sudah tersedia plugin yang sangat bagus untuk membuat website kita mendukung PWA ini, yaitu dengan menggunakan plugin SuperPWA.

Cara menggunakannya juga sangat mudah kamu tingal pasang dan mengaktifkan plugin maka plugin sudah berjalan dengan semestinya.

Kemudian muncul masalah baru, untuk fitur menambahkan website ke layar utama pada smartphone sendiri itu hanya support browser chrome & safari saja. Sedangkan untuk fitur akses halaman website tanpa koneksi internet bisa digunakan hanya pada browser chrome, safari, firefox, edge pada versi tertentu saja, selengkapnya mengenai kompabilitas bisa dilihat pada halaman ini.

Wix : Create your website
Gravatar Image
Disela-sela kesibukannya menyusun Tugas Akhir masa perkuliahan, Dia masih saja menyempatkan untuk menulis di blognya yang masih tergolong baru ini. Jangan lupa follow: Facebook | Twitter | Instagram

Leave a Reply

Your email address will not be published. Required fields are marked *