todo

apa saja hal-hal hardcoded yang perlu dipindahkan ke sentralisasi konfigurasi/config khusus agar tidak perlu bongkar kodingan js/css

jika memungkinkan saya ingin seluruh markup html berada di XML alih-alih inject via JS/CSS

Solusi #2: Share Poster (Mengatasi CORS Canvas)

Masalah "Tainted Canvas" terjadi karena header keamanan dari server gambar Google/Blogger seringkali ketat. Solusi "Beyond"-nya adalah membuat Image Proxy sendiri menggunakan Cloudflare Workers.

Langkah 1: Buat Worker Baru (misal: gg-image-proxy)

Worker ini akan mengambil gambar dari Google, lalu mengirimkannya kembali ke browser Anda dengan header Access-Control-Allow-Origin: *.

Update main.js (Modul PosterEngine)

Ubah fungsi loadImage atau logika di U.renderPoster agar URL gambar dibungkus proxy ini.

r "Rich Media Sharing" yang biasa ditemukan pada aplikasi native (seperti Spotify atau Twitter app), namun kita memaksanya berjalan di lingkungan Web (Browser).

Karena Anda meminta penjelasan logika (tanpa kode), berikut adalah peta jalan arsitektural untuk membuat fitur ini bekerja secara Powerful dan Beyond:

1. Fondasi Utama: Data Aggregation (Pengumpul Bahan)

Sebelum tombol ditekan, logika sistem harus sudah siap "memanen" data. Jangan mengambil data saat tombol ditekan (itu akan terasa lambat/laggy).

Logika: Saat halaman artikel dimuat, script harus secara diam-diam membuat objek JSON di memori (metaData) yang berisi:

URL Gambar Thumbnail (Resolusi Tinggi).

URL Foto Profil Penulis.

URL Favicon Blog.

Teks Judul & Nama Penulis.

(Opsional) Kode warna dominan dari thumbnail untuk background otomatis.

2. Mengatasi Isu CORS (Kunci Pembuka Canvas)

Ini adalah "penyakit" utama yang membuat fitur ini sering gagal (Tainted Canvas). Browser melarang script Anda mengekspor gambar (toDataURL / toBlob) jika di dalam canvas ada gambar dari domain lain (Google Images) yang tidak memberi izin eksplisit.

Logika Lama (Gagal): Browser meminta gambar langsung ke Google -> Google memberi gambar tanpa "surat izin" (header CORS) -> Browser mengunci Canvas -> Gagal Export.

Logika "Beyond" (Solusi): Gunakan Cloudflare Worker Anda sebagai "Makelar" (Proxy).

Browser meminta gambar ke Worker Anda (worker.dev/?url=google_image).

Worker mengambil gambar dari Google.

Worker mengirimkan gambar ke Browser ANDA dengan menempelkan stiker "Izinkan Semua Orang" (Access-Control-Allow-Origin: *).

Browser senang, Canvas tidak terkunci, Poster bisa di-generate.

3. Logika Multi-Template (The Composer)

Anda ingin visitor bisa memilih template. Ini berarti Anda memisahkan Data dari Desain.

Logika:

Anggap Canvas adalah kertas kosong.

Anggap Template adalah "Instruksi Menggambar" (Function).

Buat beberapa fungsi terpisah, misal: drawMinimalist(), drawBold(), drawElegant().

Saat user klik tombol "Template A", sistem menghapus kanvas, lalu menjalankan fungsi drawTemplateA(metaData).

Ini memungkinkan Anda punya puluhan desain poster tanpa memberatkan loading awal, karena yang diubah hanya instruksi gambarnya, datanya tetap sama.

4. Logika "Add to Story" (Web Share API Level 2)

Web tidak bisa secara langsung membuka aplikasi Instagram dan menempel stiker (belum ada API publik yang stabil untuk web). Tapi, kita bisa meniru perilakunya mendekati 99%.

Tantangan: Browser tidak bisa bilang "Buka Instagram, taruh ini di Story".

