Cara Membuat Blog Menjadi Progressive Web App (PWA)

PWA atau Progressive Web App merupakan sebuah tool yang dapat membuat halaman web atau blog biasa (Statis) menjadi / menyerupai aplikasi yang dapat di
Gambar Cara Membuat Blog Menjadi Progressive Web App (PWA) - Nurul Huda

Pada kesempatan ini saya memberikan panduan bagaimana cara membuat blog statis menjadi progresif atau yang lebih dikenal dengan PWA (progresssive web app).

Sebenarnya PWA ini sudah sempat menjadi trending dibeberapa bulan yang lalu, namun, jika ada yang masih belum mengetahui tentang apa itu PWA? Jangan khawatir akan saya jelaskan kembali secara singkat tentang apa itu PWA.

Tentang Progressive Web App (PWA)

PWA atau Progressive Web App merupakan sebuah tool yang dapat membuat halaman web atau blog biasa (statis) menjadi / menyerupai aplikasi yang dapat diinstal pada hampir semua jenis perangkat dan Operating System (OS) seperti Windows, Android, IOS, dll.

Kelebihan Progressive Web App (PWA)

Seperti namanya Progressive Web App (PWA) tool tersebut mampu membuat halaman statis menjadi sebuah aplikasi yang progressive / menyesuaikan secara automatis terhadap jenis operating system dan perangkatnya. Supaya lebih jelas silahkan disimak penjelasan karakteristik Progressive Web App (PWA) yang menjadi kelebihannya:

  1. Progressive seperti yang telah saya jelaskan diatas kelebihan Progressive Web App (PWA) adalah mampu bekerja hampir di semua os dan jenis perangkat (desktop, tablet, posel, dll.)
  2. Responsive secara automatis akan menyesuaikan ukuran layar perangkat.
  3. App-like menjadi lebih sukai karena ringan namun tetap memberikan pengalaman interaksi dan navigasi aplikasi.
  4. Installable memungkinkan pengguna untuk melakukan instalasi aplikasi ke home screen tanpa harus ribet - ribet melalui toko seperti playstore appstore dll.
  5. Connectivity independent Service Workers artinya dapat berkerja pada kualitas jaringan rendah bahkan saat offline sekalipun.
  6. Safe mendukung jaringan https untuk memberikan keamanan dan memastikan konten didalamnya tidak rusak.
  7. Fresh selalu uptodate sesuai dengan situs web dan blog aslinya.
  8. Re-engageable mudah untuk berinteraksi seperti adanya fitur push notifikasi.
  9. Linkable mudah dishare lewat URL tanpa perlu melakukan instalasi.

Cara Membuat Blog Menjadi Progressive Web App (PWA)

Setelah anda mengetahui tentang karakteristik dan kelebihan Progressive Web App (PWA) serta tertarik untuk menerapkannya di situs blog anda silahkan anda simak penjalasan berikut ini.

Sebelum anda memutuskan untuk mengikuti panduan ini pastikan anda telah melakukan Cara Meningkatkan Performa Blog dengan Konfigurasi DNS Cloudflare dan Cara Membuat dan Menambahkan Meta Tags Icon di Blog AMP dan Non - AMP jika belum mengikuti panduan itu silahkan abaikan panduan ini karena sudah dipastikan anda akan mengalami kesulitan.

Jika anda telah mengikuti ke 2 panduan saya diatas yaitu: Cara Meningkatkan Performa Blog dengan Konfigurasi DNS Cloudflare dan Cara Membuat dan Menambahkan Meta Tags Icon di Blog AMP dan Non - AMP sekarang lanjut pada panduan cara membuat Progressive Web App (PWA) silahkah anda log in pada akun Cloudflare anda dan buatlah 4 worker seperti panduan berikut ini.

Worker 1
Pertama: Pada menu worker silahkan pilih create a new worker.

