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

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

Video

Untuk video Tutorial menyusul 😁

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

19 komentar

Info

Konversi Kode

Disqus

1. Komentar ini, diurutkan dari yang terbaru
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.

Aman Bhattarai 5/16/2022 10:25:00 PM

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

Hapus Komentar
SERATUS.XYZ template controler 11/28/2021 08:43:00 AM

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 😊🙏🙏🙏

Hapus Komentar
Maftuhi.web.id 9/08/2021 10:03:00 AM

alhamdulilah kang ismet balik lg ngeblog.

Hapus Komentar
Admin 8/09/2021 11:52:00 PM

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

Hapus Komentar
Mujib Maulana 8/07/2021 07:41:00 PM

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

Hapus Komentar
- Hapus Balasan
  
  Unknown 9/16/2021 08:04:00 PM
  
  Untuk non AMP bisa lihat postingan marwanto606 pak
Unknown 5/31/2021 12:25:00 PM

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

Hapus Komentar
Widodo 5/30/2021 04:24:00 PM

keren tutornya kang

Hapus Komentar
wendy 5/28/2021 07:03:00 AM

Tanya kang. Untuk yang pakai subdomain bisa gak ya? Soalnya kmren saya sudah coba di blog saya yang pakai subdomain sampai sekarang tidak muncul😁

Hapus Komentar
- Hapus Balasan
  
  wendy 5/28/2021 12:31:00 PM
  
  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>
Afriant Ishaq 5/26/2021 01:36:00 PM

Ya Allah makin keren aja templatrnya Kang.

Smooth nya ga tahan.

Hapus Komentar
DhikaMedia 5/26/2021 08:12:00 AM

sudah ngikutin caranya tapi belum berhasil

Hapus Komentar
- Hapus Balasan
  
  wendy 5/28/2021 12:46:00 PM
  
  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>
Mas Dar 5/22/2021 06:28:00 PM

Aku malah di kompiajaib malah gak mudeng mas kalau liat tutorial dari mas langsung paham

Hapus Komentar
- Hapus Balasan
  
  Kang Ismet 5/23/2021 06:35:00 AM
  
  karena tutorialnya bolak-balik ke blog Marwanto606, menghargai pencetus ide..
- Hapus Balasan
  
  Mas Dar 5/23/2021 10:39:00 AM
  
  Ini aku pake cara mas kok error bingung cara host icon nya
- Hapus Balasan
  
  Kang Ismet 5/23/2021 02:46:00 PM
  
  errornya dimana, saya ga liat kan, apa kode salah atau route salah...
Iyang 5/22/2021 12:53:00 PM

Keren kang

Hapus Komentar
- Hapus Balasan
  
  Kang Ismet 5/22/2021 05:30:00 PM
  
  makasih sob

Blog Kang Ismet