Logika Solusi (Files Share):

Script mengubah Canvas menjadi file biner (Blob / File Object) berformat PNG.

Script memanggil API bawaan HP (navigator.share) dengan menyertakan File tersebut (bukan cuma link).

HP akan membuka menu "Share Sheet" native (Android/iOS).

Karena yang dikirim adalah Gambar, maka opsi "Instagram Stories" atau "WhatsApp Status" akan muncul otomatis di menu HP user.

Saat user memilih Instagram, gambar poster tadi langsung masuk ke mode edit Story.

5. Logika Export to PDF (The Snapshot)

PDF berbeda dengan Canvas. Canvas adalah bitmap (gambar titik-titik), PDF adalah dokumen.

Opsi "Standard": Menggunakan window.print() dengan CSS @media print yang sangat ketat. Anda menyembunyikan header, sidebar, footer, dan hanya menyisakan konten artikel dengan tipografi hitam putih yang rapi. User memilih "Save as PDF" dari dialog print browser. Ini paling ringan dan tajam teksnya.

Opsi "Beyond" (Visual PDF): Menggunakan library (seperti html2pdf atau jspdf). Logikanya: Script "memotret" elemen HTML postingan menjadi gambar raksasa, lalu menempelkan gambar itu ke dalam halaman PDF. Hasilnya persis seperti tampilan web (termasuk warna & layout), tapi teksnya tidak bisa diseleksi (copy-paste) di PDF-nya.

Rangkuman Alur Kerja User (User Flow)

User klik tombol "Super Share".

Muncul Modal/Overlay (bukan popup window).

Di dalam modal, user melihat Preview Poster (Canvas).

Di bawah preview, ada pilihan Template (bulatan warna/gaya). Klik ganti, poster berubah instan.

User menekan tombol utama "Share to Story":

Sistem melakukan rendering gambar final di memori.

Menu Share HP muncul.

User pilih IG/WA. Selesai.

User menekan tombol sekunder "Save as PDF":

Sistem menyusun ulang layout khusus cetak di background.

Dialog simpan PDF muncul.

HTML Templating/Slotting yang memungkinkan JS saya menyusut drastis, lebih bersih, dan tema saya jauh lebih mudah dikustomisasi oleh siapa saja (bahkan yang tidak paham JS).

DOM Selection: JS harus lebih "cerdas" mencari elemen

(Siapkan Template):

Gunakan tag <template> HTML5. Isinya tidak akan dirender browser sampai dipanggil JS.

Pindahkan Config: Gunakan Widget HTML dengan application/json di XML untuk menyimpan konfigurasi penulis, warna, dan dimensi poster.

Pindahkan Markup: Pindahkan semua string HTML yang ada di main.js (seperti struktur InfoPanel, Toast, ShareSheet) ke dalam theme.xml sebagai elemen statis (dengan hidden) atau <template>.

Refactor JS: Ubah JS Anda dari "Creator" (yang bikin HTML) menjadi "Director" (yang mengatur HTML yang sudah ada).

SCANNING dan MAPPING Memisahkan Logic (JS), Style (CSS), dan Configuration/Structure (XML)

1. DOMPurify (Wajib untuk Komentar JSON)

Karena Anda berencana me-render komentar Native Blogger menggunakan JSON API (JS Client-side) agar tampilannya bisa dikustomisasi total, Anda membuka celah keamanan XSS (Cross Site Scripting).

• Fungsi: Membersihkan string HTML dari JSON Blogger sebelum disuntikkan ke innerHTML.

• Kenapa Enterprise? Aplikasi kelas enterprise tidak boleh membiarkan script jahat yang disisipkan user di kolom komentar tereksekusi di browser pengunjung lain.

• Cara Pakai: cleanHTML = DOMPurify.sanitize(dirtyHTML);

2. Medium-zoom (UX Gambar Native)

