Cara Membuat Progressive Web App (PWA) Untuk Blogger

Saifulah.id - Banyak pemilik Blog membuat Progressive Web Apps (PWA) untuk situs web mereka, untuk memungkinkan pengguna memasang aplikasi web super lite di smartphone mereka dan menikmati pengalaman seperti aplikasi asli saat menjelajahi situs itu.

Progressive Web Apps (PWA) juga bagus untuk pencitraan merek, karena setelah pengguna menginstalnya, ia akan tampil di layar Utama ponsel mereka dan logo merek tetap ada di pikiran pengguna.

Ada rumor di internet bahwa Progressive Web Apps (PWA) tidak dapat dibuat untuk platform Blogger. Tapi hari ini saya akan membuktikan bahwa itu salah.

Dalam artikel ini, saya akan menunjukkan kepada Anda cara membuat Aplikasi Web Progresif untuk Blogger agar pembaca Anda dapat menikmati pengalaman seperti aplikasi asli di blog/situs web Anda.

Apa itu Progressive Web Apps?

Pernah melihat tulisan "Tambahkan ke layar Utama" muncul di bawah layar Google Chrome ketika Anda mengunjungi beberapa situs web? Nah, pop up itu ditampilkan ketika sebuah situs web mendukung PWA.

Ketika Anda mengklik tombol "Tambahkan ke layar Utama", maka Anda akan diarahkan untuk menginstall aplikasi Android.

Setelah proses instalisasi selesai, maka akan muncul logo Blog di layar utama Smartphone Anda yang nantinya bisa digunakan untuk mengakses Blog. Jadi kita tidak perlu membuka Browser / Chrome lagi saat ingin mengunjungi Website / Blog.

Contoh Progressive Web App Pada Blog

Untuk lebih jelasnya perhatikan contoh tangkapan layar berikut ini:

Selain itu, dengan mengaktifkan fitur Progressive Web App pada Blogger, secara tidak langsung akan meningkatkan kualitas Blog kita di mata mesin pencarian yang mana hal ini terlihat dari centang hijau pada skor PWA di Measure page quality (web.dev)

Nah, sekarang setelah Anda memiliki melihat gambaran yang jelas tentang apa itu PWA, mari kita mulai belajar cara membuat Aplikasi Web Progresif untuk situs Blogger.

Harap dicatat bahwa untuk membuat PWA lengkap bersama dengan dukungan Service Worker, blog Anda harus menggunakan top level domain dan harus terhubung ke Cloudflare. Ini karena blogger tidak mengizinkan kita untuk mengunggah file di direktorinya, sehingga kita perlu mengunggah file serviceworker.js di direktori situs kita menggunakan Cloudflare Workers.

Jika Anda sudah memiliki domain khusus tetapi belum menghubungkan blog Anda ke Cloudflare, harap hubungkan terlebih dahulu. Berikut tutorialnya : Cara Setting Cloudflare Untuk Blogger [Mudah]

Langkah Membuat Progressive Web App Untuk Blogger

Langkah pertama sebelum memasang Progressive Web App adalah membuat Favicon dengan ukuran yang direkomendasikan.

1. Cara Membuat Favicon Recommended

Ini adalah langkah terpenting yang perlu Anda lakukan untuk membuat PWA untuk blog blogger Anda.

Pergi ke https://favicon.io (ini adalah situs terbaik yang saya temukan sampai sekarang untuk tujuan ini)

Jika Anda sudah memiliki logo yang bagus untuk situs web Anda, pilih opsi "Generate from Image" atau Anda dapat memilih opsi "Generate from Text".

Tips: Jika Anda menggunakan opsi "Generate from Text" dan ingin latar belakang logo Anda transparan, ubah nilai warna latar belakang menjadi #FFFFFF00

Unduh file zip di komputer Anda dan ekstrak file berikut ke dalam folder:

1. favicon-16×16.png
2. favicon-32×32.png
3. android-chrome-192×192.png
4. android-chrome-512×512.png
5. apple-touch-icon.png
6. situs.webmanifest

2. Perkecil Ukuran Gambar (Optional)

Anda dapat mengoptimalkan gambar tersebut untuk mengurangi ukurannya agar waktu pemuatan lebih cepat, menggunakan TinyPNG – Compress WebP, PNG and JPEG images intelligently

3. Upload Gambar ke Dalam Halaman Blogger

Supaya kita bisa mendapatkan URL gambar dari Favicon yang sudah kita buat sebelumnya, kita harus upload gambar tersebut di Halaman Blogger.

Setelah Upload, pastikan ukuran gambar menggunakan ukuran Asli atau Original Size. Setelah itu halaman tersebut jangan di Publikasikan. Biarkan saja dalam bentuk Draft.

Lalu ubah ke versi Edit HTML agar kita bisa melihat link gambar.

4. Buat File site.webmanifest

Klik kanan pada file site.webmanifest dan klik Edit (buka dengan Notepad atau editor teks lainnya).

Hapus semua konten di dalam file site.webmanifest. Pilih semua dengan CTRL+A dan tekan tombol Delete.

Sekarang salin kode yang diberikan di bawah ini dan tempel di dalam file site.webmanifest Anda.

