How to Fix Origin SSL Certificate Error on PWA on Blogger

Progressive Web App (PWA) - For those of you who have activated PWA on AMP or Non AMP Blogs, of course there are several advantages including easy installation on Android-based phones. Without having to install from PlayStore. However, there are several blogs that have installed or started installing PWA, experiencin Origin SSL Certificate Error, when opening the icon pack.

The problem

This tutorial on how to install PWA I first found from Mas Rizky, whose main source is masrizky.sch.id. After I saw the error problem was on CDN Rawgit.org, which had a problem with the SSL certificate. Please pay attention to the first worker script created, as below, if on Mas Rizky's blog it is called worker3

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

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

Solution

Note the blocked one. This is the problem, for the solution please use another CDN such as Statically , Githack or JsDelivr . But I personally recommend GitHub Page.

Creating BUCKET_URL with Statically

Change the BUCKET_URL line to something like this, for example

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

Creating BUCKET_URL with GitHubPage

Creating a BUCKET_URL is indeed more complicated, but in my opinion it is more personal. For those who are interested, please follow the steps

1. You must have a GitHub Page. If you don't have one, please visit: The Easiest Way to Create a Github Page
2. Create an icon/main/ folder in Github, here's how:
Open the GitHub Page Repo, then Add File > fill in icon/main/index.html, leave it blank then Commit changes.
Then the icon/main/ folder has been created
3. Upload All icons in the main folder.
4. Done

Edit Worker

After you have finished uploading the icon, please edit the complete worker script to look like this.

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

Pay attention to the writing format in the blocked text / Github Page URL + icon

Conclusion

SSL Error Occurred on RawGit.org CDN, please replace with another CDN, I made two alternatives.

1. With Statically CDN, change the BUCKET_URL prefix to https://cdn.statically.io/gh/
2. Using GitHub Page, by adding the file to the icon/main/index.html. page . Then upload the icon to the main folder, and the last step, edit the Script Worker

Please choose which one you like, hopefully it is useful......