Salah satu ciri khas "Webapp Native" (seperti Medium, Substack, atau aplikasi berita) adalah cara mereka menangani gambar. Klik gambar -> Zoom transisi halus -> Latar belakang meredup.

• Fungsi: Membuat semua gambar di postingan bisa di-zoom dengan animasi 60fps yang sangat halus, dan bisa di-dismiss dengan scroll atau klik.

• Kenapa Beyond? Blogger bawaan menggunakan "Lightbox" jadul yang berat dan memuat iframe/overlay berlebihan. Medium-zoom itu pure JS dan sangat ringan.

3. IDB-Keyval (Database Browser)

Anda menggunakan localStorage untuk caching (Super Search Index, Library). localStorage itu synchronous (bisa memblokir render UI jika data besar > 5MB) dan kapasitasnya kecil.

• Fungsi: Pembungkus super ringan (< 1KB) untuk IndexedDB.

• Kenapa Powerful? IndexedDB adalah database asli browser yang asynchronous dan kapasitasnya besar (ratusan MB). Anda bisa menyimpan full content blog untuk pencarian offline tanpa membuat UI macet.

• Penggunaan: Simpan index Fuse.js di sini.

4. Workbox (Manajemen Service Worker PWA)

Menulis sw.js (Service Worker) dari nol secara manual itu rawan bug (cache tidak mau update).

• Fungsi: Library dari Google untuk men-generate Service Worker yang handal.

• Kenapa Production Ready? Workbox menangani precaching (aset inti), runtime caching (gambar/halaman), dan strategi stale-while-revalidate dengan standar Google.

• Implementasi: Build sw.js Anda menggunakan Workbox, lalu host di Cloudflare Workers atau root GitHub pages yang di-proxy. Ini memastikan PWA Anda bisa Installable dan Offline-ready.

5. Microsoft Clarity (Enterprise Analytics)

Google Analytics 4 (GA4) bagus untuk angka, tapi buruk untuk melihat "perilaku/feel".

• Fungsi: Heatmaps (peta panas klik) dan Session Recording (rekaman video layar user).

• Kenapa Beyond? Anda bisa melihat replay user yang bingung menekan tombol "Back" di overlay (seperti diskusi kita di poin 16 sebelumnya), atau user yang rage click karena tombol tidak responsif. Gratis selamanya.

6. Cloudflare Worker: OG Image Generator (Dynamic Social Card)

Ini adalah fitur "Killer" untuk branding.

• Masalah: Saat share link artikel ke Twitter/WA, gambarnya statis (hanya thumbnail artikel).

• Solusi Beyond: Gunakan Cloudflare Workers (gratis) dengan library @vercel/og atau satori.

• Cara Kerja: Worker akan men-generate gambar PNG secara on-the-fly yang berisi: Judul Postingan + Foto Penulis + Logo Blog + Background Keren.

• Hasil: Setiap link yang dibagikan terlihat seperti poster profesional otomatis. Tidak perlu desain manual di Canva satu per satu.

1. Micro-interactions & Loading State (Page Transitions)

Apakah membantu UI/UX?

Sangat Membantu (Wajib untuk SPA).

Karena Anda menggunakan konsep SPA (Single Page Application), browser tidak melakukan full refresh. Jika koneksi lambat dan tidak ada indikator, user akan mengira tombol rusak atau aplikasi macet (freeze).

Untuk level "Beyond", jangan hanya gunakan Spinner (lingkaran berputar). Itu membosankan dan membuat waktu terasa lama. Gunakan 3 Teknik Ini:

A. Skeleton Screens (Shimmer Effect)

Alih-alih spinner di tengah layar, tampilkan kerangka halaman (kotak abu-abu yang berkilau) di tempat konten akan muncul.

• Psikologi: Memberikan ilusi bahwa konten "sedang dimuat" dan layout sudah siap, membuat waktu tunggu terasa lebih cepat.

• Implementasi: Saat navigasi dimulai, inject HTML Skeleton ke dalam #post-body sebelum data JSON dari API selesai diunduh.

