Mengaktifkan PWA pada Blog 2 Versi - AMP dan Non AMP
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
danmanifest.json
- Buat Repo baru di GitHub, upload semua icon (kurang lebih 26 icon)
Langkah ke-2: Membuat Worker di Cloudflare
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 })
}
}
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.json
untukmanifest-mui
- masukan
www.muiparakansalak.or.id/serviceworker.js
untukserviceworker-mui
- masukan
www.muiparakansalak.or.id/offline.html
untukoffline-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
Video
Untuk video Tutorial menyusul 😁
Referensi:
www.kompiajaib.com
www.marwanto606.com
19 komentar
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.
image quote pre code
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 😊🙏🙏🙏
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>
Smooth nya ga tahan.
<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>