Mengatasi Origin SSL Certificate Error pada PWA di Blogger

Progressive Web App (PWA) - Bagi Anda yang sudah mengaktifkan PWA pada Blog AMP atau Non AMP, tentunya ada beberapa kelebihan diantaranya mudah diinstal di ponsel berbasis Android. Tanpa harus menginstal dari PlayStore. Akan tetapi ada beberapa blog yang sudah terinstal atau mulai menginstal PWA, mengalami Origin SSL Certificate Error, ketika membuka icon pack.

Permasalahan

Tutorial cara menginstal PWA ini saya temukan pertama dari KompiAjaib, yang sumber utamanya adalah blog Marwanto606. Setelah saya lihat permasalahan errornya ada pada CDN Rawgit.org, yang mengalami masalah pada sertifikat SSL. Silahkan perhatikan pada scrip worker yang pertama dibuat, seperti di bawah ini, kalau di blog Mas Marwanto disebut worker3

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

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://ghcdn.rawgit.org/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 })
  }
}

Solusi

Perhatikan yang diblok. Inilah masalahnya, untuk solusinya silahkan gunakan CDN yang lain seperti Statically, Githack atau JsDelivr. Tapi saya pribadi lebih merekomendasikan dengan GitHub Page.

Membuat BUCKET_URL dengan Statically

Ganti baris BUCKET_URL menjadi seperti ini, contoh

const BUCKET_URL = `https://cdn.statically.io/gh/kangismet/iconblog`

Membuat BUCKET_URL dengan GitHubPage

Membuat BUCKET_URL dengan memang lebih ribet, tapi menurut saya lebih personal. Bagi yang berminat silahkan ikuti langkah-langkahnya

1. Anda harus punya Halaman GitHub. Kalau belum silahkan kunjungi : Cara Termudah membuat Github Page
2. Buat folder icon/main/ di Github, caranya :
Buka Repo GitHub Page, kemudian Add File > isikan icon/main/index.html, biarkan kosong kemudian Commit changes.
Maka sudah terbentuk folder icon/main/
3. Upload Semua icon di folder main.
4. Selesai

Edit Worker

Setelah selesai upload icon, silahkan edit script worker lengkapnya menjadi seperti ini.

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

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://nama-halaman-anda.github.io/icon/`

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

Perhatikan format penulisan pada teks yang di blok / URL Github Page + icon

Kesimpulan

Error SSL Terjadi pada CDN RawGit.org, silahkan ganti dengan CDN lain, saya buat dua alternatif.

1. Dengan CDN Statically,merubah awalan BUCKET_URL menjadi https://cdn.statically.io/gh/
2. Menggunakan GitHub Page, dengan menambahkan file pada halaman icon/main/index.html. Kemudian upload icon di folder main, dan langkah terakhir, edit Script Worker

Silahkan pilih mana suka, Semoga bermanfaat...