Cara Membuat Blog Blogger Support PWA

Cara Membuat Blog Blogger Support PWA - Setelah sebelumnya saya menulis artikel tentang Kenalan dengan PWA (Progressive Web Apps) dan Mengintegrasikan Custom Domain Blogger Dengan Cloudflare. Artikel kali ini juga masih merupakan sambungan bagian dari artikel sebelumnya, dan merupakan tutorial terakhir nya yang bertujuan membuat blog kalian yang di hosting oleh blogger dan sudah terpasang cloudflare menjadi support PWA dan dapat di install selayaknya aplikasi mobile atau desktop software.

Nah untuk tutoral kali ini, pastikan blog kalian sudah terpasang cloudflare ya. karena dengan cloudflare yang akan menjembatani asset yang akan di akses oleh blog seolah-olah langsung melalui blogger dengan bantuan worker yang ada di cloudflare. berbeda dengan CMS seperti wordpress selfhosted, yang dimana kita dapat mengelola file asset secara langsung sehingga membuat wordpress sefthosted menjadi support PWA jauh lebih mudah karena juga sudah tersedia plugin PWA yang dapat langsung dipasangkan seperti SuperPWA dll. Untuk membuat blogger support pwa caranya jauh sedikit lebih rumit karena blogger sendiri belum menyediakan fasilitas ini, jadi tutorial ini merupakan tutorial unofficial yang dapat dicoba untuk membuat blogger support pwa.

Persiapan :

• akun dan repo di github untuk menyimpan asset nya ex: https://github.com/marwanto606/icon-blog
• buat 1 icon/logo (ukuran 512x512 pixel) dari blog kalian yang akan digunakan sebagai assets yang akan digenerate ukuran lainnya secara automatis nantinya.
• buat sebuah halaman pada blog kalian beri judul dan isi nya offline lalu publikasikan sehingga url nya akan menjadi /p/offline.html

Tutorial pemasangan:

Tahapan pertama membuat icon apps

1. generate dahulu logo yang akan digunakan sebagai favicon dan icon apps nya di sini
2. klik Choose File kemudian cari logo yang sudah kalian punya
3. klik Create Favicon untuk memulai proses pembuatan icon dalam berbagai ukurannya.
4. jika proses sudah selesai sekarang tinggal di download file .zip icon nya
5. ekstrack file zip nya didalamnya sudah ada berbagai ukuran icon apps kalian
6. ubah nama icon 512x512px yang kalian buat menjadi android-icon-512x512

Tahapan kedua upload semua icon ke dalam repo github

• pertama kalian buat dulu repository pada akun github kalian, atur kurang lebih seperti gambar dibawah ini
• kemudian kalian masuk ke repo yang barusan kalian buat, klik Add file > Upload files
• Klik pada chose your file untuk mencari file icon nya pada komputer, lalu klik ok setelah proses upload seselai klik commit changes.
• Tahapan kedua selesai sekarang semua icon sudah tersimpan di github.

Tahapan ketiga membuat worker di cloudflare

nah di tahapan ketiga ini yang sedikit lebih jelimet sedikit. jadi perlu sedikit ketelitian ya.

• Pertama kalian masuk ke akun cloudflare kalian, kemudian klik menu Workers
• Disini kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
• Dibagian kedua kalian diminta untuk memilih Plan, pilih yang Free saja :d Continue with Free
• Selanjutnya klik Create a Worker
• lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

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

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/marwanto606/icon-blog`

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

• Ganti marwanto606/icon-blog sesuai username dan repository github kalian ya.
• lalu klik Save and Deploy
• Script diatas berfungsi untuk menyajikan asset icon yang sudah ada di github dapat di akses melalui domain blog. ex : https://www.marwanto606.com/main/android-icon-192x192.png
• Selanjutnya Rename (ubah nama) worker nya menjadi worker3 agar nanti tidak bingung saat hendak membuat route nya
• klik pada worker > klik Rename > rubah nama menjadi worker3 > Rename and Deploy
• Kita buat lagi sebuah worker klik Create a Worker
• lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

Rubah Marwanto606 sesuai nama blog kalian, update pembaruan code manifest.json lainnya dapat kalian baca di : Menampilkan Notifikasi Install PWA di Blogger

addEventListener("fetch", event => {
  const data = {
    name: "Marwanto606",
    short_name: "Marwanto606",
    display: "standalone",
    prefer_related_applications: false,
    start_url: ".",
    scope: "\/",
    background_color: "#007fa0",
    theme_color: "#007fa0",
    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"
      }
    })
  )
})

• lalu klik Save and Deploy
• Script diatas adalah file manifest.json yang akan digunakan di blog ex : https://www.marwanto606.com/manifest.json
• rubah juga nama worker nya klik pada worker > klik Rename > rubah nama menjadi worker2 > Rename and Deploy.
• Kita buat lagi sebuah worker klik Create a Worker
• lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

Pastikan /p/offline.html sesuai dengan halaman offline untuk blog kalian yang kalian buat diatas,

const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/p/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))
})

• lalu klik Save and Deploy
• Script diatas adalah file service worker yang akan digunakan di blog ex : https://www.marwanto606.com/sw.js
• rubah juga nama worker nya klik pada worker > klik Rename > rubah nama menjadi worker > Rename and Deploy.
• Sekarang tinggal membuat route untuk ketiga worker diatas, klik pada menu Workers > klik add route.
• Masukkan route www.marwanto606.com/main/* untuk worker3
• Masukkan route www.marwanto606.com/manifest.json untuk worker2
• Masukkan route www.marwanto606.com/sw.js untuk worker
• Ganti marwanto606.com sesuai doamian kalian ya.
• cek apakah semua asset diatas sudah dapat diakses dengan benar melalui domain kalian.
• jika sudah, tambahkan script dibawah ini taruh di bawah <head> pada template blog kalian

  <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='#007fa0' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#007fa0' name='theme-color' />
<link href='/manifest.json' rel='manifest' />
  

• lalu, tambah kan script di bawah ini taruh diatas </body> pada template blog kalian

<script type='text/javascript'>
  //<![CDATA[
if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/sw.js')
           .then(function() { console.log("Service Worker Registered"); });
}
</script>

• Script diatas untuk meregiter service worker pada browser user saat blog kalian di akses pertama kali oleh user.
• kalian bisa menambah kata" untuk halaman offline kalian misalnya "kalian sedang dalam mode offline, silahkan aktifkan koneksi internet untuk dapat membaca artikel di blog ini!!!"
• Selesai.

Baca lanjutannya : Cara Membuat Tombol Install PWA Blogger

Untuk pengguna template AMP (Accelerated Mobile Pages) bisa kalian baca kelanjutannya di blog kompiajaib : https://www.kompiajaib.com/2021/04/mengaktifkan-pwa-pada-blogger-amp-html.html