Cara Mengaktifkan PWA di WordPress

Posted on

Untuk menguji kecepatan website, Google merekomendasikan menggunakan tool buatannya yang bernama Lighthouse. Tool ini hanya tersedia di ekstensi Google Chrome, untuk itu download dan install terlebih dahulu melalui Chrome Web Store. Dalam pengujian tersebut akan menampilkan 5 indikator yaitu perfomance, accessibility, SEO, dan Progressive Web App. Secara default web yang tidak dioptimasi maka mustahil mendapatkan skor bagus dalam pengujian ini terutama bagian Progressive Web App (PWA).

Bila indikator PWA tidak berwarna hijau berarti harus diaktifkan terlebih dahulu, berikut ini TERAA.NET akan menjelaskan kepada Anda cara mengaktifkan PWA di platform WordPress. Sebelum menuju tahap pembahasan alangkah baiknya kalau Kita pahami dulu apa itu PWA dan seberapa penting peranannya terhadap situs website.

Progressive Web App (PWA)
Indikator pengujian website teraa.net di Lighthouse Google Chrome

Apa Itu PWA?

Kalau ditinjau dari namanya Progressive Web App artinya aplikasi berbasis web untuk meningkatkan kecepatan website. PWA bukan sekedar web responsive yang dapat dibuka disemua device, melainkan di desain khusus mirip aplikasi yang berjalan di browser.

Sebut saja Tokopedia dan Shopee yang telah menerapkan PWA, ketika diakses melalui perangkat mobile maka tampilannya berbeda dengan versi dekstop dan aplikasi. Kabar baik bagi pengguna WordPress, Anda dapat mengaktifkan PWA melalui plugin PWA for WP & AMP.

Kalau sudah responsive dan menggunakan AMP kenapa harus PWA? bukannya keduanya sama-sama memberikan pengalaman yang bagus dalam meload website? tentu Google mempunyai alasan tersendiri kenapa mengenalkan PWA kepada para developer.

PWA menggunakan teknologi Service Worker dimana dapat memberikan fungsionalitas offline, notifikasi, update konten, dan pergantian konektivitas. Dalam koneksi yang lambat atau koneksi yang tidak stabil, Anda dapat mengakses website dengan cepat dan mempunyai tampilan yang sama seperti terakhir anda membuka aplikasinya melalui web browser.

Baca: Perbandingan Blog HTML VS AMP, Bagus Mana?

 

Keuntungan Menggunakan PWA

Menurut Google ada 3 keuntungan jika developer mengembankan aplikasi dengan metode Progressive Web Application, diantaranya adalah:

1. Reliable

Konsep yang ditawarkan metode pengembangan aplikasi menggunakan PWA ini memungkinkan untuk bisa mempersingkat loading time pada tiap halaman app. Tentu ini sangat menguntungkan, mengingat pengunjung website hanya dapat memberikan atensi penuh terhadap suatu hal dalam waktu 3 detik.

2. Fast

Kelemahan pada website reguler terletak pada User Interface yang kurang responsif jika dibandingkan dengan native app. Nah PWA memungkinkan Anda untuk memiliki aplikasi yang hemat data dengan keuntungan user interface yang responsive layaknya native app. Dengan bantuan dari cache dan service worker, aplikasi dapat berjalan secara “seamless” seperti native app, dan menghemat data layaknya website reguler.

3. Engaging

Pengunjung website bakal kesulitan membedakan mana aplikasi native dan mana yang berjalan diatas website PWA. Hal tersebut bisa terjadi karena rasa natural yang diberikan oleh aplikasi PWA layaknya native app. Dengan begitu, tanpa harus install aplikasi, pengunjung dapat tetap menikmati layanan aplikasi.

 

Cara Mengaktifkan PWA WordPress

1. Login ke dashboard WordPress kemudian install plugin PWA for WP & AMP
PWA for WP & AMP
2. Aktifkan plugin kemudian pilih Settings
3. Plugin Progessive Web Apps For AMP suport untuk blog HTML dan AMP, beri tanda centang semuanya bila ingin bekerja pada versi HTML maupun AMP

4. Sekarang cek kecepatan website menggunakan ekstensi Lighthouse di Google Chrome, bila berhasil maka PWA berwarna hijau

5. Ketika website Anda dibuka orang lain maka muncul notifikasi Add… to screen (perintah untuk menambahkan situs website ke screen smartphone), atau melalui Add to Home Screen
6. Secara otomatis PWA WordPress terinstall di smartphone, ketika dibuka maka trafiknya masuk ke situs website Anda. Iklan Google AdSense juga tampil sepenuhnya di mode PWA ini.

 

Pengaturan Lebih Lanjut Tentag PWA

Masih di plugin PWA for WPAMP, Anda dapat mengatur desain aplikasi sesuai keinginan melalui tap menu Setup menambahkan icon yang akan tampil pada aplikasi dan animasi splash screen ketika mulai dijalankan. Bosan dengan tampilan splash screen yang itu-itu saja, ganti warna background dan theme melalui menu Design.

Pengaturan lebih lanjut dapat dilakukan melalui tab menu Features, Tools, Advance, Premium Features. PWA for WP & AMP versi gratisan ini sudah cukup untuk membuat aplikasi PWA pada blog WordPress Anda namun bila menginginkan fitur Call to Action for PWA, Loading Icon Library for PWA, dan Data Analytics for PWA silahkah upgrade ke premium.

Yang perlu diperhatikan adalah PWA hanya dapat di jalankan di smartphone Android dan iOS, kalau dibuka melalui browse komputer maka tidak muncul notifikasi Add to Home Screen. Semacam aplikasi webview dengan ekstensi dot.apk (Android) dan dot.ipa (iOS) setelah terpasang di smartphone pengunjung website.

PWA merupakan metode pembuatan aplikasi yang memanfaatkan website sebagai basis pengembangan. Bisa dikatakan ini merupakan cara membuat aplikasi dengan mengkombinasikan website reguler dengan aplikasi mobile/ desktop. Meskipun demikian bila PWA pada WordPress telah aktif maka kecepatan loading layaknya native app.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.