{

    "name": "Saifullah.id",

    "short_name": "Saifullah",

    "icons": [

        {

            "src": "https://1.bp.blogspot.com/-Ux6Xn8oqNRk/YYZp79uTZQI/AAAAAAAAcj4/SVR_H7IYdyIceoptrpcIbt8-qPbpP9KjgCLcBGAsYHQ/s0/android-chrome-192x192.png",

            "sizes": "192x192",

            "type": "image/png",

            "purpose": "any maskable"

        },

        {

            "src": "https://1.bp.blogspot.com/-9uJWThk_xmw/YYZp7ysG5eI/AAAAAAAAckA/NsC5lPYgd1A6P4F6uoFl7nxWnexgVm1mwCLcBGAsYHQ/s16000/android-chrome-512x512.png",

            "sizes": "512x512",

            "type": "image/png",

            "purpose": "any maskable"

        }

    ],

    "theme_color": "#3291d1",

    "background_color": "#ffffff",

    "display": "standalone",

    "prefer_related_applications": false,

  "start_url": "https://www.saifullah.id"

}

Keterangan:

• Ganti name dan short_name dengan nama Blog Anda
• Ganti alamat src dengan link Favicon yang sudah kita Upload tadi. Pastikan sesuai dengan ukuran yang tertera. Perhatikan teks yang saya cetak tebal.
• Ganti start_url dengan alamat Blog Anda

Setelah di ganti semua, Simpan file.

5. Unggah site.webmanifest Ke Penyimpanan Online

1. Pergi ke GitHub
2. Jika belum pernah mendaftar, silakan daftar dulu
3. Setelah Login, tekan New
4. Isi Repository name dengan nama PWA
5. Tekan Create repository
6. Unggah file site.webmanifest menggunakan tautan uploading an existing file
7. Tekan Choose your file
8. Pilih file site.webmanifest yang sudah kita edit tadi.
9. Klik Commit changes
10. Tekan site.webmanifest
11. Klik Raw
12. Salin alamat URL nya.

6. Buat Halaman Untuk Digunakan Oleh PWA Saat Perangkat Sedang Offline

Buat halaman baru di Blog Anda dengan judul – “Halaman Offline Untuk PWA”. Anda dapat menulis apa saja seperti yang Anda inginkan.

Halaman ini akan ditampilkan kepada pengguna ketika mereka membuka PWA Anda saat perangkat mereka tidak terhubung ke internet.

Jangan lupa Publikasikan Halaman.

7. Atur Service Worker Menggunakan Cloudflare Workers

Pada langkah ini, kita akan mengatur file serviceworker.js untuk PWA menggunakan Cloudflare Workers.

1. Masuk ke akun Cloudflare Anda, pilih blog Anda dan klik Workers seperti yang ditunjukkan pada gambar di bawah ini.
   
   
   
2. Tekan Manage Workers
   
   
   
3. Buat nama subdomain untuk Cloudflare Workers. Terserah pakai nama apa saja yang Anda suka.
4. Tekan Set Up
5. Pilih Continue with Free
6. Tekan Creat Worker
   
   
   
7. Hapus semua script yang ada disebelah kiri, lalu ganti dengan kode script berikut
   

   const js = `

   'use strict';

   const CACHE_VERSION=1;

   let CURRENT_CACHES={offline:"offline-v1"};

   const OFFLINE_URL="/p/offline-page-for-pwa.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))

   })
8. Ganti OFFLINE_URL dengan alamat URL halaman pada langkah ke 6
9. Tekan Save and Deploy
10. Lalu tekan tombol Kembali
11. Tekan Rename
12. Ganti namanya dengan worker
13. Tekan logo Cloudflare
14. Pilih domain Blog Anda
15. Tekan Workers
16. Tekan Add route
    
    
    
17. Ketik www.saifullah.id/sw.js (ganti www.saifullah.id dengan alamat Blog Anda)
18. Pilih Worker yang kita buat tadi
19. Tekan Save
    
    
    

8. Tambahkan Tautan Dan Script Ke Kode Sumber Blog Anda

1. Masuk ke Blogger -> Tema -> Edit HTML.
2. Cari tag </head> dengan menekan CTRL+F.
3. Tepat sebelum tag </head>, letakkan kode berikut:
   

   <link rel="apple-touch-icon" sizes="180x180" href="GANTI DENGAN LINK GAMBAR FAVICON UKURAN 180 x 180"/> 

   <link rel="icon" type="image/png" sizes="32x32" href="GANTI DENGAN LINK GAMBAR FAVICON UKURAN 32 x 32"/> 

   <link rel="icon" type="image/png" sizes="16x16" href="GANTI DENGAN LINK GAMBAR FAVICON UKURAN 16 x 16"/> 

   <link rel="manifest" href="GANTI DENGAN LINK site.webmanifest YANG ADA PADA LANGKAH KE 5"/>
4. Cari kode </body>
5. Letakkan kode berikut di atasnya
   

   <script type='text/javascript'>

   
   

   if('serviceWorker' in navigator) {

     navigator.serviceWorker

              .register('/sw.js')

              .then(function() { console.log("Service Worker Registered"); });

   }

   </script>
6. Simpan Tema

Demikian Cara Membuat Progressive Web App Untuk Blogger. Jika kalian bingung menerapkan tutorial di atas, kalian bisa menggunakan jasa kami untuk mengerjakan semuanya, klik tombol di bawah.
Jasa Pasang PWA Blogger