Cara Aktifkan Mode PWA Untuk Blog Non AMP

Daftar isi [Tampil]
Tutorial Belajar Membuat Icon

Mengaktifkan Mode PWA Pada Blogger Untuk Non AMP HTML - Kompiajaib dan Kang Ismet pun udah pada menggunakan Mode PWA ini, saya kebingungan memahami tutorial yang ada di kompiajaib akan tetapi alhamdulillah Kang Ismet bisa menjelaskan dengan detail jadi menjadi lebih paham.


 

Tentu saya pada artikel sebelumnya sudah menjelaskan apa yang dimaksud dengan PWA? Langsung aja kalian bisa baca - baca di bawah ini link nya.

Persiapan

Sebelum memulai tutorial nya pastikan blog kalian sudah setting DNS di Cloudfare karena seperti yang dijelaskan pada blog Kompiajaib ajaib kalau untuk mengaktifkan Mode PWA ini harus menggunakan Wokers yang ada di Cloudfare ini. 

Selain itu kalian juga harus memiliki akun github supaya bisa hosting icon blog kalian pada github ini, dan jangan lupa siapkam icon kalian ukuran 512x512 untuk ukuran android kalian kasih nama aja android-icon-512x512.png.

Apabila bahan yang diatas sudah terpenuhi maka selanjutnya bisa ikuti aja langkah - langkah berikut ini, jangan lupa baca alfatikha dan siapkan kopi atau cemilan agar bisa faham tentang tutorial berikut ini.

Langkah 1 : Uploud Icon Blog

Agar bisa berfungsi maka kalian harus hostkan icon blog kalian pada github bagaimana caranya langsung simak aja :

  1. Uploud icon di favicon-generator.org
  2. Kumudian Download Icon nya
  3. Setelah itu Ekstrak Filenya, dan jangan lupa hapus file minifest.json pada template blog kalian
  4. Repot ke Github kemudian uploud semua icon yang telah di exstrak. 


Langkah 2 : Membuat Worker di Cloudflare

Perlu kalian ketahui disini akan membuat 4 Worker yang ada di Cloudflare, biar mudah kasih nama nya main-sdr, minifest-sdr, serceworker-sdr dan offline-sdr. 

Membuat Worker Main-sdr

  1. Klik Worker, pilih Create New Worker
  2. Hapus kode yang ada ganti dengan kode yang ada dibawah ini
  3. 
    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 })
      }
    }
  4. Kemudian Save and Deploly kemudian back, setelah itu ganti menjadi main-sdr

Membuat Worker Minifest-sdr

  1. Klik Worker, pilih Create New Worker
  2. Hapus kode yang ada ganti dengan kode yang ada dibawah ini
  3. addEventListener("fetch", event => {
      const data = {
        name: "Blog Sudar Blogger",
        short_name: "Sudar Blogger",
        display: "standalone",
        prefer_related_applications: false,
        start_url: ".",
        scope: "\/",
        background_color: "#fff",
        theme_color: "#007634",
        description: "Tempat Tutorial dan berbagi ilmu",
        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"
          }
        })
      )
    })
  4. Kemudian Save and Deploly kemudian back, setelah itu ganti menjadi manifest-sdr

Membuat Worker Serviceworker-sdr

Lakukan hal yang sama seperti yag ada diatas jangan lupa ganti namanya menjadi Serviceworker-sdr

const js = `
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
if (workbox) {
workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.core.setCacheNameDetails({
  prefix: 'thn-sw',
  suffix: 'v22',
  precache: 'install-time',
  runtime: 'run-time'
});

const FALLBACK_HTML_URL = '/offline.html';
const version = workbox.core.cacheNames.suffix;
workbox.precaching.precacheAndRoute([{url: FALLBACK_HTML_URL, revision: null},{url: '/manifest.json', revision: null},{url: '/favicon.ico', revision: null}]);

workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());

workbox.routing.registerRoute(
    new RegExp('.(?:css|js|png|gif|jpg|svg|ico)$'),
    new workbox.strategies.CacheFirst({
        cacheName: 'images-js-css-' + version,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxAgeSeconds: 60 * 24 * 60 * 60,
                maxEntries:200,
                purgeOnQuotaError: true
            })
        ],
    }),'GET'
);

workbox.routing.setCatchHandler(({event}) => {
      switch (event.request.destination) {
        case 'document':
        return caches.match(FALLBACK_HTML_URL);
      break;
      default:
        return Response.error();
  }
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches
      .keys()
      .then(keys => keys.filter(key => !key.endsWith(version)))
      .then(keys => Promise.all(keys.map(key => caches.delete(key))))
  );
});

}
else {
    console.log('Boo! Workbox didnt load ');
}
`

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

Kemudian back dan Jangan lupa rename menjadi serviceworker-sdr.

Membuat Worker Offline-sdr

Langkah selanjutnya membuat offline-sdr, seperti langkah diatas Klik Worker, pilih Create New Worker hapus code nya ganti dengan ada yg dibawah

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

Sekarang klik tombol back kemudian rename menjadi offline-sdr.

Langkah 3 : Membuat Route

Kita masih di menu Worker sekarang klik Worker kemudian pilih add router, jangan lupa sesuai kan nama blog dengan Worker. 

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


Jangan lupa coba satu persatu link yang ada apakah berfungsi dengan baik atau tidak misalnya aja link seperti www.sudarblogger.we.id/main/apple-icon-57x57.png agar berfungsi dengan baik atau tidak. 

Langkah 4 : Edit HTML Pada Template

Masuk ke Blogger pilih Tema setelah itu klik edit HTML taruh kode ini tepat di bawah kode <head> jangan lupa hapus kode serupa yang ada pada blog

<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' />

Kemudian taruh JS ini diatas kode </body>

<script type='text/javascript'> //<![CDATA[ if('serviceWorker' in navigator) { navigator.serviceWorker .register('/sw.js') .then(function() { console.log("Service Worker Registered"); }); } </script>

Kemudian Save Template.

Artikel ini saya kutip dari beberapa blog yaitu Kompiajaib, Kang Ismet dan Marwanto606, jika bingun langsung aja kunjungi aja blognya ketiga tersebut.