Ditulis oleh: Ditulis pada: 4/14/2021
Mengaktifkan PWA Pada Blogger Non AMP - Sebelumnya saya sudah berhasil mengaktifkan PWA pada Blogger AMP HTML, dan sekarang saya juga berhasil mengaktifkan PWA pada Blogger non AMP. Sebenarnya trik mengaktifkan PWA pada blog non AMP ini sudah dibahas di blog Marwanto606, namun masih ada sedikit masalah yaitu tidak muncul notifikasi install app secara otomatis di mobile.
Untuk itu kemudian saya mencoba menggunakan kode lain untuk sw.js dan akhirnya notifikasi install app di mobile berhasil muncul. Sementara untuk langkah-langkahnya tetap sama seperti yang dibagikan di blog Marwanto606, namun ada penambahan langkah pembuatan halaman offline.
Jika Anda ingin mencoba mengaktifkan PWA di blog non AMP Anda, hal pertama yang harus dilakukan yaitu menghubungkan domain blognya dengan CloudFlare. Jika blog Anda belum terhubung dengan CloudFlare, silahkan ikuti postingan Tingkatkan Performa Blog Dengan DNS Cloudflare ini, dan yang harus diperhatikan yaitu biarkan awan proxy tetap menyala, tidak perlu dialihkan ke awan abu-abu atau DNS only.
Setelah blognya terhubung dengan CloudFlare, silahkan ikuti postingan blog Marwanto606 berikut untuk membuat blog support PWA.
Silahkan ikuti langkah-langkahnya sampai langkah ketiga.
Nah pada langkah ketiga bagian kedua untuk pembuatan worker2 untuk manifest.json, silahkan gunakan kode berikut.
addEventListener("fetch", event => {
const data = {
name: "Nulis Info",
short_name: "Nulis Info",
display: "standalone",
prefer_related_applications: false,
start_url: ".",
scope: "\/",
background_color: "#fff",
theme_color: "#01579b",
description: "Teknologi telah menjadi bagian hidup dan lifestyle manusia. Hidup sehat juga kembali populer dan berkembang menjadi trend lifestyle milenial.",
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"
},
],
"serviceworker": {
"src": "/sw.js"
}
}
const json = JSON.stringify(data, null, 2)
return event.respondWith(
new Response(json, {
headers: {
"content-type": "application/json;charset=UTF-8"
}
})
)
})Sesuaikan kode-kode yang ditandai agar sesuai dengan blog Anda.
Kemudian untuk pembuatan worker pada langkah selanjutnya untuk sw.js, silahkan gunakan kode berikut, tidak ada kode yang perlu disesuaikan.
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))
})Nah, sebelum membuat route silahkan buat lagi satu worker untuk membuat halaman offline dengan menggunakan kode di bawah ini, lalu silahkan rename worker ini menjadi worker4.
const html = `<!DOCTYPE html>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
</head>
<body style=" background: #fff; ">
<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))
})Kemudian silahkan ikuti langkah selanjutnya yaitu membuat route untuk worker-worker yang tadi dibuat.
Kemudian buat juga route untuk worker4 tadi yang terakhir dibuat, buat www.domainanda.com/offline.html
Selanjutnya ikuti langkah untuk penambahan kode di bawah <head>, perhatikan jika sebelumnya di tema sudah ada beberapa kode yang mirip seperti itu untuk ikon-ikon blog, silahkan hapus dan ganti dengan kode yang disediakan. Begitu pun untuk kode manifest.json jika sebelumnya sudah pernah buat, silahkan hapus juga.
Kemudian langkah penambahan kode di atas </body> ganti dengan kode berikut.
<script>
//<![CDATA[
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').then(registration => {
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
//]]>
</script>Selesai, sekarang silahkan save edit HTML lalu reload blognya untuk melihat penampakan PWA. Akan muncul ikon install app di sisi kanan address bar browser seperrti gambar berikut.
Untuk mencoba melihat PWA pada Blogger non AMP ini, silahkan lihat di blog Nulis Info, silahkan coba akses dengan perangkat mobile untuk melihat notifikasi install app yang akan otomatis muncul di bagian bawah blog.
Referensi manifest.json dan sw.js dari blog Thehackernews.com
Bagi yang masih bingung cara buat repo Github dan Worker di CloudFlare, saya buatkan video prakteknya, silahkan ikuti langkah-langkahnya agar tidak ada kesalahan.