B. Top Progress Bar (Ala YouTube/GitHub)

Gunakan garis loading super tipis (2px) di bagian paling atas layar.

• Library: NProgress (Sangat ringan).

• Logika:

  • Klik Link -> Bar jalan ke 30% -> Fetch Start.

  • Data diterima -> Bar jalan ke 70% -> Render HTML.

  • Gambar selesai load -> Bar 100% -> Hilang.

C. View Transitions API (The "Killer Feature")

Ini adalah teknologi browser terbaru (Chrome/Edge/Android) yang memungkinkan transisi antar halaman web terlihat seperti transisi aplikasi native (Morphing, Slide, Fade).

• Tanpa API ini: Halaman berkedip putih/kosong sebentar lalu konten baru muncul.

• Dengan API ini: Header diam di tempat, gambar thumbnail "terbang" membesar menjadi gambar utama postingan, teks lama memudar (cross-fade) menjadi teks baru.

• Kode:

  JavaScript

  // Di dalam router navigasi Anda
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      updateDOM(newContent); // Fungsi render Anda
    });
  } else {
    updateDOM(newContent); // Fallback browser lama
  }
  

2. Mobile Centric: The "Thumb Zone" & Gestures

Fokus Keyboard Centric memang untuk Power User di Desktop. Tapi trafik Blogger biasanya 80%+ dari Mobile. Agar terasa seperti aplikasi native (bukan sekadar web responsif), Anda harus menerapkan filosofi "Thumb-Driven Design".

Berikut adalah fitur Mobile-Beyond yang harus Anda tanamkan:

A. Bottom Sheet (Pengganti Modal Tengah)

Di Desktop, modal/dialog muncul di tengah layar. Di Mobile, itu sulit dijangkau jempol.

• Native Feel: Ubah semua Modal (Super Search, Share Sheet, Library, Menu) menjadi Bottom Sheet (Panel yang meluncur dari bawah).

• Implementasi CSS:

  CSS

  @media (max-width: 768px) {
    .gg-palette__modal, .gg-share-sheet__panel {
      position: fixed; bottom: 0; top: auto; left: 0; right: 0;
      width: 100%; max-width: 100%;
      border-radius: 20px 20px 0 0; /* Lengkung atas saja */
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .is-open .gg-palette__modal { transform: translateY(0); }
  }
  

B. Haptic Feedback (Getaran Tactile)

Aplikasi native memberikan getaran halus saat interaksi penting. Web juga bisa!

• API: navigator.vibrate(ms)

• Implementasi:

  • Saat tombol "Like" ditekan: navigator.vibrate(10) (Getaran sangat pendek/klik).

  • Saat "Share" ditekan: navigator.vibrate(15).

  • Saat error terjadi: navigator.vibrate([30, 50, 30]) (Getaran ganda).

• Syarat: Hanya jalan di Android (iOS memblokir ini untuk web demi privasi/baterai, tapi tidak error jika dipanggil).

C. Swipe Gestures (Navigasi Jari)

Jangan paksa user mencari tombol "X" kecil di pojok atas untuk menutup modal/menu.

• Fitur:

  • Swipe Down to Close: Untuk menutup Bottom Sheet/Gambar (Medium-zoom).

  • Swipe Left/Right: Untuk navigasi antar artikel (Previous/Next) atau Tab Kategori.

• Library: Gunakan library gesture ringan seperti Hammer.js (versi lite) atau tulis touch event listener (touchstart, touchmove, touchend) sederhana di main.js.

D. Safe Area Insets (iPhone Notch/Dynamic Island)

Agar terlihat profesional di iPhone terbaru, jangan biarkan header/footer tertutup "Poni" (Notch) atau garis Home Indicator di bawah.

• CSS Wajib:

  CSS

  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }
  .gg-header { padding-top: var(--safe-top); }
  .gg-dock { padding-bottom: calc(10px + var(--safe-bottom)); } /* Dock melayang di atas garis home */
  

E. Touch Active State (Responsivitas Sentuhan)

