Ditulis oleh: Ditulis pada: 4/12/2021
Mengaktifkan PWA Pada Blogger AMP HTML - Sebenarnya saya tidak akan mengaktifkan PWA pada Blogger ini karena harus mengaktifkan awan proxy di CloudFlare untuk dapat menggunakan fitur Worker yang dapat membantu Blogger dapat mendukung PWA.
Seperti kita ketahui, ketika kita mengaktifkan awan proxy pada CloudFlare, maka biasanya akan muncul beberapa masalah seperti error 503 sehingga blog tidak bisa diakses.
Namun karena penasaran, maka akhirnya saya mengaktifkan awan proxy agar dapat menggunakan fitur-fitur CloudFlare, salah satunya fitur Worker ini.
Iya, jadi untuk mengaktifkan PWA pada Blogger ini dapat dilakukan dengan bantuan CloudFlare. Untuk itu, 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.
Tutorial dari Marwanto606 tersebut untuk blog NON AMP, sementara untuk blog AMP ada beberapa langkah tambahan untuk menghubungkan dengan komponen amp-install-serviceworker.
Ada sedikit perbedaan antara blog NON AMP dan blog AMP ini yaitu pada blog AMP akan otomatis muncul notifikasi untuk install app atau untuk menambahkan blog pada home screen di mobile, sementara untuk blog NON AMP tidak ada notif otomatis, tapi harus menyediakan tombol untuk install app di mobile.
Muncul notifikasi install app di layar bawah mobile.
Ikon App Kompi Ajaib ter-install di layar utama ponsel.
Untuk desktop, akan muncul ikon install app di sisi kanan address bar browser.
Ikon app Kompi Ajaib pada layar desktop.
Nah untuk blog AMP, jika ingin mengaktifkan PWA (Progressive Web App) silahkan ikuti langkah-langkah berikut.
Sebenarnya langkahnya sama dengan mengaktifkan PWA pada blog NON AMP dari blog Marwanto606 tadi di atas. Silahkan ikuti langkah pertama, kedua, dan ketiga.
Tetapi pada langkah pertama, tidak perlu membuat laman static untuk /p/offline.html
Dan perhatikan pada langkah ketiga pada pembuatan worker ketiga yang di-rename jadi worker, di situ menggunakan kode berikut.
const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/p/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))
})Ganti kode /p/offline.html yang ditandai menjadi /offline.html
Selanjutnya ada tambahan pembuatan worker keempat untuk membuat halaman offline yang dibutuhkan di worker tadi di atas.
Silahkan klik Create a Worker lalu hapus kode yang ada lalu ganti dengan kode berikut.
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))
})Kemudian Save and Deploy lalu rename menjadi worker4.
Halaman offline ini berfungsi ketika pengunjung mengakses app tanpa koneksi internet dan akan muncul halaman seperti berikut.
Kemudian pada langkah selanjutnya untuk membuat route pada worker-worker yang dibuat tadi, perhatikan route untuk worker jangan buat www.domainanda.com/sw.js tapi buat www.domainanda.com/serviceworker.js
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.
<amp-install-serviceworker data-iframe-src='/offline.html' layout='nodisplay' src='/serviceworker.js'/>Selanjutnya tambahkan kode berikut di daerah <head>
<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>Selesai, silahkan save tema lalu cek penampakannya di blog Anda, silahkan reload blognya dan akan muncul ikon install app di sisi kanan address bar browser.
Ketika dicek dengan menggunakan tool lighthouse, PWA akan menyala seperti gambar berikut.
UPDATE
Sekarang PWA untuk Blogger NON AMP sudah dapat memunculkan notifikasi install app secara otomatis di mobile, yang ingin mencobanya silahkan ikuti postingan ini: Mengaktifkan PWA Pada Blogger Non AMP.
Bagi yang masih bingung cara buat repo Github dan Worker di CloudFlare, saya buatkan video prakteknya, silahkan ikuti langkah-langkahnya agar tidak ada kesalahan. Video ini untuk mengaktifkan PWA di blog NON AMP, dan untuk blog AMP HTML sebenarnya caranya sama saja, hanya beda beberapa kode saja.