Mengaktifkan PWA pada Blog 2 Versi - AMP dan Non AMP

Kang Ismet

Mei 20, 2021

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

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

Langkah Pertama: Upload Icon

Upload Gambar di favicon-generator.org
Download dan Ekstark file icon, hapus yang tidak perlu, yaitu browserconfig.xml dan manifest.json
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

Klik Worker > Create a new worker
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 </body> 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

Blog Non AMP

Untuk Blog Non AMP langkahnya sama saja, hanya pada Edit Template lewati langkah 2 dan 3 (JS AMP Serviceworker). Sebagai gantinya simpan kode ini diatas </body>

<script>
//<![CDATA[
if ('serviceWorker' in navigator){window.addEventListener('load',() =>{navigator.serviceWorker.register('/serviceworker.js').then(registration =>{;}).catch(registrationError =>{console.log('SW registration failed:',registrationError);});});}
//]]>
</script>

Video

Untuk video Tutorial menyusul 😁

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

Iyang
Profil: https://www.blogger.com/profile/14972346626319950742
22 Mei, 2021

Keren kang
- Kang Ismet
  Profil:https://www.blogger.com/profile/07706142952405337288
  22 Mei, 2021
  
  makasih sob
Mas Dar
Profil: https://www.blogger.com/profile/03825156171958239756
22 Mei, 2021

Aku malah di kompiajaib malah gak mudeng mas kalau liat tutorial dari mas langsung paham
- Kang Ismet
  Profil:https://www.blogger.com/profile/07706142952405337288
  23 Mei, 2021
  
  karena tutorialnya bolak-balik ke blog Marwanto606, menghargai pencetus ide..
- Mas Dar
  Profil:https://www.blogger.com/profile/03825156171958239756
  23 Mei, 2021
  
  Ini aku pake cara mas kok error bingung cara host icon nya
- Kang Ismet
  Profil:https://www.blogger.com/profile/07706142952405337288
  23 Mei, 2021
  
  errornya dimana, saya ga liat kan, apa kode salah atau route salah...
DhikaMedia
Profil: https://www.blogger.com/profile/00460005822299159474
26 Mei, 2021

sudah ngikutin caranya tapi belum berhasil
- wendy
  Profil:https://www.blogger.com/profile/16414468084218104366
  28 Mei, 2021
  
  jika pakai template non amp coba tambahkan js ini sob
  <script>
  //<![CDATA[
  if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
  navigator.serviceWorker.register('/serviceworker.js').then(registration => {
  }).catch(registrationError => {
  console.log('SW registration failed: ', registrationError);
  });
  });
  }
  //]]>
  </script>
Afriant Ishaq
Profil: https://www.blogger.com/profile/05138011198740500251
26 Mei, 2021

Ya Allah makin keren aja templatrnya Kang.

Smooth nya ga tahan.

wendy
Profil: https://www.blogger.com/profile/16414468084218104366
28 Mei, 2021

Tanya kang. Untuk yang pakai subdomain bisa gak ya? Soalnya kmren saya sudah coba di blog saya yang pakai subdomain sampai sekarang tidak muncul😁
- wendy
  Profil:https://www.blogger.com/profile/16414468084218104366
  28 Mei, 2021
  
  sudah bisa kang setelah tambahkan js ini,
  sebenarnya ini ada di blog kompi ajaib , hanya ubah /sw.js menjadi /serviceworker.js
  <script>
  //<![CDATA[
  if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
  navigator.serviceWorker.register('/serviceworker.js').then(registration => {
  }).catch(registrationError => {
  console.log('SW registration failed: ', registrationError);
  });
  });
  }
  //]]>
  </script>
Widodo
Profil: https://www.blogger.com/profile/03821833848203083148
30 Mei, 2021

keren tutornya kang

Unknown
Profil: https://www.blogger.com/profile/15160717880910911918
31 Mei, 2021

Sir please make a video it is not working for amp and non amp version blogs manifest.jason ssl error

Mujib Maulana
Profil: https://www.blogger.com/profile/01386034762501026825
07 Agustus, 2021

Mang, kode <amp-install-serviceworker data-iframe-src='/offline.html' layout='nodisplay' src='/serviceworker.js'/> bisa di pasang di blog non amp?

Admin
Profil: https://www.blogger.com/profile/11881305794046681424
09 Agustus, 2021

Kalau blog yang berdomain blogspot, bisa tidak mas???

Admin
Profil: https://www.blogger.com/profile/11881305794046681424
09 Agustus, 2021

Komentar ini telah dihapus oleh Admin sebagai penulis.

Maftuhi.web.id
Profil: https://www.blogger.com/profile/08320174566258344518
08 September, 2021

alhamdulilah kang ismet balik lg ngeblog.

Mind Control
Profil: https://www.blogger.com/profile/06297487306494380584
28 November, 2021

Slmt pagi kang Ismet
Sy banyak bljr dr KompiAjaib (kang Adhi) dan kang Ismet, saya blogger baru kang.

Karena hanya punya 1 domain sj, sy hati2 dalam melakukan perubahan, dan saya tidak pakai cloudflare karena Sdh trlanjur setup satu sub domain untuk Hotel dan Ticket kang.

Kan saya sudah host satu sub domain di infinityfree, jadi kalau saya ingin membuat satu landingpage saja yang isinya button2 ke arah link apa bisa kang...?

Mohon arahan dan bimbingan dong 😊🙏🙏🙏

Aman Bhattarai
Profil: https://www.blogger.com/profile/00091337561581738474
16 Mei, 2022

<i rel='pre'></i>

Ririwa Keren
Profil: https://www.blogger.com/profile/04064439729103612638
29 Maret, 2023

kang, saya sudah jalankan sesuai prosedur, kenapa route ga jalan ya? semuanya masih 404
- Kang Ismet
  Profil:https://www.blogger.com/profile/07706142952405337288
  30 Maret, 2023
  
  untuk solusinya, saya sudah buat postingan di sini : https://www.kang-ismet.com/2023/03/mengatasi-route-cloudflare-tidak.html
- Ririwa Keren
  Profil:https://www.blogger.com/profile/04064439729103612638
  30 Maret, 2023
  
  thanks kang. menuju tkp