Di web biasa, ada jeda (delay) saat tombol ditekan. Di aplikasi, tombol langsung bereaksi (berubah warna/gelap) saat jari menyentuh, bukan saat jari diangkat.

• CSS: Jangan gunakan :hover untuk mobile. Gunakan :active atau class .is-pressed (via JS touchstart).

• Optimasi:

  CSS

  button, a {
    touch-action: manipulation; /* Menghilangkan delay 300ms di browser lama */
    -webkit-tap-highlight-color: transparent; /* Hilangkan kotak biru default Android */
  }
  

Rangkuman Strategi Mobile-Beyond

Jika Anda menerapkan View Transitions API dan Bottom Sheet dengan Haptics, user di HP hampir tidak akan bisa membedakan apakah mereka sedang membuka Blogspot atau aplikasi Native yang diinstall dari Play Store.

1. Micro-Interactions & Loading State (The "Native" Illusion)

Aplikasi native tidak pernah menampilkan layar putih kosong (blank white screen) saat memuat data. Mereka menggunakan transisi yang mulus.

• Skeleton Screens (Shimmer Effect):

  • Jangan gunakan: Spinner (lingkaran berputar) di tengah layar. Itu membosankan dan membuat waktu tunggu terasa lama.

  • Gunakan: Kotak-kotak abu-abu yang berkilau (shimmer) di tempat teks/gambar akan muncul.

  • Implementasi: Saat JS sedang fetch data (misal saat Load More atau buka Post via SPA), inject HTML Skeleton dulu ke DOM sebelum data JSON tiba.

• View Transitions API (Killer Feature):

  • Ini adalah standar web baru. Saat pindah dari "List Post" ke "Detail Post", browser tidak me-refresh halaman.

  • Efek: Gambar thumbnail di list bisa "terbang" dan membesar menjadi gambar header di postingan detail. Judul bergeser dengan mulus.

  • Kode Simpel:

    JavaScript

    if (document.startViewTransition) {
      document.startViewTransition(() => {
        updateDOM(newContent); // Fungsi render HTML baru Anda
      });
    } else {
      updateDOM(newContent); // Fallback browser lama
    }
    

• Haptic Feedback (Getaran Halus):

  • Aplikasi native memberi respons getar. Web juga bisa (khusus Android).

  • Implementasi: Panggil navigator.vibrate(50) (getaran 50ms) saat user melakukan aksi penting:

    • Menekan tombol "Like".

    • Berhasil menyalin link ("Copy Link").

    • Membuka menu/modal.

2. Mobile Centric Behaviour (The "Thumb Zone")

Kita sudah bicara soal Keyboard Centric (Desktop). Untuk Mobile, aturan mainnya adalah Jempol.

• Bottom Sheet (Bukan Modal Tengah):

  • Di Desktop, Command Palette atau Share Sheet muncul di tengah layar.

  • Di Mobile, itu susah dijangkau jempol satu tangan.

  • Solusi: Gunakan CSS Media Query untuk mengubah Modal menjadi Bottom Sheet (Panel yang meluncur dari bawah layar) di layar kecil.

  • Interaction: Tambahkan kemampuan swipe down untuk menutup sheet tersebut (menggunakan library gesture ringan atau touch event listener).

• Safe Area Insets (Poni HP/Notch):

  • HP modern punya "poni" di atas dan garis home indicator di bawah. Web biasa sering tertutup elemen ini.

  • Solusi: Gunakan variabel CSS env():

    CSS

    .gg-header { padding-top: env(safe-area-inset-top); }
    .gg-dock { padding-bottom: env(safe-area-inset-bottom); }
    

  • Ini membuat layout terlihat sangat profesional dan "sadar" perangkat.

• Touch Active State (Respons Sentuhan):

  • Di web, tombol seringkali ada delay atau tidak berubah warna saat disentuh (hanya saat klik selesai).

  • Solusi: Hapus delay 300ms klasik dengan CSS touch-action: manipulation. Gunakan pseudo-class :active atau tambahkan class .is-pressed via JS saat touchstart agar tombol terasa "hidup" saat jari menempel.

