Cara Mengaktifkan PWA di Blogger Untuk Blog Non AMP

Mengaktifkan PWA (Progressif Web App) di Blogger Untuk Non AMP - Kompiajaib dan Kang Ismet pun sudah menerapkan hal ini. Awalnya saya sendiri sempat kebingungan dengan tutorial yang beliau (Kompiajaib) berikan, tapi alhamdulillah Kang Ismet bisa menjelaskannya secara detail untuk orang-orang seperti saya supaya lebih mudah paham.

Mungkin anda atau orang-orang yang seperti saya juga merasa kebingungan dengan tutorial yang Kompiajaib berikan. Hal ini dikarenakan penjelasan yang terlalu singkat tanpa dijelaskan secara gamblang, oleh karena itu saya berinisiatif untuk membuatnya juga dan menjabarkannya secara detail kepada anda.

Apa itu yang dimaksud PWA?

PWA (Progressif Web App) adalah sebuah aplikasi yang dibangun melalui optimasi pada sebuah situs. Optimasi yang dilakukan ini tidak hanya membuat situs menjadi ringan, namun juga dapat memberikan pengalaman ke pengguna layaknya menggunakan aplikasi mobile.

Tidak seperti pada kebanyakan aplikasi lainnya yang membutuhkan keahlian pemrograman khusus. PWA ini justru lebih simpel, karena ia mengandalkan fitur bawaan dari browser misalnya seperti pada Chrome, Firefox, dan lain-lain.

Cara Mengaktifkan PWA di Blog Non AMP

Untuk mengaktifkan mode PWA ini di blogger, anda harus melewati dahulu semua tahapan / proses yang terbilang agak rumit untuk pemula. Tetapi tenang saja, semua akan saya lebih permudah berdasarkan artikel yang sudah pernah saya baca dan terapkan.

Persiapan

Sebelum melanjutkan ke tutorial, pastikan blog anda sudah terhubung ke Cloudflare. Karena kita akan mengandalkan fitur Wokers yang ada di Cloudflare untuk bisa mengaktifkan mode PWA di blogger.

Selain itu, anda juga harus memiliki akun Github agar bisa menyimpan dan memanggil icon blog. Pastikan juga ukuran iconnya 512x512, dan untuk icon android anda rename saja menjadi android-icon-512x512.png.

Jika persyaratan diatas sudah terpenuhi semua, maka selanjutnya bisa ikuti langkah-langkah penerapannya seperti dibawah ini.

Langkah 1 : Upload Icon Blog

Supaya bisa berfungsi secara normal, maka anda harus menyimpan / hosting icon blog ke github. Bagaimanakah caranya? silahkan simak berikut ini :

  1. Upload icon blog di favicon-generator.org
  2. Jika sudah, unduh icon yang sudah anda upload tadi.
  3. Lalu extract filenya, dan hapus file yang tidak diperlukan seperti manifest.json dan browserconfig.xml
  4. Kemudian buat Repo baru di github, upload semua icon yang kurang lebih 26 icon.

Langkah 2 : Membuat Worker di Cloudflare

Tahap berikutnya anda harus membuat 4 worker yang ada di cloudflare untuk mempermudah membuat ROUTE yang nantinya disimpan dengan nama worker dan blog, contohnya: main-mui, manifest-mui, serviceworker-mui, dan offline-mui.

Membuat Worker Main-mui

  1. Klik Worker, pilih Create New Worker
  2. Hapus script yang sudah ada dan gantikan dengan script dibawah ini. (Ubah yang saya tandai dengan nama Repo Github anda)
    addEventListener("fetch", event => {
      event.respondWith(handleRequest(event))
    })
    
    //const BUCKET_NAME = "main"
    const BUCKET_URL = `https://raw.githubusercontent.com/cdnblogger/icon-mui`
    
    async function serveAsset(event) {
      const url = new URL(event.request.url)
      const cache = caches.default
      let response = await cache.match(event.request)
    
      if (!response) {
        response = await fetch(`${BUCKET_URL}${url.pathname}`)
        const headers = { "cache-control": "public, max-age=14400" }
        response = new Response(response.body, { ...response, headers })
        event.waitUntil(cache.put(event.request, response.clone()))
      }
      return response
    }
    
    async function handleRequest(event) {
      if (event.request.method === "GET") {
        let response = await serveAsset(event)
        if (response.status > 399) {
          response = new Response(response.statusText, { status: response.status })
        }
        return response
      } else {
        return new Response("Method not allowed", { status: 405 })
      }
    }
  3. Kemudian Save and Deploy kemudian klik tombol back dan Rename dengan nama main-namablog seperti contoh sebelumnya yaitu main-mui

Membuat Worker Manifest.json

Seperti langkah sebelumnya, simpan kode dibawah ini Create New Worker  > Save and Deploy kemudian jangan lupa Rename menjadi manifest-namablog, seperti contoh yang sudah admin berikan sebelumnya manifest-mui

addEventListener("fetch", event => {
  const data = {
    name: "MUI Parakansalak",
    short_name: "MUI Parakansalak",
    display: "standalone",
    prefer_related_applications: false,
    start_url: ".",
    scope: "\/",
    background_color: "#fff",
    theme_color: "#007634",
    description: "Web Official MUI Kecamatan Parakansalak.",
    icons:[
      {
      src: "\/main\/android-icon-36x36.png",
      sizes: "36x36",
      type: "image\/png",
      density: "0.75",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-48x48.png",
      sizes: "48x48",
      type: "image\/png",
      density: "1.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-72x72.png",
      sizes: "72x72",
      type: "image\/png",
      density: "1.5",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-96x96.png",
      sizes: "96x96",
      type: "image\/png",
      density: "2.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/apple-icon-144x144.png",
      sizes: "144x144",
      type: "image\/png",
      density: "3.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-192x192.png",
      sizes: "192x192",
      type: "image\/png",
      density: "4.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-512x512.png",
      sizes: "512x512",
      type: "image/png",
      density: "4.0",
      purpose: "any maskable"
      },
    ]
  }

  const json = JSON.stringify(data, null, 2)

  return event.respondWith(
    new Response(json, {
      headers: {
        "content-type": "application/json;charset=UTF-8"
      }
    })
  )
})

