Cara Membuat Progressive Web App (PWA) Untuk Blogger
Blog Buttatoa | Membuat Progressive Web App (PWA) - Web adalah platform luar biasa yang ada di mana-mana di seluruh perangkat dan sistem operasi saat ini. Pengembang menganggapnya sebagai platform yang sangat baik untuk mempresentasikan perangkat lunak mereka sebagai aplikasi web.
Tetapi karena penggunaan ekstensif perangkat yang berbeda, mengembangkan aplikasi untuk PC dan smartphone secara terpisah mungkin tampak agak membosankan.
{tocify} $title={Table of Contents}
Jadi, untuk memberikan nuansa aplikasi asli, pengembang web kini beralih ke Aplikasi web progresif (PWA), dengan memanfaatkan teknologi web dan seluler terbaik untuk memberikan pengalaman pengguna yang luar biasa. Namun, sebelum kita menggali ke dalam lanskap PWA dan mengapa
kalian mungkin ingin membuatnya, pertama-tama mari kita mengenal lebih jauh tentang Aplikasi Web Progresif (PWA) itu.
Apa Itu Progressive Web App (PWA)?
Progressive Web Applications (PWA) adalah aplikasi yang dibuat dengan teknologi web dimana dirancang untuk bekerja pada browser standar seperti Chrome, Safari, Firefox, dan Edge namun memiliki nuansa, fungsionalitas serta menghadirkan pengalaman seperti menggunakan aplikasi asli yang sebenarnya kepada pengguna di perangkat atau saluran apa pun seperti seluler, desktop, dan web.
Pada dasarnya, PWA terlihat dan terasa seperti aplikasi "normal" yang akan kalian unduh ke ponsel atau tablet kalian. Namun, mereka diakses melalui browser kalian, jadi mereka dikembangkan menggunakan HTML, CSS, dan JavaScript daripada bahasa pengembangan aplikasi yang lebih tradisional seperti Swift atau Kotlin.
Seperti yang dapat kalian bayangkan, ada beberapa kelemahan besar pada aplikasi web berbasis browser, seperti kebutuhan untuk tetap terhubung ke internet. PWA memungkinkan pengembang mengatasi beberapa kelemahan ini untuk membuat aplikasi yang menggabungkan kemudahan aplikasi web dengan pengalaman mulus dari aplikasi asli yang diinstal.
Progresif Web App (PWA) dibangun dengan kemampuan seperti pemberitahuan push dan kemampuan untuk bekerja secara offline. Mereka juga dibangun dan ditingkatkan dengan API modern yang memudahkan untuk memberikan peningkatan kemampuan bersama dengan keandalan dan kemampuan untuk menginstalnya di perangkat apa pun.
Banyak yang beranggapan bahwa Progresif Web App (PWA) tidak mendukung untuk platform Blogger. Namun, melalui artikel ini, saya akan membuktikan bahwa persepsi itu salah, dan akan saya tunjukkan kepada kalian bagaimana membuat Progresif Web App (PWA) untuk Blogger dengan mudah.
Untuk lebih memahami apa itu Progresif Web App, perhatikan screenshoot gambar dibawah ini:
Kalian mungkin pernah membuka suatu website, lalu kalian mendapatkan notifikasi popup yang meminta kalian untuk menambahkan website tersebut ke layar utama perangkat seluler kalian atau pada menu browser chrome kalian terdapat opsi "install aplikasi" terlihat seperti pada gambar diatas.
Nah itulah contoh sebuah website yang didukung PWA. Website tersebut akan seperti sebuah aplikasi layaknya yang kalian install pada perangkat selular kalian melalui play store, namun sebenarnya berbeda.
Karakteristik Dan Manfaat Progressive Web App (PWA)
Aplikasi seluler asli biasanya mengambil beberapa langkah untuk menginstal dan menyiapkan aplikasi. Dengan semakin banyak langkah untuk menginstal aplikasi tersebut, semakin sedikit pengguna yang akan memasang dan menggunakannya dan bahkan di sebagian perangkat, justru membutuhkan aplikasi tambahan untuk membuat aplikasi tesebut berfungsi dengan baik.
Di sisi lain, dengan menggunakan Progresif Web App, aplikasi dapat terpasang dan digunakan dengan cepat tanpa kerepotan seperti aplikasi asli dan pengguna akan sangat terbantu dalam bisnis karena dapat menjangkau audiens mereka secara efektif.
Karakteristik Progresif Web App (PWA)
Sama seperti konsep desain web, Progresif Web App terdiri dari serangkaian karakteristik yang mungkin diikuti oleh pengembang. Ini terdiri dari daftar teknologi dan fitur yang menjembatani kesenjangan antara aplikasi asli dan Progresif Web App.
Selain adaptif terhadap berbagai perangkat, browser, dan layar, Progresif Web App memiliki karakteristik berikut:
- Responsif : Perusahaan yang berbeda memproduksi gadget dengan ukuran layar yang
berbeda, dan sebagai pengembang, kalian bertanggung jawab untuk memastikan semua pengguna yang berbeda dapat menikmati produk terlepas dari perangkat yang mereka gunakan. Jadi, sebaiknya pastikan aplikasi kalian dapat digunakan pada ukuran layar apa pun dan kontennya tersedia pada ukuran port tampilan apa pun.
- Progresif : Artinya aplikasi harus bekerja pada perangkat atau platform apa pun, memberikan keunggulan penampilan dan kinerja di kedua browser seluler pengguna dan PC.
- Discoverable : Karena konsumen semakin menggunakan ponsel untuk mencari informasi dan pengalaman merek, PWA cocok untuk tren ini. Karena PWA dibuat di web, ini berarti bahwa web mengindeks semua konten yang terkait dalam jenis aplikasi ini, membuat perusahaan dengan PWA lebih mudah ditelusuri dan ditemukan sekaligus berkontribusi positif terhadap SEO.
- Installable : Penelitian telah menunjukkan bahwa pengguna cenderung lebih terlibat dengan aplikasi yang diinstal dibandingkan dengan mengunjungi situs resmi. Memiliki PWA sebagai produk kalian memberikan tampilan, nuansa, dan keterlibatan aplikasi normal kepada pengguna.
- Independent Connectivity : Dengan membuat pengguna tetap terlibat dengan aplikasi kalian bahkan saat mereka offline, memberikan pengalaman yang lebih konsisten daripada mengembalikan mereka ke halaman offline default.
- Appearance : Tampilan aplikasi akan terasa dan terlihat seperti aplikasi normal, jadi pastikan untuk menyertakan hal-hal seperti Ikon Aplikasi yang akan membantu membuatnya mudah dikenali juga hal-hal seperti layar splash akan menambahkan sentuhan aplikasi.
- Cross Platform : PWA dikembangkan sebagai aplikasi web terlebih dahulu, yang berarti bahwa mereka harus bekerja di semua browser/sistem dan bukan hanya beberapa yang dipilih. Pengguna harus dapat menggunakannya di browser apa pun sebelum mereka memutuskan untuk menginstalnya.
Beberapa karakteristik tersebut diatas, harus menjadi pedoman dan perlu kalian perhatikan dengan baik saat membuat Progresif Web App (PWA).
Manfaat Progresif Web App (PWA)
Alasan yang sering diberikan saat membandingkan web versus membangun secara asli adalah perbedaan kinerja. Namun, karena web telah berkembang selama bertahun-tahun menjadi platform yang lebih kuat, celah ini mulai tertutup. Seperti yang disebutkan di atas, dukungan offline, akses ke pemberitahuan push, kemampuan ringan untuk menambahkan ke layar beranda, dan banyak lagi, memberi PWA kekuatan untuk memenuhi tuntutan pengalaman seperti asli tanpa biaya dan waktu yang dibutuhkan untuk membangun aplikasi asli.
Meskipun masih ada kasus penggunaan untuk membuat aplikasi secara native, bagi banyak perusahaan yang mencoba mengikuti upaya transformasi digital, Progresif Web App membuatnya lebih cepat, lebih mudah, dan lebih murah untuk melakukannya. Tetapi tidak ada teknologi yang tanpa tantangannya, jadi mari kita jelajahi semua itu sebelum kita menyelami berbagai manfaat PWA.
- Peningkatan efisiensi : Karena aplikasi dimuat dengan teknologi web, biasanya membutuhkan waktu lebih sedikit untuk memuat dibandingkan dengan rekan asli mereka.
- Penggunaan bandwidth yang efisien : Karena PWA hanyalah kode berbasis teks, mereka idealnya lebih kecil daripada file instalasi aplikasi asli. Dengan demikian, pengguna berpotensi menghabiskan lebih sedikit data untuk menjalankan aplikasi kalian di perangkat mereka.
- Tidak diperlukan instalasi : Meskipun PWA dapat ditambahkan ke layar beranda perangkat kalian, tidak perlu melalui proses pengunduhan dan penginstalan. Selama kalian memiliki tautan PWA, kalian dapat segera mulai menggunakannya. Ini sangat nyaman jika kalian hanya membutuhkan PWA sementara atau jarang.
- Pembaruan instan : Hal terbaik tentang pembaruan PWA adalah kalian tidak perlu mengkhawatirkannya. Daripada mengunduh dan menginstal pembaruan, PWA diperbarui segera setelah kalian menyegarkan halaman.
- Lebih banyak interaksi aplikasi : Hasil dari semua keunggulan PWA di atas adalah bahwa orang lebih cenderung menggunakannya dibandingkan dengan aplikasi asli. Jadi, mereka juga cenderung menghabiskan lebih banyak waktu di PWA.
Inilah sebabnya mengapa begitu banyak perusahaan teknologi menghabiskan banyak waktu pada pengembangan dan pemeliharaan Aplikasi web progresif (PWA) seperti yang mereka lakukan pada aplikasi asli mereka.
Syarat Membuat Progressive Web App (PWA)
Ada beberapa persyaratan yang harus kalian penuhi, jika ingin membuat Aplikasi web progresif (PWA) ini, diantaranya yaitu:
- Kalian sudah harus menggunakan Top Level Domain (TLds)👀 dikarenakan proses yang akan dilakukan nantinya akan menggunakan Cloudflare Workers, sementara cloudfare tidak mendukung subdomain (subdomain.blogspot.com).
- Kalian sudah memiliki akun Cloudfare dan mendaftarkan website kalian disana.
- Kalian sudah harus memiliki akun Github, boleh yang gratisan ataupun berbayar.
- Logo Favicon berukuran persegi dan tidak buram dalam format .png, sebaiknya buat melalui Photoshop atau CorelDraw untuk mendapatkan hasil yang maksimal.
Membuat Progressive Web App (PWA) Untuk Blogger
Membuat Progresif Web App (PWA) untuk Blogger itu sangat mudah. Dengan mengikuti langkah-langkah dibawah ini dengan benar dan tepat, kalian dapat membuatnya dengan cepat. Jadi perhatikan setiap tahapannya, jangan sampai ada yang terlewat.
Created Favicon
Pertama yang dibutuhkan adalah memiliki logo pavicon ukuran persegi (ukuran lebar dan tinggi sama). Jadi sebaiknya kalian membuatnya terlebih dahulu, dan pastikan logo tersebut jelas dan tidak buram. Kalian bisa membuatnya melalui software design grafis, penyedia jasa pembuat logo atau situs online yang menyediakan fasilitas pembuatan logo.
Kedua, jumlah logo favicon yang dibutuhkan nantinya sebanyak 6 (lima) dengan ukuran pixel yang berbeda. Untuk membuat favicon dalam berbagai ukuran tersebut, kalian bisa memanfaatkan situs online https://favicon.io👀. Di situs tersebut, ada tiga pilihan favicon generator yang bisa kalian pilih.
Jika kalian sudah membuat dan memiliki logo yang bagus sebelumnya, kalian tinggal pilih dan klik opsi "Image (PNG ➞ ICO)". Setelah itu tinggal drag gambar logo favicon yang telah kalian buat sebelumnya kedalam kotak atau klik teks "clik here to upload" 👉 lalu pilih gambar logo kalian.
Selanjutnya tinggal klik Download untuk mengunduh hasil converter logo kalian.
Jika kapasitas ukuran logo yang dihasilkan terlalu besar, kalian bisa compress melalui situs online tinypng.com👀.
Kalian harus perhatikan, jangan ubah nama setiap icon, biarkan tetap seperti itu, karena script yang akan digunakan nantinya, akan terhubung kesetiap nama logo icon tersebut. Agar tidak ada perubahan yang akan mempengaruhi keberhasilan pwa ini nantinya, sebaiknya pastikan nama setiap logo icon tersebut sama dengan yang dibawah ini:
- android-chrome-512x512.png
- android-chrome-192x192.png
- apple-touch-icon.png
- favicon.ico
- favicon-32x32.png
- favicon-16x16.png
Upload Logo Icon Favicon Ke Github
Tahapan selanjutnya yaitu mengunggah logo icon favicon tersebut ke Github. Silahkan Login jika kalian sudah memiliki akun Github, jika belum daftarlah terlebih dahulu ke Github👀.
Setelah kalian login, buat Repository Baru dan beri nama "icon-blogbuttatoa". Kalian dapat menggantinya sesuai keinginan, namun kalian harus perhatikan dengan baik setiap perubahan yang dilakukan.
Catatan : Perhatikan setiap perubahan yang berbeda yang kalian lakukan dengan petunjuk yang ada dalam artikel ini, karena apa yang diberikan disini saling berkaitan antara proses sebelumnya dengan proses selanjutnya.
Setelah membuat nama repository, jangan lupa kalian pilih ⦿ Publik. Yang lainnya sesuaikan gambar dibawah. Klik Created repository untuk menyimpan.
Selanjutnya mengunggah enam icon favicon tadi kedalam repository yang baru dibuat. Kalian tinggal klik "uploading an existing file" seperti yang ditunjukkan gambar dibawah. Kalian cari lokasi penyimpanan file icon favicon tersebut lalu upload.
Setelah semua icon pavicon terunggah kedalam repository, klik Commit changes untuk menyelesaikan pengunggahan pada Github dan lanjut ketahapan berikutnya menggunakan Cloudfare.
Created Service Workers Cloudfare
Pada tahapan ini, kalian membutuhkan akses melalui Cloudfare. Jadi buat akun dan daftarkan blog kalian ke cloudfare terlebih dahulu. Melalui cloudfare ini juga kalian bisa mengawasi dan mengamankan website kalian dari lalu lintas jaringan dan serangan yang berbahaya bagi website kalian. Kalian juga bisa memanfaatkan CDN gratis Cloudfare untuk pengguna Blogger👀.
Setelah kalian memiliki akun dan daftarkan website kalian, selanjutnya membuat Service Workers Cloudfare. Ada 4 (empat) service yang akan dibuat disini yaitu:
- main_ service
- manifest_service
- serviceworker_service
- offline_service
Selanjutnya pilih main menu Workers 👉 lalu pilih Manage Workers.
Saat pertama kali membuat menggunakan fitur Workers, kalian akan diminta membuat subdomain untuk akun yang kalian daftarkan. Nama sub domain bebas, terserah kalian atau kalian isikan saja sesuai Nama Blog kalian, lalu klik Set up.
Selanjutnya akan ditampilkan pilihan penggunaan fitur yang kalian perlukan. Kalian bisa memilih fitur gratis yang disediakan, atau kalian bisa menggunakan fitur yang berbayar. Disini saya hanya menggunakan fitur yang gratisan, 😁.
Selanjutnya, barulah kita akan membuat Service Workers Cloudfare dengan memilih klik Create a Service.
Created Main_Service
Service yang pertama dibuat adalah main_service. Isikan nama service "main-blogbuttatoa". Kalian ubah teks yang berwarna biru "blogbuttatoa", bisa disesuaikan dengan nama blog kalian. Perhatikan select a starter agar mengarah ke ⦿ HTTP handler lalu 👉 Klik Create service.
Selanjutnya akan ditampilkan jendela baru, klik Quick edit.
Hapus script yang ada pada kolom sebelah kiri, dan ganti dengan script yang disediakan dibawah. Setelah terganti, klik Save and Deploy untuk menyimpan script main_service yang baru.
addEventListener("fetch", event => {
event.respondWith(handleRequest(event))
})
//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/blogbuttatoa/icon-blogbuttatoa `
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 })
}
}Ada 2 (dua) yang perlu kalian perhatikan pada script diatas yaitu teks yang berhuruf tebal dan diwarnai dimana kalian harus menyesuaikannya dengan nama yang kalian telah buat sebelumnya (jika membuat nama yang berbeda dengan petunjuk di artikel ini).
- blogbuttatoa : ini adalah nama sub domain yang dibuat saat set-up worker pertama kali sebelumnya.
- icon-blogbuttatoa : ini adalah nama repository yang dibuat di Github sebelumnya.
Created Manifest_Service
Lanjut membuat service yang kedua yaitu manifest_service. Caranya sama dengan membuat main_service sebelumnya. Isikan nama service "manifest-blogbuttatoa". Kalian ubah teks yang berwarna biru "blogbuttatoa", bisa disesuaikan dengan nama blog kalian.
Perhatikan select a starter agar mengarah ke ⦿ HTTP handler lalu 👉 Klik Create service. Untuk scriptnya, kalian ganti dengan script dibawah, dan sesuaikan yang berwarna biru dengan pilihan kalian.
addEventListener("fetch", event => {
const data = {
name: "Blog Buttatoa",
short_name: "Blog Buttatoa",
description: "Install Blog Buttatoa Sekarang",
display: "standalone",
prefer_related_applications: false,
start_url: "\/?utm_source=homescreen",
scope: "\/",
background_color: "#2196f3",
theme_color: "#2196f3",
icons: [
{
src: "\/main\/android-chrome-512x512.png",
sizes: "512x512",
type: "image\/png",
density: "4.0",
purpose: "any maskable"
},
{
src: "\/main\/android-chrome-192x192.png",
sizes: "192x192",
type: "image\/png",
density: "4.0",
purpose: "any maskable"
},
{
src: "\/main\/apple-touch-icon.png",
sizes: "180x180",
type: "image\/png",
density: "3.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"
}
})
)
})Create Serviceworker_Service
Service yang ketiga adalah serviceworker_service. Caranya sama dengan membuat service sebelumnya. Isikan nama service "serviceworker-blogbuttatoa". Kalian ubah teks yang berwarna biru "blogbuttatoa", bisa disesuaikan dengan nama blog kalian.
Perhatikan select a starter agar mengarah ke ⦿ HTTP handler lalu 👉 Klik Create service. Untuk scriptnya, kalian ganti
dengan script dibawah, dan disini tidak ada yang perlu kalian ubah.
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: '/main/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('Oops! Workbox did not 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))
})Offline_Service
Service yang keempat adalah offline_service yang berfungsi untuk menampilkan pemberitahuan kepada pengguna apabila perangkat mereka sedang offline atau tidak terhubung dengan jaringan internet. Caranya juga sama dengan membuat service sebelumnya.
Isikan nama service "offline-blogbuttatoa". Kalian ubah teks yang berwarna biru "blogbuttatoa", bisa disesuaikan dengan nama blog kalian. Perhatikan select a starter agar mengarah ke ⦿ HTTP handler lalu 👉 Klik Create service.
Untuk scriptnya, kalian ganti
dengan script dibawah, dan ganti serta sesuaikan teks bold dan berwarna biru dengan keinginan kalian.
const html = `<!DOCTYPE html>
<html>
<head>
<!--[ Meta Tags ]-->
<title>Oops, Kamu Sedang Offline!</title>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<!--[ Theme Color ]-->
<meta content='#2196f3' name='theme-color'/>
<meta content='#2196f3' name='msapplication-navbutton-color'/>
<meta content='#2196f3' name='apple-mobile-web-app-status-bar-style'/>
<meta content='true' name='apple-mobile-web-app-capable'/>
<!--[ Favicon ]-->
<link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>
<link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>
<link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='/main/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<!--[ Stylesheet ]-->
<style>/*<![CDATA[*/
/* Merriweather - Font */ @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 300; font-display: swap; src: local('Merriweather-LightItalic'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXff4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXcf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR71Wsf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWMf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRpXA.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNpXA.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52_wFZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52_wFpXA.woff) format('woff')}
/* Content */ body{background:#f1f3f6;color:#1f1f1f;font-family:'Merriweather',serif;font-weight:400;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:focus{outline:none !important} .mainCont{margin:0 auto;position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:15px} .noIntPop{position:relative;overflow:hidden;text-align:center;padding:15px;border-radius:30px;background:#f1f3f6;box-shadow:inset 0 0 15px rgba(55, 84, 170, 0), inset 0 0 20px rgba(255, 255, 255, 0), 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 0px 0px 4px rgba(255, 255, 255, 0.2)} .circle.t{top:-150px;right:-150px} .circle.b{bottom:-150px;left:-150px} .noIntCont{position:relative;z-index:1} .noIntIcon{padding:30px} .noConHead{font-weight:700;font-size:1.3rem} .noConDesc{font-size:16px;line-height:1.4em;padding-top:20px;font-weight:400;opacity:.8} .cta,.relCont{display:flex;justify-content:center;align-items:center} .relCont{padding:30px} .cta{width:66px;height:66px;background:#f1f3f6;outline:none;border:none;border-radius:690px;box-shadow:inset 0 0 15px rgba(55, 84, 170, 0), inset 0 0 20px rgba(255, 255, 255, 0), 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 0px 0px 4px rgba(255, 255, 255, 0.2);transition:box-shadow 399ms ease-in-out} .cta:hover{box-shadow:inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2)} .icon{content:'';width:25px;height:25px;display:inline-block} .iconB{content:'';width:50px;height:50px;display:inline-block} .icon.reload{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dabc0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>") center / 25px no-repeat} .iconB.wifiOff{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='1' x2='23' y2='23'/><path d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/><path d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/><path d='M10.71 5.05A16 16 0 0 1 22.58 9'/><path d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>") center / 50px no-repeat} .circle{position:absolute;z-index:1;width:280px;height:280px;border-radius:50%;background-color:#f1f3f6;box-shadow:inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9}
/*]]>*/</style>
</head>
<body>
<div class='mainCont notranslate'>
<div class='noIntPop'>
<div class='circle t'></div>
<div class='circle b'></div>
<div class='noIntCont'>
<div class='noIntIcon'>
<i class='iconB wifiOff'></i>
</div>
<div class='noConHead'>Oops, Kamu Sedang Offline!</div>
<div class='noConDesc'>Aktifkan data internet untuk tetap terhubung dengan Blog Buttatoa.</div>
<div class='relCont'>
<button class='cta' onclick='window.location.reload()'>
<i class='icon reload'></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>`
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))
})Created Route Worker Cloudfare
Sama seperti membuat service workor cloudfare, kita juga akan membuat 4 (empat) route worker cloudfare yaitu:
- main_route
- manifest.json_route
- sw.js_route
- offline.html_route
Kalian kembali ke Dashboard Clodfare lalu klik Websites 👉 pilih website yang kalian daftarkan. Perhatikan gambar dibawah!.
Jika sebelumnya saat membuat service worker, kita memilih manage workers, namun untuk membuat route worker ini, kalian pilih main menu Workers 👉 lalu pilih Add route.
Kemudian buat empat jenis route worker dengan rincian sebagai berikut:
- Route :
https://www.blogbuttatoa.my.id/main/* (ganti URL berwarna biru dengan URL blog kalian).Service :main-blogbuttatoa (pilih main_service kalian sebelumnya).Environment : production - Route :
https://www.blogbuttatoa.my.id/manifest.json (ganti URL berwarna biru dengan URL blog kalian).Service :manifest-blogbuttatoa (pilih manifest_service kalian sebelumnya).Environment : production - Route :
https://www.blogbuttatoa.my.id/sw.js (ganti URL berwarna biru dengan URL blog kalian).Service :serviceworker-blogbuttatoa (pilih serviceworker_service kalian sebelumnya).Environment : production - Route :
https://www.blogbuttatoa.my.id/offline.html (ganti URL berwarna biru dengan URL blog kalian).Service :offline-blogbuttatoa (pilih offline_service kalian sebelumnya).Environment : production
Edit HTML Tema Blogger
Tahapan selanjutnya adalah menambahkan script HTML dan JavaScript ke tema/template blogger. Kalian menuju dashboard blogger kalian 👉 pilih Tema 👉 Edit HTML.
Pertama, tambahkan script HTML berikut dan letakkan diatas kode
<link href='/main/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='/main/android-chrome-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-16x16.png' rel='icon' sizes='16x16' type='image/png'/>
<link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='#2196f3' name='msapplication-TileColor'/>
<meta content='/main/android-chrome-192x192.png' name='msapplication-TileImage'/>
<meta content='#2196f3' name='theme-color'/>
<link href='/manifest.json' rel='manifest'/>Kedua, tambahkan JavaScript berikut dan letakkan diatas kode
<script>/*<![CDATA[
*/ /* Service Worker */
if('serviceWorker' in navigator){
window.addEventListener('load',
()=>{navigator.serviceWorker.register('/sw.js').then(registration=>{
console.log('ServiceWorker registeration successful')})
.catch(registrationError=>{
console.log('ServiceWorker registration failed: ', registrationError)})})};
/*]]>*/
</script>
Kesimpulan
Selamat, kalian telah menyelesaikan seluruh tahapan membuat Progresif Web App (PWA) untuk Blogger. Kalian bisa mencoba membuka website kalian melalui perangkat selular. Bila kalian mendapati adanya notif popup "Tambahkan Website Ke Layar Utama" berarti kalian telah berhasil membuatnya.
Membuat Progresif Web App (PWA) untuk Blogger dapat dilakukan dan saya telah membuktikannya kepada kalian. Cara membuatnya pun cukup mudah, dimana kalian hanya membutuhkan domainTLD, akun Github dan akun Cloudfare yang bisa kalian manfaatkan fitur gratisnya. Semoga bermanfaat, Wassalam.
Post a Comment for "Cara Membuat Progressive Web App (PWA) Untuk Blogger"