3. Satu "Hack" Cloudflare Workers untuk SEO (Enterprise Level)

Ini adalah satu-satunya kelemahan SPA (Single Page App) di Blogger: SEO & Social Preview.

Jika Anda mengubah konten halaman menggunakan JS (misal dari Home -> Artikel A), URL berubah, tapi jika User meng-copy link itu dan paste di WhatsApp, meta tag (judul/gambar/deskripsi) yang terbaca adalah meta tag Home, bukan Artikel A. Karena WhatsApp bot tidak menjalankan JS.

Solusi "Beyond" dengan Cloudflare Workers: Karena Anda sudah pakai Workers, manfaatkan fitur HTMLRewriter.

1. User request domain.com/p/artikel-a.html.

2. Worker mencegat request.

3. Worker mengambil HTML asli dari Blogger.

4. TAPI, Worker menyuntikkan meta tag yang benar (OG Image, Title) langsung ke dalam HTML sebelum dikirim ke browser/bot.

5. Hasil: WhatsApp/Google melihat meta tag yang sempurna, User melihat performa SPA yang cepat.

A. Dynamic Social Cards (OG Image Otomatis) - Fitur Sultan

Blogger hanya mengambil gambar pertama postingan sebagai thumbnail share (OG:Image).

• Tanpa Worker: Share link -> Muncul gambar persegi kecil/crop asal-asalan.

• Dengan Worker: Worker mendeteksi URL postingan, lalu secara on-the-fly mengubah tag <meta property="og:image"> agar mengarah ke Worker Image Generator (yang kita bahas sebelumnya).

• Hasil: Saat link dishare di WA, muncul gambar poster keren berisi Judul + Foto Author + Background, padahal Anda tidak pernah upload gambar itu.

B. Menghapus Jejak "Blogspot" (?m=1)

Blogger memaksa redirect ke ?m=1 untuk mobile user. Ini merusak keindahan URL dan kadang mengacaukan cache key.

• Dengan Worker: Anda bisa mencegat request, mengambil konten dari Blogger, lalu menghapus tag <link rel="canonical" href="...?m=1"> di HTML-nya sebelum dikirim ke user. User melihat URL bersih selamanya.

C. Inject Security Headers (CSP & HSTS)

Blogger tidak mengizinkan Anda menyentuh HTTP Headers.

• Dengan Worker: Anda bisa menambahkan header keamanan tingkat bank (HSTS, X-XSS-Protection) yang membuat situs Anda dinilai A+ di security headers check.

D. Lazy Load Native Comments (Performance Hack)

Komentar native Blogger itu "berat" (memuat banyak script dan iframe Google).

• Dengan HTMLRewriter: Anda bisa mengubah atribut src pada script komentar menjadi data-src di sisi server.

• Di Browser (JS): Script komentar tidak akan jalan saat page load (LCP jadi sangat cepat). Script baru dijalankan saat user scroll sampai bawah atau klik tombol "Show Comments". Ini membuat skor Lighthouse tembus 100/100 dengan mudah.

1. Partytown (Off-Main-Thread Scripting)

Blogger (dan script pihak ketiga seperti Google Analytics, Adsense, Facebook Pixel) terkenal "rakus" memakan Main Thread browser. Ini menyebabkan UI terasa "berat" atau macet (janky) saat scrolling awal.

• Masalah: Script analitik berjalan di thread yang sama dengan animasi UI dan interaksi user.

• Solusi Beyond: Gunakan Partytown.

• Cara Kerja: Partytown memindahkan eksekusi script pihak ketiga (GA4, GTM, FB Pixel) ke dalam Web Worker (thread latar belakang).

• Hasil: Main Thread 100% bebas untuk UI Anda. Skor Total Blocking Time (TBT) di Lighthouse bisa turun ke 0ms. Web terasa sangat ringan meskipun banyak tracker.

