{"id":664,"date":"2018-12-20T17:39:17","date_gmt":"2018-12-20T10:39:17","guid":{"rendered":"https:\/\/luckytruedev.com\/learning\/?p=664"},"modified":"2019-10-04T05:43:52","modified_gmt":"2019-10-03T22:43:52","slug":"progressive-web-application-di-wordpress","status":"publish","type":"post","link":"https:\/\/luckytruedev.com\/learning\/progressive-web-application-di-wordpress\/","title":{"rendered":"Progressive Web Application di WordPress"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"619\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11.jpg\" alt=\"\" class=\"wp-image-667\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11.jpg 701w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-300x265.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-110x97.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-420x371.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-487x430.jpg 487w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-20x18.jpg 20w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><figcaption>hello<\/figcaption><\/figure><\/div>\n\n\n\n<p>Halo Kali ini gw mau share Pasang PWA (Progressive Web Application) di WordPress, kali ini kita akan mempelajari dengan menggunakan Plugin, langsung aja.<\/p>\n\n\n<div id=\"lucky-703306523\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Step by Step<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Install Plugin<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"369\" height=\"243\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-17-at-01.16.40.jpg\" alt=\"\" class=\"wp-image-541\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-17-at-01.16.40.jpg 369w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-17-at-01.16.40-300x198.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-17-at-01.16.40-110x72.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-17-at-01.16.40-20x13.jpg 20w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><figcaption>Tambah Plugin Baru<\/figcaption><\/figure><\/div>\n\n\n\n<p>kali ini kita akan menginstall, sebelumnya kalian ke menu Plugin dan pilih &#8220;Tambah Baru&#8221; pada submenu dari Plugin.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"260\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.36.16.jpg\" alt=\"\" class=\"wp-image-668\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.36.16.jpg 532w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.36.16-300x147.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.36.16-110x54.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.36.16-420x205.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.36.16-20x10.jpg 20w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><figcaption>Install Plugin<\/figcaption><\/figure><\/div>\n\n\n\n<p>Jika Sudah muncul halaman &#8220;Tambah Baru Plugin&#8221; kalian ketik nama plugin ini di bar pencarian, dan pastikan nama plugin dan ikon sama dengan gambar diatas. Pada kasus ini gw pake &#8220;PWA for WP &amp; AMP&#8221; mungkin karna ini yang rekomen dan setupnya juga mudah banget jika sudah, kalian install plugin ini.<\/p>\n\n\n<div id=\"lucky-2967386831\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Setup PWA<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-1024x434.jpg\" alt=\"\" class=\"wp-image-669\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41.jpg 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-300x127.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-768x326.jpg 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-110x47.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-420x178.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-770x326.jpg 770w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.41-20x8.jpg 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>PWA for WP<\/figcaption><\/figure><\/div>\n\n\n\n<p>Jika sudah install kalian pencet tombol &#8220;Start the PWA Setup&#8221; jika sudah dipencet, akan muncul tampilan seperti ini, dan silahkan kalian konfigurasi.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-1024x492.jpg\" alt=\"\" class=\"wp-image-670\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53.jpg 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-300x144.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-768x369.jpg 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-110x53.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-420x202.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-770x370.jpg 770w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.39.53-20x10.jpg 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>General<\/figcaption><\/figure><\/div>\n\n\n\n<p>Pada bagian ini silahkan kalian lakukan konfigurasi sesuai keinginan kalian dari segi nama, deskripsi, ikon dan lainnya.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-1024x640.jpg\" alt=\"\" class=\"wp-image-671\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58.jpg 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-300x188.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-768x480.jpg 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-110x69.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-420x263.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-688x430.jpg 688w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.40.58-20x13.jpg 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Advanced<\/figcaption><\/figure><\/div>\n\n\n\n<p>dan pada bagian ini adalah bagian yang sangat krusial, dimana kita akan mengkonfigurasi corenya, dari CDN, dll. pada kali ini gw centang &#8220;Custom Add to Home Browser&#8221; dan &#8220;Onesignal Compability&#8221; yang pastinya jika kalian membuka situs ini akan muncul pilihan untuk install app di browser dan mendukung push notifikasi onesignal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Implementasi Onesignal<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"361\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-1024x361.jpg\" alt=\"\" class=\"wp-image-672\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52.jpg 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-300x106.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-768x271.jpg 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-110x39.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-420x148.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-770x271.jpg 770w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.41.52-20x7.jpg 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Onesignal Settings<\/figcaption><\/figure><\/div>\n\n\n\n<p>untuk mengimplementasikan onesignal pada PWA kita harus menaktifkan &#8220;Use my Own Manifest.json&#8221; dan silahkan masukan alamat situs custom Manifest.json, biasanya akan keliatan jika kita membuka cpannel dan melihat directory dari situs yang kita buat. Dan disana nanti akan muncul nama file &#8220;manifest-own-pwa.json&#8221;, dan pada file itulah kalian panggil untuk di Custom Manifest di Onesignal Settings<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Hasil Akhir<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"619\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1.jpg\" alt=\"\" class=\"wp-image-673\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1.jpg 701w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1-300x265.jpg 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1-110x97.jpg 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1-420x371.jpg 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1-487x430.jpg 487w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-20-at-16.53.11-1-20x18.jpg 20w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><figcaption>Menggunakan PWA (Kiri) &amp; Tidak PWA (Kanan)<\/figcaption><\/figure><\/div>\n\n\n\n<p>Selamat Kalian telah mempelajari cara Menerapkan Progressive Web Application pada wordpress \/ amp kalian, mungkin itu aja. Makasih \ud83d\ude42<\/p>\n<div id=\"lucky-1793339671\" class=\"lucky-after-content lucky-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Halo Kali ini gw mau share Pasang PWA (Progressive Web Application) di WordPress, kali ini kita akan mempelajari dengan menggunakan Plugin, langsung aja. Step by Step 1. Install Plugin kali ini kita akan menginstall, sebelumnya kalian ke menu Plugin dan pilih &#8220;Tambah Baru&#8221; pada submenu dari Plugin. Jika Sudah muncul halaman &#8220;Tambah Baru Plugin&#8221; kalian [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ltdv-wp-amp-optimized-tutor"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/comments?post=664"}],"version-history":[{"count":1,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/664\/revisions"}],"predecessor-version":[{"id":2319,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/664\/revisions\/2319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/media\/667"}],"wp:attachment":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/media?parent=664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/categories?post=664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/tags?post=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}