Build PWA WordPress Tanpa Plugin

PWA adalah singkatan dari Progressive Web App, merupakan sebuah solusi untuk kamu melakukan optimasi website dengan memanfaatkan manifest.json dan service-worker.js dapat menciptakan sebuah aplikasi web apps dan memberikan pengalaman penggunaan seperti menggunakan aplikasi mobile.

Pada tulisan ini penulis akan membuat PWA pada WordPress tanpa menggunakan bantuan plugin yang di build atau dibuat secara manual. Adapun penulis menggunakan WordPress karena CSM yang digunakan saat ini menggunakan CMS WordPress dan menerapkannya pada website layarsosial.com sendiri.

WordPress merupakan CMS yang sedang populer saat ini, CMS ini banyak digunakan oleh website-website besar diluar sana karena kemudahan penggunaan nya. Banyak plugin yang disediakan termasuk tips-tips bagaimana menjadikan website terlihat lebih profesional.

Langkah 1– Membuat ikon PNG

Buat gambar PNG logo Anda dalam ukuran 192 × 192, 256 × 256, dan 512 × 512 piksel. Banyak sekali situs web yang menawarkan pembuatan ikon dan favicon gratis dalam berbagai ukuran. Saya akan merekomendasikan favicomatic.com dan tentu saja, Anda selalu dapat menggunakan Google untuk lebih banyak kemungkinan.

Langkah 2– Membuat file manifest.json

The manifest.jsonfile yang digunakan untuk menyimpan informasi penting dan petunjuk yang digunakan oleh Chrome untuk menghasilkan PWA.

Buat file kosong bernama manifest.json di root situs Anda dan tambahkan kode berikut di dalamnya setelah melakukan perubahan yang diperlukan.

{
  "name": "Layarsosial",
  "short_name":"Layarsosial.com - Tips & Informasi Lengkap",
  "description": "Layarsosial.com membahas tentang website that offers latest News, Education, Knowledgebase, Articles. Sci-Tech, Lifestyle, Health, Travels, Gadgets, IT Solution..",
  "icons": [
    {
      "src": "192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "permissions":[
    "gcm",
    "storage",
    "notifications"
  ],
  "author": {
    "name":"Layarsosial",
    "wesbite":"https://www.layarsosial.com/"
  },
  "gcm_sender_id": "YOUR-GCM_ID",
  "gcm_user_visible_only": true,
  "start_url": "/",
  "display": "standalone",
  "background_color":"#FFF",
  "theme_color": "#FFF",
  "orientation": "portrait"
}

Ganti  YOUR-GCM_IDdengan ID Google Firebase Cloud Messaging dan semua detail lainnya sesuai situs Anda.

Langkah 3– Membuat service-worker.js

Ini  service-worker.jsadalah file penting yang akan menangani berbagai acara dan juga akan menampilkan dialog pop-up “Tambahkan ke layar utama”, membantu dalam menghasilkan APK web untuk situs web Anda dengan mengambil detail dari manifest.jsonfile Anda .

Buat file kosong bernama service-worker.js di root situs Anda dan salin-tempel kode di bawah ini di dalamnya:

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
});
self.addEventListener('activate', function(event) {
 console.log('[Service Worker] Activating Service Worker ....', event);
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
caches.match(event.request).then(function(response) {
  if (response) {
    return response;
  } else {
    return fetch(event.request).then(function(res) {
      return caches.open('dynamic').then(function(cache) {
        cache.put(event.request.url, res.clone());
        return res;
      });
    });
  }
})
  );
});

Menerapkan di situs web khusus atau berbasis HTML

Untuk menerapkan dukungan “Tambahkan ke layar utama” dan membuat PWA untuk situs web Anda, tambahkan kode di bawah ini tepat sebelum </head>tag:

<link rel = "manifest" href = "https://www.YOUR-WEBSITE.com/manifest.json" />

Tambahkan kode di bawah ini tepat sebelum </body>tag berakhir:

<script>
    if ('serviceWorker' in navigator) {
      console.log("Will service worker register?");
      navigator.serviceWorker.register('https://www.YOUR-WEBSITE.com/service-worker.js').then(function(reg){
        console.log("Yes it did.");
      }).catch(function(err) {
        console.log("No it didn't. This happened: ", err)
      });
    }
  </script>

Menambahkan dukungan PWA ke WordPress

Ada dua cara yang mungkin untuk menambahkan dukungan PWA dan tombol “Tambahkan ke layar Utama” di situs web Anda:

1. Menggunakan Plugin.
2. Menambahkan kode di atas yang baru saja kita pelajari.

Anda dapat menggunakan plugin WordPress Aplikasi Web Progresif Super untuk menambahkan dukungan PWA di WordPress Anda atau menambahkan kode di atas secara manual.

Menambahkan PWA dan fitur “Add to Home screen” ke WordPress tanpa Plugin

Saya berasumsi bahwa Anda telah membuat manifest.jsondan service-worker.jsdi root situs web Anda dan menambahkan kode yang disarankan di atas setelah melakukan perubahan sesuai domain Anda. Jika Anda telah membuat file ini, satu-satunya langkah yang tersisa adalah menambahkan tag HTML dan JavaScript yang diperlukan di template Anda saat ini.

Buka folder tema saat ini dan functions.phptambahkan kode berikut:

add_action( 'wp_footer', function () { ?>
?>
<script>
    if ('serviceWorker' in navigator) {
      console.log("Will service worker register?");
      navigator.serviceWorker.register('<?=get_site_url();?>/service-worker.js').then(function(reg){
        console.log("Yes it did.");
      }).catch(function(err) {
        console.log("No it didn't. This happened: ", err)
      });
    }
  </script>
<?php } );

Jangan tambahkan kode di bawah ini functions.phpjika plugin OneSignal diinstal, sebagai gantinya login ke dashboard admin WordPress Anda pilih OneSignal Push> Configuration> Custom manifest.json URL  dan ubah URL ke manifest.json Anda yang telah Anda buat di root domain Anda.

function pwa_head_tag_inclusion () {
echo '<link rel = "manifest" href = "'. get_site_url (). '/ manifest.json">'; 
}
add_action ('wp_head', 'pwa_head_tag_inclusion');

Penyelesaian masalah

Bahkan setelah menambahkan kode secara manual, dialog pop-up “tambahkan ke layar utama” tidak muncul? Nah, Anda bisa mencoba langkah-langkah berikut untuk mengatasinya:

1. Kosongkan cache situs web Anda jika Anda menggunakan Plugin Caching dan juga browser web Anda.
2. Pastikan manifest.json di <head> dan di atas tag JavaScript mulai ditambahkan.
3. Periksa silang URL di manifest.json, service-worker.js, head dan footer.
4. Debug menggunakan Google Chrome.