2. Speculation Rules API (The Native "Instant.page")

Anda menggunakan instant.page untuk preloading. Itu bagus, tapi itu library JS eksternal. Browser modern (Chrome/Edge) sekarang punya fitur native yang lebih canggih.

• Masalah: instant.page menambah beban JS (sedikit) dan memakan bandwidth.

• Solusi Beyond: Gunakan Speculation Rules API. Cukup inject JSON script di <head> atau via Cloudflare Worker:

  HTML

  <script type="speculationrules">
  {
    "prerender": [{
      "source": "document",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate" // Prerender saat hover > 200ms
    }]
  }
  </script>
  

• Kenapa Enterprise? Ini standar web masa depan. Lebih hemat baterai dan data daripada library JS manual, dan browser melakukan full prerender (bukan cuma prefetch), jadi halaman muncul instan secara harfiah.

3. Content-Security-Policy (CSP) Hash-based

Kita sudah bicara soal Security Headers via Worker. Untuk level "Paranoid Security" (Bank Grade):

• Masalah: Mengizinkan unsafe-inline pada script seringkali diperlukan di Blogger (karena widget bawaan), tapi itu berbahaya (XSS).

• Solusi Beyond: Gunakan Worker untuk menghitung SHA-256 Hash dari setiap inline script Blogger saat runtime, lalu tambahkan hash tersebut ke header CSP secara otomatis.

• Hasil: Anda bisa memblokir semua script jahat, tapi script Blogger yang sah tetap jalan tanpa perlu unsafe-inline.

4. Smart Image Negotiation (AVIF Support)

Anda sudah punya Cloudflare Worker Image Proxy untuk mengatasi CORS Canvas. Mari buat itu lebih pintar.

• Masalah: Google Images (Blogger) biasanya menyajikan WebP atau JPEG. Format AVIF jauh lebih kecil (kompresi 20-30% lebih baik dari WebP) dan kualitas lebih tinggi.

• Solusi Beyond: Update Worker Proxy Anda.

  • Cek header Accept dari browser user.

  • Jika mendukung image/avif, minta server Google untuk memberikan versi AVIF (jika tersedia) atau konversi on-the-fly (jika pakai Cloudflare Images berbayar).

  • Jika gratisan, minimal pastikan Worker meneruskan header Accept: image/webp ke Google agar browser Safari lama/kuno tidak dikasih JPEG besar.

5. Custom Offline Experience (Game/Saved Content)

PWA standar akan menampilkan "You are offline" saat tidak ada koneksi.

• Solusi Beyond:

  • Manfaatkan IDB-Keyval (IndexedDB) yang sudah Anda pasang.

  • Saat offline, tampilkan halaman khusus: "Anda sedang Offline. Berikut adalah artikel yang sudah Anda simpan di Library/Cache:".

  • List artikel yang pernah dibuka/di-bookmark user muncul di situ dan bisa dibaca full text (karena sudah di-cache Service Worker).

  • Easter Egg: Tambahkan micro-game sederhana (seperti Chrome Dino, tapi versi branding blog Anda) untuk menghibur user.

---

Rangkuman Ekosistem "pakrpp" (Final Version)

Inilah blueprint final Enterprise Grade Blogger PWA Anda:

1. Core: Blogger Hybrid (Canonical + SPA UX).

2. Edge: Cloudflare Workers (HTMLRewriter + Image Proxy + CSP Hasher).

3. Code: GitHub Actions (CI/CD + Minify).

4. Search: Fuse.js + LocalStorage Indexing.

5. Speed: Speculation Rules API (Native Prerender) + Partytown (Off-thread Scripts).

6. Media: Worker Proxy (CORS Fix + WebP/AVIF Negotiation) + Medium-zoom.

7. Offline: Service Worker (Workbox) + IDB-Keyval (Saved Articles Reader).

8. UX: View Transitions + Bottom Sheet + Haptics + Tinykeys.