Mengaktifkan PWA pada Blog 2 Versi - AMP dan Non AMP

0 views

Setelah saya coba mengaktifkan PWA pada blog ini, yang mempunyai 2 versi tampilan yaitu AMP dan Non AMP. Jujur saya katakan, saya mengalami 3 kali gagal karena salah memamahami tutorial.

Sebetulnya untuk mengaktifkan PWA pada Blog dengan 2 versi tampilan yaitu AMP dan Non AMP, tutorialnya sama dengan mengaktifkan PWA pada Blogger AMP HTML yang di tulis Kang Adhy. Akan tetapi karena tutorialnya bolak balik dengan tutorial Blog Marwanto606 Cara Membuat Blog Blogger Support PWA, agak sulit memahaminya karena bulak balik dua blog 😁. Setelah meminta izin ke-duanya, saya akan coba rangkum disini.

Persiapan

Sebelum mengaktifkan PWA, ada beberapa hal yang harus dipersiapkan

  1. Harus Sudah punya Akut GitHUb
  2. Management DNS Blog harus melewati Cloudflare
  3. Siapkan juga icon Blog dengan ekstensi .png ukuran 512x512. Kasih nama filenya android-icon-512x512.png

Langkah Pertama: Upload Icon

  1. Upload Gambar di favicon-generator.org
  2. Download dan Ekstark file icon, hapus yang tidak perlu, yaitu browserconfig.xml dan manifest.json
  3. Buat Repo baru di GitHub, upload semua icon (kurang lebih 26 icon)

Langkah ke-2: Membuat Worker di Cloudflare

Dibawah ini kita akan membuat 4 worker, untuk memudahkan membuat ROUTE nantinya simpan dengan nama worker dan blog, contoh:
main-mui
manifest-mui
serviceworker-mui
offline-mui

Main Worker

  1. Klik Worker > Create a new worker
  2. Hapus script yang ada, ganti dengan script ini (ganti yang ditandai dengan nama Repo Anda)

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

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://raw.githubusercontent.com/cdnblogger/icon-mui`

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 })
  }
}
  • Save and Deploy kemudian klik tombol back dan Rename simpan dengan nama main-namablog contoh main-mui

    Manifest.json

    Seperti langkah sebelumnya, simpan kode di bawah ini Create a worker > Save and Deploy > Rename menjadi manifest-namablog contoh manifest-mui

    addEventListener("fetch", event => {
      const data = {
        name: "MUI Parakansalak",
        short_name: "MUI Parakansalak",
        display: "standalone",
        prefer_related_applications: false,
        start_url: ".",
        scope: "\/",
        background_color: "#fff",
        theme_color: "#007634",
        description: "Web Official MUI Kecamatan Parakansalak.",
        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"
          }
        })
      )
    })

    perhatikan yang diblok, ganti dan sesuaikan dengan Blog kalian. Untuk kode warna harap di catat karena nati akan digunakan di blog.

    Serviceworker

    Seperti langkah di atas, simpan kode di bawah ini (tidak perlu diedit) Create a worker > Save and Deploy > Rename menjadi serviceworker-namablog contoh serviceworker-mui

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

    Offline

    Seperti langkah di atas, simpan kode di bawah ini (tidak perlu diedit) Create a worker > Save and Deploy > Rename menjadi offline-namablog contoh offline-mui

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

    Langhkah ke-3: Membuat Route

    Klik Worker > Add route (sesuaikan dengan nama blog dan worker)

    • masukan www.muiparakansalak.or.id/main/* untuk main-mui
    • masukan www.muiparakansalak.or.id/manifest.json untuk manifest-mui
    • masukan www.muiparakansalak.or.id/serviceworker.js untuk serviceworker-mui
    • masukan www.muiparakansalak.or.id/offline.html untuk offline-mui

    Coba buka linknya satu-persatu, untuk icon tambahkan nama file ex: www.muiparakansalak.or.id/main/apple-icon-57x57.png untuk yang lainnya tinngal dibuka, kalau bisa terbuka berarti tidak ada masalah.
    Selesai dengan urusan Cloudflare, sekarang tinggal setting di blog.

    Langhkah ke-4: Edit Blog

    1. Masuk ke Edit HTML, Simpan kode ini di area <head>, hapus file serupa yang sudah ada

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

    silahkan edit, warna thema sesuai manifest.json

    2. Simpan JS Serviceworker AMP HTML masih di area <head> atau di atas </head>

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

    3. Simpan kode ini di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan sejenisnya

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

    4. Simpan Template, dan Reload.. coba juga buka di Android

    Video

    Untuk video Tutorial menyusul 😁

    Referensi:
    www.kompiajaib.com
    www.marwanto606.com