mengaktifkan progressive web app ( pwa ) di blogger

cara mengaktifkan progressive web app ( pwa ) di blogger atau blogspot , PWA ini boleh di bilang agak mirip dengan webview

Hallo semua pada kesempatan kali ini saya akan membagikan cara mengaktifkan progressive web app ( pwa ) di blogger atau blogspot.

PWA adalah singkatan dari Progressive Web App, sebuah aplikasi yang dibangun dengan melakukan optimasi pada sebuah website yang mampu memberikan pengalaman layaknya menggunakan aplikasi mobile. selain itu juga kita tidak perlu mengeluarkan biaya untuk membuat aplikasi terpisah.

PWA ini boleh di bilang agak mirip dengan aplikasi webview karena sama - sama menampilkan sebuah aplikasi web, jika aplikasi webview harus di upload dulu ke playstore atau appstore agar bisa di dwonload oleh user, sedangkan PWA bisa langsung di instal melalui browser.

sebelumnya saya telah membaca tutorial ini di blog www.kang-ismet.com dan blog www.kompiajaib.com dan sumber utamanya ada di blog www.marwanto606.com dan saya memberikan backlink dofollow kepada 3 blog tersebut sebagai ucapan terima kasih saya.

sebelum memulai pastikan kalian memiliki domain tld, yang di maksud adalah .com .id .co.id dll bukan .blogspot.com, dan pastikan juga domain kalian sudah mengarah ke name server dari cloudflare dan mengaktifkan awan proxy.

tutorial ini boleh di bilang agak rumit maka itu harap baca dengan teliti dan ikuti tahap - tahap nya dengan baik, di sini saya juga menyematkan gambar screnshot yang lumayan banyak agar mudah di mengerti. ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

Tahap Pertama Membuat Icon App

siapkan icon logo dengan format .png dengan ukuran dimensi 512 x 512 dan beri nama android-icon-512x512.png ( nama icon harus sama agar terbaca nantinya ).
generate icon logo yang sudah di buat tadi ke favicon-generator.org lalu dwonload file .zip iconya.
extrak file yang sudah di dwonload tadi dan hapus file browserconfig.xml dan manifest.json karena itu tidak di butuhkan, dan pindahkan icon android-icon-512x512.png yang di buat awal tadi ke dalam 1 file dengan icon yang di dapatkan dari favicon-generator.org.

Tahap Kedua Upload Icon Ke Repo Github

silakan masuk ke github.com, buat yang belum punya akun silakan daftar terlebih dulu.
kemudian buat repository baru dengan cara klik icon + pojok kanan atas > new repository > repository name (bebas apa aja) selebihnya silakan atur seperti gambar di bawah ini, dan create repository.

lanjut klik add file > upload files

klik pada choose your files kemudian pilih file icon yang sudah kalian buat di tahap awal gunakan ctrl + a untuk seleksi semua iconnya dan klik open, setelah proses upload selesai lalu klik commit changes

Tahap Ketiga Membuat Worker Di Cloudflare

silakan masuk ke cloudflare.com, dan klik menu workers

jika ini adalah pertama kali kalian membuat workers maka kalian akan di minta membuat subdomain ( bebas yang penting masih tersedia), kemudian kalian akan di minta memilih plan pilih saja continue with free

CATATAN
di sini kita akan membuat 4 worker, maka itu di tahap ini kita akan terus mengulang membuat worker sebanyak 4 kali
1. main
2. manifest
3. serviceworker
4. offline

selanjutnya klik tombol create a worker > hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali


addEventListener("fetch", event => {
  event.respondWith(handleRequest(event))
})

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://raw.githubusercontent.com/choipanwendy/icon-wendycode`

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 })
  }
}

bagian yang saya tandai choipanwendy/icon-wendycode silakan di ganti dengan username dan nama repo kalian, jika bingung silakan kembali ke tahap kedua upload icon ke repo github

dan rename menjadi main-namabloganda contoh main-wendycode dan klik rename and deploy kemudian klik kembali ke workers

klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

addEventListener("fetch", event => {
  const data = {
    name: "Wendy Code",
    short_name: "Wendy Code",
    display: "standalone",
    prefer_related_applications: false,
    start_url: ".",
    scope: "\/",
    background_color: "#fff",
    theme_color: "#f89000",
    description: "Membahas tutorial seputar blogging, blogger tutorial, blogspot tutorial, dan tools gratis.",
    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"
      }
    })
  )
})

bagian yang saya tandai silakan di sesuaikan dengan blog kalian

dan rename menjadi manifest-namabloganda contoh manifest-wendycode dan klik rename and deploy kemudian klik kembali ke workers

klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

dan rename menjadi serviceworker-namabloganda contoh serviceworker-wendycode dan klik rename and deploy kemudian klik kembali ke workers

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))
})

klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

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, Anda Sedang Offline!</div>
<div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">Cek Koneksi Internet Anda Dan Coba Kembali.</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))
})

bagian yang saya tandai pesan kata - kata offline nya silakan di sesuaikan sesuai selera kalian atau bisa di biarkan saja

dan rename menjadi offline-namabloganda contoh offline-wendycode dan klik rename and deploy kemudian klik domain kalian untuk kembali ke beranda

Tahap Keempat Membuat Route

klik menu workers > add route pada blog.choipanwendy.com silakan ganti dengan domain kalian, jika menggunakan domain utama harus di awali www contoh www.choipanwendy.com karena saya menggunakan subdomain jadi tidak di awali www