Perhatikan yang sudah saya blok! silahkan ganti dan sesuaikan dengan blog anda. Untuk kode warna harap dicatat karena nantinya akan digunakan di blog.

Membuat Serviceworker

Seperti pada langkah-langkah sebelumnya, silahkan buat worker baru dengan cara menyimpan kode dibawah ini. Create New Worker > Save and Deploy kemudian Rename menjadi serviceworker-namablog contohnya serviceworker-mui

const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/offline.html";
function createCacheBustedRequest(a){let b=new Request(a,{cache:"reload"});if("cache"in b)return b;let c=new URL(a,self.location.href);return c.search+=(c.search?"&":"")+"cachebust="+Date.now(),new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return caches.open(CURRENT_CACHES.offline).then(function(b){return b.put(OFFLINE_URL,a)})}))}),self.addEventListener("activate",a=>{let b=Object.keys(CURRENT_CACHES).map(function(a){return CURRENT_CACHES[a]});a.waitUntil(caches.keys().then(a=>Promise.all(a.map(a=>{if(-1===b.indexOf(a))return console.log("Deleting out of date cache:",a),caches.delete(a)}))))}),self.addEventListener("fetch",a=>{("navigate"===a.request.mode||"GET"===a.request.method&&a.request.headers.get("accept").includes("text/html"))&&(console.log("Handling fetch event for",a.request.url),a.respondWith(fetch(a.request).catch(a=>(console.log("Fetch failed; returning offline page instead.",a),caches.match(OFFLINE_URL)))))});

`

async function handleRequest(request) {
  return new Response(js, {
    headers: {
      "content-type": "application/javascript;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

Membuat Worker Offline

Langkah ini juga sama seperti langkah-langkah sebelumnya yaitu simpan kode dibawah ini Create New Worker > Save and Deploy kemudian Rename menjadi offline-namablog contohnya seperti offline-mui yang sudah saya jelaskan diatas.

const html = `<!DOCTYPE html>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
</head>
<body style=" background: #E8EAF6; ">
<div style=" margin: 0 auto; max-width: 1000px; text-align: center; padding-top: 100px; color: #111; ">
<div style=" font-family: Arial,Helvetica,sans-serif; font-size: 50px; ">Oops, You're Offline!</div>
<div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">It looks like your network connection isn't working right now.</div>
</div> </body>`

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

Langkah 3 : Membuat Route

Sekarang klik Worker > Add Route dan jangan lupa sesuaikan nama blog anda dengan worker yang sudah anda buat tadi. Berikut ini penjelasannya:

  • Masukan www.muiparakansalak.or.id/main/* untuk main-mui
  • Masukan www.muiparakansalak.or.id/manifest.json untuk manifest-mui
  • Masukan www.muiparakansalak.or.id/serviceworker.js untuk serviceworker-mui
  • Masukan www.muiparakansalak.or.id/offline.html untuk offline-mui

Sebelum lanjut, silahkan coba linknya satu-persatu untuk mengetahui apakah ada kesalahan atau tidak. Untuk melihat icon tambahkan nama filenya, contoh www.muiparakansalak.or.id/main/apple-icon-57x57.png jika bisa terbuka berarti tutorial diatas berhasil anda lakukan.

Langkah 4 : Edit Template Blogger

Pastikan anda sudah berada didalam menu blogger, lalu pilih Tema > Edit HTML dan simpan meta tag berikut ini tepat dibawah <head> (Jika terdapat kode yang sama, silahkan hapus meta tag yang lama tersebut dan ganti dengan yang baru ini)

<link href='/main/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57' />
<link href='/main/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60' />
<link href='/main/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72' />
<link href='/main/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76' />
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114' />
<link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120' />
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='144x144' />
<link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152' />
<link href='/main/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180' />
<link href='/main/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png' />
<link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png' />
<link href='/main/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png' />
<link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png' />
<meta content='#007634' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#007634' name='theme-color' />
<link href='/manifest.json' rel='manifest' />

Kemudian simpan juga Javascript berikut ini diatas kode </body>

<script>
//<![CDATA[
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js').then(registration => {
      }).catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
    });
  }
//]]>
</script>
Fernn.id juga telah menerapkan tutorial ini, untuk mengetahui detailnya silahkan akses blog ini menggunakan browser chrome di smartphone anda, lalu klik menu "Tambahkan ke Layar Utama".

Penutup

Untuk melihat hasil akhir apakah berhasil atau tidak, silahkan simpan template yang sudah anda edit tadi, kemudian refresh halaman blog anda dengan membukanya melalui browser android. Jika kurang jelas dengan tutorial yang saya berikan diatas, mohon tunggu tutorial berupa video yang insya allah akan saya upload minggu-minggu ini.

Mungkin sekian dulu artikel dari Cara Mengaktifkan PWA (Progressif Web App) di Blogger Non AMP, jika ada pertanyaan silahkan ajukan melalui kolom komentar yang tersedia dibawah artikel ini. Semoga bermanfaat dan
Terimakasih

Referensi:
www.kompiajaib.com
www.kang-ismet.com

SUPPORT US Dukung admin untuk terus berkarya dan selalu membagikan sesuatu yang bisa bermanfaat bagi orang banyak.
[Menyalin] kode AMP