Kedua: Hapus semua script yang ada dan silahkan ganti dengan script di bawah ini:

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

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/hudaleres/icon-nurulhuda.id`

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 })
  }
}

Ketiga: silahkan anda klik save and deploy lalu pilih tombol back dan rename menenjadi: main-namablog contoh main-nurulhuda dan klik simpan.

Worker 2
Lalukan seperti pada langkah pembuatan worker 1, yaitu: create a new worker hapus semua script yang ada lalu ganti dengan script yang ada dibawah ini kemudian klik Save and Deploy lalu back dan rename menjadi manifest-namablog contoh manifest-nurulhuda.

addEventListener("fetch", event => {
  const data = {
    name: "Nurul Huda",
    short_name: "Nurul Huda",
    display: "standalone",
    prefer_related_applications: false,
    start_url: ".",
    scope: "/",
    background_color: "#fefefe",
    theme_color: "#fefefe",
    description: "Saluran informasi edukatif tentang manajemen dan bisnis digital finansial teknologi blockchain industri dan investasi cryptocurrency",
    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"
      }
    })
  )
})

Worker 3
Lakukan langkahnya seperti langkah di atas pembuatan worker 1. Namun, jangan lupa ganti scriptnya dengan script yang ada dibawah ini dan rename menjadi serviceworker-namablog contoh serviceworker-nurulhuda.

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))
})

Worker 4
Caranya masih sama seperti pada langkah pembuatan worker 1 ganti semua scriptnya dengan script yang ada dibawah ini dan rename menjadi offline-namablog contoh offline-nurulhuda.

const html = `<!DOCTYPE html>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
</head>
<body style=" background: #fefefe; ">
<div style=" margin: 0 auto; max-width: 1000px; text-align: center; padding-top: 100px; color: #262d3d; ">
<div style=" font-family: Poppins,sans-serif; font-size: 50px; ">Oops, You're Offline!</div>
<div style=" font-family: Noto Sans,sans-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))
})

Sampai disini anda telah selesai membuat 4 worker salanjutnya silahkan anda membuat route pada worker tersebut caranya:

Pertama: Pilih menu worker lalu Add route pada kolom pertama silahkan anda isi www.namablog.id/main/* pada kolom Kedua pilih main-namablog.

Kedua: Caranya sama seperti langkah pertama pilih worker lalu add route pada kolom pertama silahkan anda isi: www.namablog.id/manifest.json pada kolo kedua pilih manifest-namablog.

Ketiga: lakukan langkah yang sama seperi langkah 1 namun pada kolom pertama silahkan diisi www.namablog.id/serviceworker.js pada kolom kedua silahkan pilih serviceworker-namablog.

Keempat: lakukan seperti pada langkah 1 namun pada kolom pertama silahlan anda isi www.namablog.id/offline.html pada kolom kedua pilih offline-namablog.

Setelah anda berhasil membuat worker dan membuat route ada satu langkah lagi yaitu memasukan script kedalam html blog anda.

Pertama: Silahkan masuk edit html, dan simpan kode di bawah ini di bawah kode <head> atau sejenisnya.

<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>

Kedua: Silahkan anda simpan juga javascript di bawah ini tepat di atas kode </body> atau sejenisnya.

<amp-install-serviceworker data-iframe-src='/offline.html' layout='nodisplay' src='/serviceworker.js'/>

Ketiga: Klik save / simpan tema.

Sampai disini anda telah berhasil membuat blog anda menjadi progressive web app (PWA), semoga berhasil jika masih mengalami kesulitan silahkan ditanyakan pada kolom komentar. Silahkan anda share artikel ini jika menurut anda bermanfaat. Terima kasih

Diperbolehkan bagi anda yang ingin menyalin artikel yang ada diblog ini, dengan syarat mencantumkan sumbernya berupa link aktif yang merujuk pada konten aslinya. Blog anda tidak akan dihapus, deindex dan adsense anda tidak akan menerima keluhan hak cipta dari saya.