blog.choipanwendy.com/main/* untuk worker main-namabloganda

blog.choipanwendy.com/manifest.json untuk worker manifest-namabloganda

blog.choipanwendy.com/serviceworker.js untuk worker serviceworker-namabloganda

blog.choipanwendy.com/offline.html untuk worker offline-namabloganda

jika sudah silakan buka link di atas satu - satu untuk memastikan tidak ada eror, jika semua nya berhasil terbuka bearti tidak ada masalah

Tahap Kelima Edit Template Blogger

silakan masuk ke blogger > tema > edit html kemudian salin dan letakkan kode di bawah ini di area tag <head> atau bisa kalian kelompokkan dengan tag meta yang berada di template kalian.

jika template memiliki kode serupa silakan di hapus, bagian yang saya tandai #f89000 silakan di sesuaikan dengan warna blog kalian.

<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='#f89000' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#f89000' name='theme-color' />
<link href='/manifest.json' rel='manifest' />

dan terakhir salin kode di bawah ini dan letakkan di atas kode </body> atau </body> jika sudah silakan klik simpan selesai.

<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>

ok jadi sekian cara mengaktifkan progressive web app ( pwa ) di blogger semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :

22 komentar

Marwanto606 25 Juni, 2021 01:31 25 Juni, 2021 01:31

thanks, backlink nya gan :d
1. wendy 25 Juni, 2021 07:10 25 Juni, 2021 07:10
  
  Sama2 mas marwanto, saya juga terima kasih kembali😊
Tr. Lâm 26 Juni, 2021 15:58 26 Juni, 2021 15:58

Thank you bro
1. wendy 26 Juni, 2021 20:31 26 Juni, 2021 20:31
  
  You're welcome bro
Admin 05 Juli, 2021 20:35 05 Juli, 2021 20:35

good article
Ezet 29 Juli, 2021 19:16 29 Juli, 2021 19:16

mas di saya gak ada tombol add routenya
1. wendy 30 Juli, 2021 08:33 30 Juli, 2021 08:33
  
  Jika sudah selesai di tahap membuat worker. Klik nama domainnya dlu untuk kembali ke beranda, terus klik workers nanti ada muncul add route nya kalau saya pakai pc itu di sebelah kanan, kalau pakai hp coba aj klik titik tiga pojok kanan atas dan buka situs desktop, biasanya ada beberapa situs yang tidak tampil di hp menunya, cm kalau ini saya kurang tau karna tidak pernah saya coba pakai hp
Jorel Art. 31 Juli, 2021 07:44 31 Juli, 2021 07:44

tutorial icon yang agan pake dong, keren bisa ada warnanya..
1. wendy 31 Juli, 2021 08:45 31 Juli, 2021 08:45
  
  Kalau mau ada warna css svg fill:none ubah jadi kode warna misalnya fill:#f89000 , cuma warnanya full nanti , kalau mau kaya punya saya itu edit satu2 pada svg iconnya, dan itu sebenarnya 2 icon yang saling tindih, jika mau bisa comot aja
2. Jorel Art. 01 Agustus, 2021 12:58 01 Agustus, 2021 12:58
  
  kalau di fill, jadi berubah semuanya gan, gmna cra comotnya ya, saya coba dulu, ijin ya gan hhe
Agus 02 Agustus, 2021 11:42 02 Agustus, 2021 11:42

Mantap, makasih ngab
Komptik. 24 November, 2021 14:14 24 November, 2021 14:14

Mas klo gak ada tombol create worker, dan yg ada hanya create service di workernya itu gimana mas?
Trial MembƎr 17 Januari, 2022 21:17 17 Januari, 2022 21:17

Request cara membuat anti copas , pas di klik kanan atau tahan muncul gambar kang Wendy
1. wendy 18 Januari, 2022 07:02 18 Januari, 2022 07:02
  
  saya tampung dulu
MODingly 18 Januari, 2022 13:54 18 Januari, 2022 13:54

How can i add a customised "add to homescreen " minbar prompt in browsers 🤔.. Like shown on this screenshot. https://imgur.com/a/9UjeXo5
Team Tokko 27 Februari, 2022 20:47 27 Februari, 2022 20:47

Ini untuk domain.com aja kang?
Bisa untuk domain.blogspot.com gak?
1. wendy 28 Februari, 2022 06:27 28 Februari, 2022 06:27
  
  domain harus punya sendiri kang. tidak bisa pakai subdomain blogspot. karna kan harus arahkan name server ke cloudflare jadi harus ada aksesnya
Author 18 Juni, 2022 23:23 18 Juni, 2022 23:23

kok masih error ya, padahal udah diulang ulang ikuti caranya. tolong mas
1. wendy 19 Juni, 2022 06:15 19 Juni, 2022 06:15
  
  error gimana ya kak?
Bertips.com 18 Januari, 2023 15:56 18 Januari, 2023 15:56

apakah blog mas sudah memasang pwa ini? udah tested blom
1. wendy 18 Januari, 2023 17:39 18 Januari, 2023 17:39
  
  Dulu, sekarang saya menggunakan aplikasi webview yang bisa di instal di playstore
Ririwa Keren 23 Maret, 2023 22:41 23 Maret, 2023 22:41

Saya sudah kunjungi ke 3 nya, tapi kenapa ya setelah sampai Route, manifest, main dan lainnya ga bisa di akses masih 404 di blog

Wendy Code

mengaktifkan progressive web app ( pwa ) di blogger

Tahap Pertama Membuat Icon App

Tahap Kedua Upload Icon Ke Repo Github

Tahap Ketiga Membuat Worker Di Cloudflare

Tahap Keempat Membuat Route

Tahap Kelima Edit Template Blogger

formulir order menuju whatsapp di blogger

membuat safelink di blog utama dengan random post + generator

membuat fitur login username + password di blogger

cara mengatasi jingling auto visitor di blog

widget bookmark blogger