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.xmldanmanifest.json - Buat Repo baru di GitHub, upload semua icon (kurang lebih 26 icon)
Langkah ke-2: Membuat Worker di Cloudflare
main-muimanifest-muiserviceworker-muioffline-muiMain 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 })
}
}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/*untukmain-mui - masukan
www.muiparakansalak.or.id/manifest.jsonuntukmanifest-mui - masukan
www.muiparakansalak.or.id/serviceworker.jsuntukserviceworker-mui - masukan
www.muiparakansalak.or.id/offline.htmluntukoffline-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>--></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