<p>Salah satunya cara yang bisa anda lakukan untuk membuat website wordpress anda menjadi mobile friendly selain menggunakan <a href="https://www.tutorialpedia.net/cara-memasang-amp-accelerated-mobile-pages-di-wordpress/">amp</a> anda bisa juga menggunakan PWA. Apa itu PWA? PWA merupakan kepanjangan dari Progressive Web Apps ,dimana PWA adalah salah satu teknologi yang dikembangkan oleh Team Chrome Developer dari Google, yang akan mengubah sebuah website , menjadi seperti sebuah aplikasi native (secara User Experience). PWA juga mengoptimasi kecepatan untuk membuka halaman website ,serta berguna bagi pengunjung yang sedang offline ,atau untuk jaringan koneksi yang tidak stabil.</p>
<p><strong>Kelebihan PWA (Progressive Web Apps)</strong></p>
<ul>
<li><strong>Bekerja secara Offline</strong> – Dengan Menggunakan Service Worker.</li>
<li><strong>Push Notifikasi ;</strong>– Meningkatkan engagement visitor.</li>
<li><strong>Seperti Aplikasi Native ;</strong>– Tampilannya terasa seperti Aplikasi yang diinstal di Google Play Store.</li>
<li><strong>Dapat diinstall ke Homescreen</strong> – Visitor dapat langsung akses Website WordPress.</li>
<li><strong>Shareable ;</strong>– Mudah dibagikan ke plaftorm Aplikasi lain.</li>
</ul>
<p>Dan pada artikel kali ini saya akan mengajarkan kepada anda tengan bagaimana cara membuat halaman wordpress anda menjadi PWA (Progressive Web Apps)</p>
<h2><strong>Cara Membuat WordPress Menjadi PWA (Progressive Web Apps)</strong></h2>
<p>Untuk membuat wordpress menjadi pwa, kita akan menggunakan plugin yang bernama PWA For WP. Sebenarnya ada plugin alternatif lain untuk membuat wordpress menjadi pwa seperti <em><strong>Super Progressive Web Apps</strong></em>. Tetapi, karena plugin sudah tidak dimaintain lagi, jadi lebih baik kita menggunakan plugin AMP For Wp yang masih sering diupdate.</p>
<ol>
<li>Pertama Download dan install plugin PWA <a class="fasc-button fasc-size-xsmall fasc-type-flat ico-fa fasc-ico-before fa-download" style="background-color: #0d42a2; color: #ffffff;" target="_blank" rel="nofollow noopener noreferrer" href="https://wordpress.org/plugins/pwa-for-wp/">Download PWA for WP</a></li>
<li>Setelah itu aktifkan plugin PWA For WP</li>
<li>Masuk ke menu ;<strong>PWA &#8211; Setting. ;</strong>Disini kita akan melakukan konfigurasi terlebih dahulu untuk Progressive Web Apps-nya.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_395.png"><img class="aligncenter size-full wp-image-7305" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_395.png" alt="membuat wordpress menjad pwa" width="536" height="256"></a></li>
<li>Untuk pengaturannya pada dashboard, kalian bisa ikuti pengaturan saya seperti dibawah ini.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_396.png"><img class="aligncenter size-full wp-image-7306" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_396.png" alt="membuat wordpress menjadi PWA" width="1152" height="793"></a>
<ol style="list-style-type: lower-alpha;">
<li><strong>Enable/Disable : ;</strong>Fitur ini berfungsi untuk dimana anda akan mengaktifkan notifikasi dari PWA.</li>
<li><strong>Manifest :</strong> Dukungan untuk PWA</li>
<li><strong>Service Worker : ;</strong>Dukungan untuk PWA</li>
<li><strong>HTTPS : ;</strong>Dukungan protokol https untuk pwa (Progressive Web Apps)</li>
</ol>
</li>
<li>Lalu pada tab ;<strong>Setup. ;</strong>Disini anda anda bisa mengatur detail pwa aplikasi anda seperti ;<strong>Nama app, Deskripsi App, Icon App dan juga splash screen App.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_397.png"><img class="aligncenter size-full wp-image-7307" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_397.png" alt="membuat wordpress menjadi PWA" width="1271" height="788"></a></strong></li>
<li>Lalu pada tab ;<strong>Features ;</strong>pada menu ini kita diberikan opsi tambahan untuk halaman PWA (Progressive Web Apps). Namun, tidak semua fitur tersebut bisa anda gunakan. Karena untuk menggunakan tersebut kita harus mengupgrade PWA menjadi premium.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_398.png"><img class="aligncenter size-full wp-image-7308" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_398.png" alt="membuat wordpress menjadi PWA" width="1237" height="737"></a></li>
</ol>
<p>Ada banyak sekali fitur-fitur yang bisa anda gunakan diplugin PWA for WP yang bisa anda explore sendiri.</p>
<h3><strong>Menguji halaman PWA WordPress:</strong></h3>
<ul>
<li>Pertama, anda install extension <a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en" target="_blank" rel="noopener noreferrer">Lighthouse</a> di chrome.</li>
<li>Jika sudah, kalian pilih icon lighthouse , dibagian pojok kanan atas.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_400.png"><img class="aligncenter wp-image-7317 size-full" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_400.png" alt="membuat wordpress menjadi pwa" width="478" height="482"></a></li>
<li>Lalu kalian pilih ;<strong>Generate Report</strong>. Oh ya , pastikan kalian sedang menunjungi website yang ingin kalian uji coba test pwanya.</li>
<li>Tunggu beberapa saat, Lighthouse akan mencoba mendebugnya.</li>
<li>Setelah selesai prosesnya. Kalian klik icon PWA , lalu akan muncul beserta keterangan , apakah fungsi atau fitur PWA , sudah bekerja dengan baik atau tidak. Lebih jelasnya kalian perhatikan gambar di bawah:<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_401.png"><img class="aligncenter size-full wp-image-7318" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_401.png" alt="membuat wordpress menjadi pwa" width="1005" height="657"></a></li>
<li> ;</li>
</ul>
<h3><strong>Lalu bagaimana cara kerja plugin PWA for WP ini?</strong></h3>
<p>Kali ini kita akan mencoba menguji PWA (Progressive Web Apps) Ini baik di perangkat handphone maupun komputer.</p>
<h4><strong>Menguji PWA di Handphone</strong></h4>
<ol>
<li>Silahkan akses situs anda menggunakan handphone melalui browser chrome.</li>
<li>Maka pada bagian bawah halaman web anda akan muncul tulisan ;<strong>Add (nama situs anda) To Homescreen.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_2020-10-15-14-20-39-07.jpg"><img class="aligncenter wp-image-7309" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_2020-10-15-14-20-39-07.jpg" alt="membuat wordpress menjadi pwa" width="402" height="871"></a></strong></li>
<li>Lalu klik ;<strong>Add ;</strong>pada notifikasi tersebut. Maka secara otomatis website anda tadi akan terinstall di handphone anda.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_2020-10-15-14-24-20-12.jpg"><img class="aligncenter wp-image-7310" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_2020-10-15-14-24-20-12.jpg" alt="membuat wordpress menjadi pwa" width="389" height="843"></a></li>
<li>Lalu buka aplikasi tersebut. Sekarang wesbite anda bisa diakses melalui aplikasi native android.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_2020-10-15-14-28-08-05.jpg"><img class="aligncenter wp-image-7319" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_2020-10-15-14-28-08-05.jpg" alt="pwa wordpress" width="406" height="879"></a></li>
<li>Agar tampilan mobilenya lebih terasa, sebaiknya gabungkan PWA tersebut dengan halaman <a href="https://www.tutorialpedia.net/cara-memasang-amp-accelerated-mobile-pages-di-wordpress/">AMP</a>. Lalu pada pengaturan aktifkan Mobile Redirectionnya. Maka ketika user tersebut mengakses dari PWA tadi, secara otomatis dia akan mengakses halaman AMP-nya.</li>
</ol>
<h3> ;</h3>
<h4><strong>Menguji PWA di Desktop</strong></h4>
<ol>
<li>Akses seperti biasa url situs anda di komputer/laptop.</li>
<li>Jika website anda terintegrasi dengan PWA maka pada bagian kanan URL situs tersebut ada icon ;<strong>+ Install. ;</strong>Lihat gambar berikut:<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_402.png"><img class="aligncenter size-full wp-image-7320" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_402.png" alt="pwa for desktop" width="1327" height="301"></a></li>
<li>Klik ;<strong>Install. ;</strong>Nanti secara otomatis akan muncul icon App di desktop komputer anda.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_403.png"><img class="aligncenter size-full wp-image-7321" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_403.png" alt="pwa wordpress" width="702" height="477"></a></li>
<li>Jika kita buka, maka akan tampil seperti aplikasi pada umumnya. Namun, yang ditampilkan hanyalah website wordpress anda.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_404.png"><img class="aligncenter size-full wp-image-7322" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_404.png" alt="pwa wordpress for destop" width="1689" height="1043"></a></li>
<li>Anehnya aplikasi tersebut tidak bisa anda temukan pada ;<strong>Control Panel &#8211; Program. ;</strong>Jika anda ingin meng-<em>uninstall ;</em>aplikasi tersebut, Buka App PWA dari desktop anda. Lalu pada bagian kanan atas klik ;<strong>Uninstall<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_405.png"><img class="aligncenter size-full wp-image-7323" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_405.png" alt="pwa wordpress" width="1738" height="1008"></a></strong></li>
</ol>
<p>Jika semua uji coba yang anda lakukan diatas berhasil. Itu artinya website anda sudah terintegrasi dengan PWA <em>(Progressive Web Apps).</em></p>

Cara Membuat WordPress Menjadi PWA (Progressive Web Apps)
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
