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.
- Dengan CDN Statically,merubah awalan BUCKET_URL menjadi
https://cdn.statically.io/gh/
- Menggunakan GitHub Page, dengan menambahkan file pada halaman icon/main/index.html. Kemudian upload icon di folder main, dan langkah terakhir, edit Script Worker
9 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code