Sekarang tuh apa-apa serba cepet, praktis, dan harus bisa dibuka di mana aja, kapan aja. Termasuk juga soal website dan blog. Nah, salah satu teknologi web kekinian yang makin hits namanya PWA alias Progressive Web App. Teknologi ini bikin blog atau website kamu bisa berasa kayak aplikasi beneran, bisa dipasang di layar utama HP tanpa harus buka Play Store atau App Store. Keren, kan?
🤔 Apa Itu PWA?
PWA itu singkatan dari Progressive Web App. Gampangnya, ini adalah aplikasi berbasis web yang bisa kamu buka dari browser kayak biasa, tapi juga bisa di-install langsung ke HP, kayak aplikasi asli. Jadi, web kamu bisa punya icon sendiri di home screen, tampil splash screen waktu dibuka, dan bahkan bisa dibuka walau lagi nggak ada internet (offline).
Kelebihan PWA Tampilannya responsif buat semua ukuran layar, loading-nya cepet, dan pengalaman pengguna jadi lebih nyaman. Blog kamu bakal keliatan lebih profesional, padahal bikinnya gak perlu coding ribet.
💡 Kenapa Perlu Install PWA di Blogger Secara Manual?
Karena Blogger belum nyediain fitur PWA bawaan, jadi ya kita harus pasang manual. Mulai dari bikin file manifest.json, nyiapin Konfigurasi-SmartInstall-PWA.js, sampai masukin link dan script ke HTML template blog. Tapi percayalah, ini worth it banget.
Bayangin aja, blog kamu bisa dibuka kayak aplikasi, tanpa harus buka browser dulu. Bisa tampil offline, punya icon sendiri, kelihatan lebih serius, bahkan aplikasi nya bisa di upload ke playstore. Apalagi buat kamu yang pengen branding blog makin kece, atau pengen beda dari blog biasa — PWA adalah jalan ninja-nya.
Han Haoyu
🔧 Persiapan Awal
Sebelum kita masuk ke teknis instalasi PWA di Blogger, ada baiknya kamu siapin dulu beberapa hal biar prosesnya lancar. Gak ribet kok, cuma butuh alat tempur digital yang udah pasti familiar banget buat para blogger dan web enthusiast kekinian.
🧰 Tools dan Akun yang Diperlukan Nah, sebelum mulai, pastiin kamu udah punya ini dulu:
- Akun GitHub – buat nyimpen file
manifest.jsondan file ikon kamu (tapi kalau mau file iconnya pakai upload via blogger juga bisa). Nantinya file ini bisa diakses via CDN GitHub kayak jsDelivr atau bisa juga menggunakan fitur convert github ke cdn jsdelivr yang dibuat oleh hanhaoyu.com (Tools Github to JsDelivr CDN) - Akun Blogger – ya iyalah, karena project-nya buat blog di Blogger.
- Teks editor – opsional, bisa pakai Notepad++, VSCode, atau bahkan Notepad biasa buat nyiapin file JSON dan JS.
- Browser modern – Chrome atau Edge buat ngetes hasil PWA kamu. Soalnya ada fitur DevTools yang berguna banget buat ngecek manifest & service worker.
📁 Struktur File yang Dibutuhkan
Biar blog kamu bisa berubah jadi PWA, minimal ada beberapa file penting yang harus kamu punya dan upload ke GitHub:
manifest.json
Ini file utama yang berisi identitas dan pengaturan aplikasi kamu. Mulai dari nama app, warna tema, start URL, sampai shortcut dan ikon-ikon.📄 File manifest.json Lengkap (Bisa Langsung Dipakai)
Ganti bagian "name", "start_url", "icons", dan "shortcuts" sesuai kebutuhan dan struktur blog kamu.{ "name": "HAN HANHAOYU", "short_name": "HAN HAOYU", "start_url": "https://webmu.com/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "description": "hanhaoyu.com (Unleashing Limitless Potential) merupakan platform berbagi wawasan, pandangan, dan pengetahuan dari Muhammad Hayyu Hani Nuril.", "version": "1", "developer": "Han Haoyu", "keywords": "", "author": "Han Haoyu", "content_type": "pengembangan diri, potensi tanpa batas, motivasi hidup, inspirasi kesuksesan, pengembangan pribadi, pemberdayaan individu, eksplorasi potensi, kesuksesan hidup, perjalanan sukses, tips sukses, mentalitas berkembang, transformasi diri, motivasi pribadi, situs inspiratif, blog pengembangan diri, potensi unik, cara meraih tujuan, pencapaian hidup, strategi sukses, kehidupan bermakna, kisah inspiratif, pandangan hidup, wawasan kehidupan, motivasi harian, tujuan hidup, hidup penuh makna, pertumbuhan pribadi, produktivitas, blog motivasi, hanhaoyu.com, Muhammad Hayyu Hani Nuril, Unleashing Limitless Potential, Han Haoyu, hanhaoyu, www.hanhaoyu.com, portfolio", "lang": "id", "age_verification": "18+", "copyright": "HAN HAOYU", "app_rating": 5, "social_media": { "facebook": "https://webmu.com/p/facebook.html", "twitter": "https://webmu.com/p/twitter.html", "instagram": "https://webmu.com/p/instagram.html", "linkedin": "https://webmu.com/p/linkedin.html" }, "privacy_policy": "https://webmu.com/p/privacy-policy.html", "terms_of_service": "https://webmu.com/p/terms-and-conditions.html", "icons": [ { "src": "https://blogger.googleusercontent.com/...", "sizes": "36x36", "type": "image/png", "density": "0.75" }, { "src": "https://blogger.googleusercontent.com/...", "sizes": "48x48", "type": "image/png", "density": "1.0" }, { "src": "https://blogger.googleusercontent.com/...", "sizes": "72x72", "type": "image/png", "density": "1.5" }, { "src": "https://blogger.googleusercontent.com/...", "sizes": "96x96", "type": "image/png", "density": "2.0" }, { "src": "https://blogger.googleusercontent.com/...", "sizes": "144x144", "type": "image/png", "density": "3.0" }, { "src": "https://blogger.googleusercontent.com/...", "sizes": "192x192", "type": "image/png", "density": "4.0" }, { "src": "https://blogger.googleusercontent.com/...", "sizes": "512x512", "type": "image/png", "density": "5.0" } ], "shortcuts": [ { "name": "Login", "url": "https://webmu.com/p/login.html", "description": "Masuk ke akun Anda" }, { "name": "Profile", "url": "https://webmu.com/p/profile.html", "description": "Lihat profil Anda" }, { "name": "Register", "url": "https://webmu.com/p/register.html", "description": "Daftar akun baru" }, { "name": "Paket Premium", "url": "https://webmu.com/p/paket-premium.html", "description": "Lihat paket premium yang tersedia" }, { "name": "List Judul - Sitemap", "url": "https://webmu.com/p/sitemap-v5.html", "description": "Lihat daftar judul" }, { "name": "Translator", "url": "https://webmu.com/p/translator.html", "description": "Informasi tentang translator" }, { "name": "Layanan Tambahan", "url": "https://webmu.com/p/layanan-tambahan.html", "description": "Layanan yang kami tawarkan" }, { "name": "Affiliates", "url": "https://webmu.com/p/affiliates.html", "description": "Program afiliasi" }, { "name": "Partnership", "url": "https://webmu.com/p/partnership.html", "description": "Informasi kemitraan" }, { "name": "Contact Us", "url": "https://webmu.com/p/contact-us_16.html", "description": "Hubungi kami" } ], "telegram_groups": [ { "name": "Telegram Group", "url": "https://t.me/hanhaoyucom" }, { "name": "Telegram Channel", "url": "https://t.me/v2hanhaoyu" } ], "categories": [ { "name": "Manhwa", "url": "https://webmu.com/search/label/Manhwa" }, { "name": "Manga", "url": "https://webmu.com/search/label/Manga" }, { "name": "Manhua", "url": "https://webmu.com/search/label/Manhua" }, { "name": "POV", "url": "https://webmu.com/search/label/POV" }, { "name": "Doujinshi", "url": "https://webmu.com/search/label/Doujinshi" }, { "name": "Drama", "url": "https://webmu.com/search/label/Drama" }, { "name": "Novel", "url": "https://webmu.com/search/label/Novel" }, { "name": "Fan Art", "url": "https://webmu.com/search/label/Fan-Art" }, { "name": "Donghua", "url": "https://webmu.com/search/label/Donghua" }, { "name": "Anime", "url": "https://webmu.com/search/label/Anime" }, { "name": "Asupan", "url": "https://webmu.com/search/label/Asupan" }, { "name": "Spoiler", "url": "https://webmu.com/search/label/Spoiler" } ], "screenshots": [ { "label": "Welcome", "url": "https://blogger.googleusercontent.com/img/b/.../ES01-WELCOME.jpg" }, { "label": "Notifikasi Promo", "url": "https://blogger.googleusercontent.com/img/b/.../ES-NOTIFICATION-PROMOTION.jpg" }, { "label": "Homepage", "url": "https://blogger.googleusercontent.com/img/b/.../ES-HOMEPAGE-MODE-TERANG.jpg" } ] }Properti Deskripsi Contoh Wajib? nameNama lengkap aplikasi yang tampil di splash screen V2 HAN HANHAOYU Ya short_nameNama singkat yang tampil di home screen V2 HAN HAOYU Ya start_urlURL awal saat PWA dibuka dari home screen / Ya displayMode tampilan PWA (standalone, fullscreen, dll) standalone Ya background_colorWarna latar belakang saat splash screen muncul #ffffff Ya theme_colorWarna utama browser di Android #000000 Ya descriptionDeskripsi singkat tentang aplikasi Translator Community... Tidak iconsDaftar ikon dengan berbagai ukuran untuk splash dan install 192x192, 512x512 Ya shortcutsLink cepat ke halaman penting di app Login, Register, Profile Tidak screenshotsPreview tampilan app (untuk store dan test) Homepage, Notifikasi Tidak social_mediaLink ke sosial media app Facebook, Twitter Tidak privacy_policyLink ke halaman kebijakan privasi /p/privacy-policy.html Disarankan terms_of_serviceLink ke halaman syarat & ketentuan /p/terms-and-conditions.html Disarankan Konfigurasi-SmartInstall-PWA.jsKode dibawah kamu tempel didalam tempat css kamu ya, biasanya ada di dalam
</style>:.containerPWAbyHHC{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.1);padding:32px;max-width:400px;width:100%;justify-self:center}.titlePWAbyHHC{text-align:center;margin:0!important;color:#333;font-size:20px;font-weight:600}.btnPWAbyHHC{background:var(--notifC);color:#fff;border:none;border-radius:12px;padding:16px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:60px;margin-top:10px}.btnPWAbyHHC:hover{background:var(--notifU);color:var(--notifC);transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,92,231,.3)}.btnPWAbyHHC:active{transform:translateY(0)}.iconPWAbyHHC{width:18px;height:18px;fill:currentColor}.notifPWAbyHHC{position:fixed;top:-100px;left:50%;transform:translateX(-50%);background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);padding:16px 20px 8px;min-width:300px;max-width:90vw;z-index:9999;transition:.4s cubic-bezier(.175, .885, .32, 1.275);border-left:4px solid var(--notifC)}.notifPWAbyHHC.showPWAbyHHC{top:70px}.notifContentPWAbyHHC{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;padding-right:24px}.notifTextPWAbyHHC{flex:1;font-size:14px;color:#333;line-height:1.4}.notifButtonsPWAbyHHC{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.notifBtnPWAbyHHC{background:var(--notifC);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12px;cursor:pointer;transition:.2s}.notifBtnPWAbyHHC:hover{background:#5a4fcf}.notifBtnPWAbyHHC.secondaryPWAbyHHC{background:#f8f9fa;color:#666;border:1px solid #e9ecef}.drK .containerPWAbyHHC,.drK .notifPWAbyHHC{background:var(--contentBa)}.notifBtnPWAbyHHC.secondaryPWAbyHHC:hover{background:#e9ecef}.progressBarPWAbyHHC{height:2px;background:#e9ecef;border-radius:1px;overflow:hidden;margin-top:12px}.progressFillPWAbyHHC{height:100%;background:var(--notifC);transition:width linear;border-radius:1px}.closeBtnPWAbyHHC{position:absolute;top:8px;right:8px;background:0 0;border:none;color:#999;cursor:pointer;font-size:18px;line-height:1;padding:4px}.closeBtnPWAbyHHC:hover{color:#666}.watermarkPWAbyHHC{text-align:center;font-size:10px;color:#999;margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0}.watermarkPWAbyHHC a{color:var(--notifC);text-decoration:none}.watermarkPWAbyHHC a:hover{text-decoration:underline}@media (max-width:480px){.notifPWAbyHHC{left:10px;right:10px;transform:none;max-width:none;min-width:auto}.notifButtonsPWAbyHHC{flex-direction:column}.notifBtnPWAbyHHC{flex:1}}.drK .notifPWAbyHHC{border-left:4px solid var(--notifU)}.drK .notifTextPWAbyHHC,.drK .titlePWAbyHHC{color:#fff}Untuk kode dibawah kamu tempel diatas
</head>ya:<div class="containerPWAbyHHC"> <h1 class="titlePWAbyHHC">Instal Aplikasimu Sekarang!</h1> <button class="btnPWAbyHHC" onclick="triggerInstallPWAbyHHC()"> <svg class="iconPWAbyHHC" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>Klik Disini </button> </div>Lalu Kode dibawah kamu tempel diatas
</body>ya:const AktifkanDownloadAPKbyHHC = "true", DurasiNotifbyHHC = "5", NotifAllbyHHC = { notifUdahDownload: "Aplikasi sudah terinstall! Buka aplikasi untuk pengalaman yang lebih baik.", notifBelumDownload: "Aplikasi siap diinstall! Dalam beberapa detik akan muncul pop up instal aplikasi, jika tidak muncul silakan klik button dibawah untuk langsung menginstal.", notifPerangkatIOS: "Untuk install di iPhone/iPad: Tap tombol Share, lalu pilih 'Add to Home Screen'.", notifPerangkatAndroid: "Untuk install di Android: Tap menu browser (⋮), lalu pilih 'Add to Home screen'.", notifPerangkatFirefox: "Untuk install di Firefox: Klik menu (≡), lalu pilih 'Install'.", notifPerangkatSafari: "Untuk install di Safari: Klik File menu, lalu pilih 'Add to Dock'.", notifTidakDidukung: "Aplikasi sudah terinstall! Buka aplikasi untuk pengalaman yang lebih baik. Jika browser tidak mendukung instalasi PWA. Gunakan Chrome, Safari, atau Firefox terbaru.", InstalasiPWABatalbyHHC: "Instalasi dibatalkan. Coba lagi atau gunakan cara manual.", InstalasiPWABerhasilbyHHC: "Berhasil! Aplikasi sedang diinstall ke perangkat Anda.", BukaAplikasibyHHC: "Buka Aplikasi", PWAInstallErrorbyHHC: "PWA install error", ManualGuidebyHHC: "Manual Guide", PWABerhasilInstallbyHHC: "PWA berhasil diinstall!", LinkDokumentasiPWAbyHHC: "/instal-pwa-manual", InstallNowbyHHC: "Install Now", }; (function(_0x4b83a5,_0x22df7b){const _0x2ff7f7=_0x1b8c,_0x4f00a8=_0x4b83a5();while(!![]){try{const _0x17d2d6=-parseInt(_0x2ff7f7(0x197))/(-0x2338+0xa08+0x1931)*(-parseInt(_0x2ff7f7(0x203))/(0x1248+0x2*0x505+-0x1c50))+-parseInt(_0x2ff7f7(0x2ec))/(-0x6e*-0x29+0x9c6+-0x1b61*0x1)*(parseInt(_0x2ff7f7(0x1be))/(-0x952+0x204e*-0x1+0xcd*0x34))+parseInt(_0x2ff7f7(0x199))/(0x135c*-0x2+-0x12da+-0x17*-0x281)*(parseInt(_0x2ff7f7(0x232))/(-0x1dc3+-0xb4d+0x2916))+-parseInt(_0x2ff7f7(0x247))/(-0xc+-0x84b+-0x165*-0x6)+parseInt(_0x2ff7f7(0x2c0))/(0x5*-0x7a1+-0xcf4+0x3321)+-parseInt(_0x2ff7f7(0x209))/(0xd7*0x1f+-0x143f+-0x5c1)*(parseInt(_0x2ff7f7(0x1f7))/(-0x1ead+-0x1*0xc87+0x36*0xcd))+-parseInt(_0x2ff7f7(0x21a))/(-0x95d+-0x1217+0x1b7f)*(-parseInt(_0x2ff7f7(0x20e))/(0x1a45*0x1+0x13c+-0x1b75));if(_0x17d2d6===_0x22df7b)break;else _0x4f00a8['push'](_0x4f00a8['shift']());}catch(_0x4116e2){_0x4f00a8['push'](_0x4f00a8['shift']());}}}(_0x14df,-0x2*0x16db6+0xc816+0x3f039));const _0x314d04=_0x1b3c;(function(_0x18a101,_0x599883){const _0x371502=_0x1b8c,_0x320832={'ADVvq':function(_0x29d622){return _0x29d622();},'muGPO':function(_0x30aadf,_0x4677a7){return _0x30aadf+_0x4677a7;},'UTBbC':function(_0x10e4f1,_0x1b82a2){return _0x10e4f1+_0x1b82a2;},'AuTsu':function(_0x441022,_0x1048c9){return _0x441022+_0x1048c9;},'enwGx':function(_0x2d0a78,_0x20774e){return _0x2d0a78/_0x20774e;},'HqGqv':function(_0x30cd98,_0x4dac23){return _0x30cd98(_0x4dac23);},'pJIwo':function(_0x5e0ee8,_0x1ec166){return _0x5e0ee8/_0x1ec166;},'QuQgb':function(_0x420a4f,_0x1afd3f){return _0x420a4f(_0x1afd3f);},'HyvpI':function(_0x35d36e,_0x58a35d){return _0x35d36e*_0x58a35d;},'jcWOY':function(_0x21f1b2,_0x3fdc43){return _0x21f1b2/_0x3fdc43;},'KJBhe':function(_0x200641,_0x165e5c){return _0x200641(_0x165e5c);},'zZsuR':function(_0x313d30,_0x384c8f){return _0x313d30/_0x384c8f;},'dUoAt':function(_0x3601a0,_0x1c197a){return _0x3601a0(_0x1c197a);},'eBRWk':function(_0x1393c9,_0x4027ec){return _0x1393c9(_0x4027ec);},'fQNaS':function(_0x3cfd7e,_0x37b691){return _0x3cfd7e*_0x37b691;},'AgZjb':function(_0x4ca72a,_0x45d459){return _0x4ca72a/_0x45d459;},'VEAVu':function(_0x4f362d,_0x48b251){return _0x4f362d(_0x48b251);},'VnyXL':function(_0x768521,_0x4d14d6){return _0x768521(_0x4d14d6);},'cYree':function(_0x2ed4dd,_0x2c20a4){return _0x2ed4dd*_0x2c20a4;},'sWTsp':function(_0x54dd1e,_0x700c99){return _0x54dd1e/_0x700c99;},'BomGO':function(_0x46a191,_0x23d451){return _0x46a191(_0x23d451);},'nLdHN':function(_0x5a8411,_0x3afa3a){return _0x5a8411(_0x3afa3a);},'XydXC':function(_0x401fc8,_0x268409){return _0x401fc8*_0x268409;},'BWBgb':function(_0x1c3efc,_0x3af89d){return _0x1c3efc(_0x3af89d);},'JohPI':function(_0x17f1b4,_0x196929){return _0x17f1b4/_0x196929;},'cDhFf':function(_0x113807,_0x11d347){return _0x113807(_0x11d347);},'UFBuI':function(_0x61a41f,_0x340059){return _0x61a41f===_0x340059;},'TzFgi':_0x371502(0x228),'FWcCV':_0x371502(0x1ba)},_0x334a6b=_0x1b3c,_0x38b338=_0x320832[_0x371502(0x17e)](_0x18a101);while(!![]){try{const _0x28de91=_0x320832[_0x371502(0x294)](_0x320832[_0x371502(0x294)](_0x320832[_0x371502(0x28f)](_0x320832[_0x371502(0x28f)](_0x320832[_0x371502(0x28f)](_0x320832[_0x371502(0x1a2)](_0x320832[_0x371502(0x261)](_0x320832[_0x371502(0x2d4)](parseInt,_0x320832[_0x371502(0x2d4)](_0x334a6b,-0x2b*-0x14+0x1906+-0x1bee)),0x22b*0x5+-0x1ecc+0x92*0x23),_0x320832[_0x371502(0x1b6)](_0x320832[_0x371502(0x183)](parseInt,_0x320832[_0x371502(0x183)](_0x334a6b,-0x8b*-0x11+0xb0*-0x14+0x504)),-0x8f9+0x6*0x14c+0x1*0x133)),_0x320832[_0x371502(0x2dd)](_0x320832[_0x371502(0x21b)](-_0x320832[_0x371502(0x2d4)](parseInt,_0x320832[_0x371502(0x2eb)](_0x334a6b,-0x60*0x42+-0xf9*-0x26+-0x49*0x29)),0x1e17+-0x223*0x1+-0x1bf1),_0x320832[_0x371502(0x295)](_0x320832[_0x371502(0x273)](parseInt,_0x320832[_0x371502(0x1a5)](_0x334a6b,-0x1*0xdc7+0x365*0x1+0x1*0xaeb)),-0x6*-0x4be+0x6*-0x30e+-0xa1c))),_0x320832[_0x371502(0x1f6)](_0x320832[_0x371502(0x1b8)](-_0x320832[_0x371502(0x241)](parseInt,_0x320832[_0x371502(0x183)](_0x334a6b,-0x2f*-0x79+-0x16d5+0x1*0x14b)),0x10*-0xf+-0x1*0x1922+-0x1a17*-0x1),_0x320832[_0x371502(0x21b)](_0x320832[_0x371502(0x1fe)](parseInt,_0x320832[_0x371502(0x2d4)](_0x334a6b,0x15c7*0x1+-0x22ae+0xd8d)),-0xdb8*-0x2+-0x4f*-0x5b+-0x377f))),_0x320832[_0x371502(0x1ab)](_0x320832[_0x371502(0x2e8)](_0x320832[_0x371502(0x1fe)](parseInt,_0x320832[_0x371502(0x25b)](_0x334a6b,-0x127b+-0x1*0x17e7+0x1*0x2adf)),-0x97a+0x2361+-0x19e*0x10),_0x320832[_0x371502(0x295)](-_0x320832[_0x371502(0x183)](parseInt,_0x320832[_0x371502(0x1fd)](_0x334a6b,0x1a6f*-0x1+0x53*0x67+-0x667)),0xb3a+0x1*-0x2144+-0x1*-0x1612))),_0x320832[_0x371502(0x1b6)](-_0x320832[_0x371502(0x2d4)](parseInt,_0x320832[_0x371502(0x25b)](_0x334a6b,0xf52+0x55c+-0x1417)),0xd8*0x27+-0xcad+-0x2*0xa19)),_0x320832[_0x371502(0x1b5)](_0x320832[_0x371502(0x295)](-_0x320832[_0x371502(0x1fd)](parseInt,_0x320832[_0x371502(0x18a)](_0x334a6b,0x8bf*0x1+0x17f5+-0x7b*0x43)),0x1a74+0x522+0x7e3*-0x4),_0x320832[_0x371502(0x225)](-_0x320832[_0x371502(0x2df)](parseInt,_0x320832[_0x371502(0x273)](_0x334a6b,0x1d*-0x107+-0x2448+0x42ab)),0x7*0x4cb+-0x12d3+-0x1*0xeaf)));if(_0x320832[_0x371502(0x2b8)](_0x28de91,_0x599883))break;else _0x38b338[_0x320832[_0x371502(0x2d7)]](_0x38b338[_0x320832[_0x371502(0x213)]]());}catch(_0x1267e8){_0x38b338[_0x320832[_0x371502(0x2d7)]](_0x38b338[_0x320832[_0x371502(0x213)]]());}}}(_0x45b6,-0x1291*0x1a+-0x3ebff+0x8334f));let deferredPromptPWAbyHHC,isInstalledPWAbyHHC=!(0x11*-0x220+-0x10de*-0x2+0x1*0x265),currentNotifPWAbyHHC=null,notifTimeoutPWAbyHHC=null,installTimeoutPWAbyHHC=null,shouldTriggerInstallPWAbyHHC=!(0x1a24+0x1c96+-0x36b9);function showNotificationPWAbyHHC(_0x52197a,_0x566980=[],_0x1da219=(0xca3+-0x1a29*-0x1+-0x27e*0xe)*parseInt(DurasiNotifbyHHC)){const _0x5e177c=_0x1b8c,_0x2acdda={'MunZK':function(_0x315105,_0x8efad6){return _0x315105(_0x8efad6);},'Bbvnd':function(_0x56e094,_0x566be8){return _0x56e094+_0x566be8;},'MkVXY':function(_0x29daed,_0x19aedf){return _0x29daed(_0x19aedf);},'GhdQC':_0x5e177c(0x19e)+'t','hVbXt':_0x5e177c(0x23d),'MaYma':function(_0x1746c8,_0x1819c6){return _0x1746c8(_0x1819c6);},'iGKSx':function(_0x345feb){return _0x345feb();},'bAbLX':function(_0x1ad022,_0x5c6600,_0x16f8a3){return _0x1ad022(_0x5c6600,_0x16f8a3);},'lomlg':function(_0x277cfd,_0x3385ab){return _0x277cfd(_0x3385ab);},'oDhju':_0x5e177c(0x1e8),'oXljz':function(_0x1e52d5,_0x5ebf05){return _0x1e52d5(_0x5ebf05);},'MFkiE':function(_0x47a65e,_0x3eb5b3){return _0x47a65e(_0x3eb5b3);},'BsWpw':_0x5e177c(0x292),'xizWY':_0x5e177c(0x242),'UijZp':function(_0x576543,_0x471199){return _0x576543(_0x471199);},'hbyNY':_0x5e177c(0x22a)+_0x5e177c(0x231)+_0x5e177c(0x210)+_0x5e177c(0x293)+_0x5e177c(0x245)+_0x5e177c(0x201)+_0x5e177c(0x2bf)+_0x5e177c(0x1bd)+_0x5e177c(0x2ea)+_0x5e177c(0x180)+_0x5e177c(0x23f)+_0x5e177c(0x24f)+_0x5e177c(0x1eb)+_0x5e177c(0x229)+_0x5e177c(0x286),'hTqIK':_0x5e177c(0x2f9)+_0x5e177c(0x194)+_0x5e177c(0x2a0)+_0x5e177c(0x20b)+_0x5e177c(0x18e)+_0x5e177c(0x194)+_0x5e177c(0x283)+_0x5e177c(0x1c8)+_0x5e177c(0x2c5)+_0x5e177c(0x217)+_0x5e177c(0x290)+_0x5e177c(0x1cb)+_0x5e177c(0x1bb)+_0x5e177c(0x2cb)+_0x5e177c(0x18d)+_0x5e177c(0x205)+_0x5e177c(0x2de)+_0x5e177c(0x2fc)+_0x5e177c(0x22d)+_0x5e177c(0x2d5)+_0x5e177c(0x19f)+_0x5e177c(0x1b7)+_0x5e177c(0x1e9)+_0x5e177c(0x2fb)+'>','UAHHh':function(_0xcaf3b2,_0x5a35d7){return _0xcaf3b2(_0x5a35d7);},'jnUKl':function(_0x15fa21,_0x40586b){return _0x15fa21(_0x40586b);},'ycCpp':function(_0x2e94eb,_0x4df41a,_0x49cd04){return _0x2e94eb(_0x4df41a,_0x49cd04);},'gbYdO':_0x5e177c(0x193)+_0x5e177c(0x2d1),'aYArP':function(_0x8c119,_0x30244e){return _0x8c119(_0x30244e);},'RvCll':_0x5e177c(0x2a2),'neRYk':function(_0xed5cd9,_0x2d762d){return _0xed5cd9(_0x2d762d);},'ROEWe':function(_0x73ea35,_0x214429){return _0x73ea35(_0x214429);}},_0x3262ea=_0x1b3c;if(currentNotifPWAbyHHC&&document[_0x2acdda[_0x5e177c(0x27c)](_0x3262ea,-0x3*-0x7e7+-0x10dd+-0xc5*0x8)][_0x2acdda[_0x5e177c(0x1e7)](_0x3262ea,0x6*-0x21e+0x18e5+-0xb82)](currentNotifPWAbyHHC)&&(document[_0x2acdda[_0x5e177c(0x1aa)]][_0x2acdda[_0x5e177c(0x224)](_0x3262ea,0x19b7+0x24ad+0x1*-0x3dc7)](currentNotifPWAbyHHC),notifTimeoutPWAbyHHC&&_0x2acdda[_0x5e177c(0x25d)](clearTimeout,notifTimeoutPWAbyHHC)),(currentNotifPWAbyHHC=document[_0x2acdda[_0x5e177c(0x2ed)](_0x3262ea,0x3*0x65+0x32*0x48+0xeb1*-0x1)](_0x2acdda[_0x5e177c(0x299)]))[_0x2acdda[_0x5e177c(0x26f)]]=_0x2acdda[_0x5e177c(0x27c)](_0x3262ea,-0x27*-0xca+-0x4ee+0x1933*-0x1),currentNotifPWAbyHHC[_0x2acdda[_0x5e177c(0x238)](_0x3262ea,0xb*0x80+-0x5f3+0x11e)]=_0x2acdda[_0x5e177c(0x1d9)](_0x2acdda[_0x5e177c(0x1d9)](_0x2acdda[_0x5e177c(0x269)],_0x52197a),_0x2acdda[_0x5e177c(0x2d2)]),_0x566980[_0x2acdda[_0x5e177c(0x224)](_0x3262ea,0x1b87+-0x224b*0x1+0x3d*0x1f)]){let _0x2d751f=currentNotifPWAbyHHC[_0x2acdda[_0x5e177c(0x1e2)](_0x3262ea,0x63*-0x11+0x1936+-0x1c*0xa6)](_0x2acdda[_0x5e177c(0x1db)](_0x3262ea,-0xbc1+-0x1093+0x1*0x1cfb));_0x566980[_0x2acdda[_0x5e177c(0x2ed)](_0x3262ea,0x5*0x145+-0x1*-0xd4d+-0x1*0x133b)](_0x27b539=>{const _0x3f6957=_0x5e177c,_0x2953c0=_0x3262ea;let _0xe6e33f=document[_0x2acdda[_0x3f6957(0x220)](_0x2953c0,0x11ca+-0x2043+0xf07)](_0x2acdda[_0x3f6957(0x220)](_0x2953c0,0x1e50+0xe5*0x17+-0x3277*0x1));_0xe6e33f[_0x2acdda[_0x3f6957(0x220)](_0x2953c0,0x1a3e+0xe17*-0x1+0x14a*-0x9)]=_0x2acdda[_0x3f6957(0x1d9)](_0x2acdda[_0x3f6957(0x27c)](_0x2953c0,-0x37c*0x6+-0x109e+0x2620),_0x27b539[_0x2acdda[_0x3f6957(0x27c)](_0x2953c0,-0x291+0x14aa+-0x31*0x5b)]||''),_0xe6e33f[_0x2acdda[_0x3f6957(0x17c)]]=_0x27b539[_0x2acdda[_0x3f6957(0x27c)](_0x2953c0,0x1d2c+0x2f*0x99+-0x38a3*0x1)],_0xe6e33f[_0x2acdda[_0x3f6957(0x208)]]=_0x27b539[_0x2acdda[_0x3f6957(0x224)](_0x2953c0,-0x1c4*0x5+-0x1ad7+-0x10*-0x242)],_0x2d751f[_0x2acdda[_0x3f6957(0x27c)](_0x2953c0,-0x4*0x79b+0x23dc+-0x4f7)](_0xe6e33f);});}document[_0x2acdda[_0x5e177c(0x224)](_0x3262ea,-0xfb+-0x21c6+0x2371)][_0x2acdda[_0x5e177c(0x2ed)](_0x3262ea,0x7*-0x421+-0x14dd+0x323d)](currentNotifPWAbyHHC),_0x2acdda[_0x5e177c(0x1cc)](setTimeout,()=>currentNotifPWAbyHHC[_0x3262ea(-0x1e73+0x1810+0x6ff)][_0x3262ea(0x7e*0x35+0x216b+-0x3ae8)](_0x5e177c(0x1df)+'HC'),0xdd2+-0x1*-0x1599+0xbad*-0x3);let _0x28cd27=currentNotifPWAbyHHC[_0x2acdda[_0x5e177c(0x207)]](_0x2acdda[_0x5e177c(0x296)](_0x3262ea,-0x1646*0x1+-0xa13*-0x1+0x1*0xcbb));_0x28cd27[_0x2acdda[_0x5e177c(0x1fc)]][_0x2acdda[_0x5e177c(0x282)](_0x3262ea,0x1*-0xd3d+0x1785+-0x9da)]=_0x2acdda[_0x5e177c(0x216)](_0x3262ea,-0x1683+-0xf5e+0x2674),_0x28cd27[_0x2acdda[_0x5e177c(0x220)](_0x3262ea,0x1*-0x1b2d+-0xed+0x1c8a)][_0x2acdda[_0x5e177c(0x1e7)](_0x3262ea,0xf3d+-0x1*0x1fa9+0x10fd*0x1)]=_0x2acdda[_0x5e177c(0x1d9)](_0x1da219,'ms'),_0x2acdda[_0x5e177c(0x1cc)](setTimeout,()=>_0x28cd27[_0x3262ea(0x48*-0x25+-0x1*0x1f24+-0x1*-0x29fc)][_0x3262ea(-0x15*-0x85+0x1*0x1216+0x1c91*-0x1)]='0%',-0x15*0x1a1+-0x2382+0x467f),notifTimeoutPWAbyHHC=_0x2acdda[_0x5e177c(0x1c7)](setTimeout,()=>{const _0x1bfa96=_0x5e177c;_0x2acdda[_0x1bfa96(0x239)](hideNotificationPWAbyHHC),shouldTriggerInstallPWAbyHHC&&(shouldTriggerInstallPWAbyHHC=!(0x1*0x16bd+0x1db3+-0x346f),_0x2acdda[_0x1bfa96(0x1c7)](setTimeout,()=>triggerInstallPromptPWAbyHHC(),0x9d5*-0x1+-0x2606+0x1*0x31cf));},_0x1da219);}function hideNotificationPWAbyHHC(){const _0x5ab908=_0x1b8c,_0x1b262a={'sXkEm':function(_0x5d06ea,_0x47b30d){return _0x5d06ea(_0x47b30d);},'IRDYA':_0x5ab908(0x176),'giOMB':function(_0x46fe00,_0x5eff10){return _0x46fe00(_0x5eff10);},'oTfZV':function(_0x8bf4dc,_0x18ba49){return _0x8bf4dc(_0x18ba49);},'HfnHr':_0x5ab908(0x250),'jlsSb':function(_0x3a9c4d,_0x592f59){return _0x3a9c4d(_0x592f59);},'qyRPF':function(_0x38c8e1,_0x462e15,_0x47eb5d){return _0x38c8e1(_0x462e15,_0x47eb5d);}},_0x177faf=_0x1b3c;currentNotifPWAbyHHC&¤tNotifPWAbyHHC[_0x1b262a[_0x5ab908(0x2e3)]][_0x1b262a[_0x5ab908(0x1ca)](_0x177faf,-0x1b42*-0x1+0x6e5+-0x2178)](_0x1b262a[_0x5ab908(0x27f)](_0x177faf,-0x70c+0x61*0x33+-0xbb2))&&(currentNotifPWAbyHHC[_0x1b262a[_0x5ab908(0x24e)](_0x177faf,-0x8*-0x2fc+0x44*-0x81+0xb00)][_0x1b262a[_0x5ab908(0x289)]](_0x1b262a[_0x5ab908(0x1ca)](_0x177faf,-0x1d55+-0x8*0x397+0x3aa2)),notifTimeoutPWAbyHHC&&_0x1b262a[_0x5ab908(0x178)](clearTimeout,notifTimeoutPWAbyHHC),_0x1b262a[_0x5ab908(0x22c)](setTimeout,()=>{const _0x247dbf=_0x5ab908,_0x509db7=_0x177faf;document[_0x1b262a[_0x247dbf(0x1ca)](_0x509db7,-0xf1c+0xd3*-0x24+0x2d78)][_0x1b262a[_0x247dbf(0x1ca)](_0x509db7,0x1*-0x1b1c+-0x17f*0xe+-0x3*-0x103f)](currentNotifPWAbyHHC)&&document[_0x1b262a[_0x247dbf(0x1ca)](_0x509db7,0x229+-0x1*-0x7c1+0x49d*-0x2)][_0x1b262a[_0x247dbf(0x1ca)](_0x509db7,-0x2*-0xa21+0x1*-0xa49+0x1*-0x95c)](currentNotifPWAbyHHC);},0xb*0xc6+0x11d8+-0x18ca),shouldTriggerInstallPWAbyHHC&&(shouldTriggerInstallPWAbyHHC=!(0x179d+-0x5c5+0x11d7*-0x1),_0x1b262a[_0x5ab908(0x22c)](setTimeout,()=>triggerInstallPromptPWAbyHHC(),-0x1bdd+0x3*-0x135+0x2*0x10b8)));}function detectDevicePWAbyHHC(){const _0x260e85=_0x1b8c,_0x3e39f6={'vUTcl':function(_0x48294c,_0x382de3){return _0x48294c(_0x382de3);},'lIUXt':function(_0x507f06,_0xd4a432){return _0x507f06(_0xd4a432);},'fpDpj':function(_0x45e298,_0x3a8355){return _0x45e298(_0x3a8355);},'zFMZC':function(_0x260fd6,_0x51a66b){return _0x260fd6(_0x51a66b);},'hpFza':_0x260e85(0x2c2),'HTRBD':_0x260e85(0x17d),'WxZIG':function(_0x5d9b7d,_0x1cca79){return _0x5d9b7d(_0x1cca79);},'oEfMg':function(_0x4864ad,_0x183501){return _0x4864ad(_0x183501);},'rgxre':function(_0x53aa2b,_0xed8c04){return _0x53aa2b(_0xed8c04);},'oRaZv':function(_0xfbd5dc,_0x129b3b){return _0xfbd5dc(_0x129b3b);},'OoTEr':_0x260e85(0x18b),'cVlFB':function(_0x4e72ea,_0x1d67eb){return _0x4e72ea(_0x1d67eb);},'dkTsU':function(_0x1c7486,_0x238f85){return _0x1c7486(_0x238f85);}},_0x10d88d=_0x1b3c;let _0x358e10=navigator[_0x3e39f6[_0x260e85(0x233)](_0x10d88d,-0x1*-0x1173+-0x1e5a+0xd85*0x1)][_0x3e39f6[_0x260e85(0x233)](_0x10d88d,0x9*0x387+0x79b+-0x2*0x136b)]();return _0x358e10[_0x3e39f6[_0x260e85(0x233)](_0x10d88d,0xf6*-0x1b+-0x2679+0xbf*0x57)](_0x3e39f6[_0x260e85(0x1c3)](_0x10d88d,-0x84b*-0x2+-0x213d+0x1127))||_0x358e10[_0x3e39f6[_0x260e85(0x26e)](_0x10d88d,0x1*-0x150+0x15fa+-0x4*0x50b)](_0x3e39f6[_0x260e85(0x26b)](_0x10d88d,0x19c9*0x1+-0x1144+-0x7e2))||_0x358e10[_0x3e39f6[_0x260e85(0x2e9)]](_0x3e39f6[_0x260e85(0x1f0)])?_0x3e39f6[_0x260e85(0x233)](_0x10d88d,0x2014+-0x271+-0x1cff):_0x358e10[_0x3e39f6[_0x260e85(0x2b6)](_0x10d88d,0x69+-0x1*-0xb07+-0x1*0xaf2)](_0x3e39f6[_0x260e85(0x17b)](_0x10d88d,-0x1836*-0x1+-0x2650+0xe9b))?_0x3e39f6[_0x260e85(0x1f9)](_0x10d88d,-0xb*-0x65+0x1573*-0x1+0x119d):_0x358e10[_0x3e39f6[_0x260e85(0x2e9)]](_0x3e39f6[_0x260e85(0x1e0)](_0x10d88d,-0x13cb*0x1+0x1*-0xa+0x40f*0x5))?_0x3e39f6[_0x260e85(0x26e)](_0x10d88d,0x134f+0x2db*0xa+0x97b*-0x5):_0x358e10[_0x3e39f6[_0x260e85(0x2e9)]](_0x3e39f6[_0x260e85(0x233)](_0x10d88d,-0x1be5+0x72*-0x10+0x239b))&&!_0x358e10[_0x3e39f6[_0x260e85(0x2e9)]](_0x3e39f6[_0x260e85(0x1d8)])?_0x3e39f6[_0x260e85(0x285)](_0x10d88d,0x924+0xf00+-0x178e):_0x3e39f6[_0x260e85(0x186)](_0x10d88d,0xd55*-0x1+-0xbf*0x8+0x1*0x13d7);}function _0x1b3c(_0x2be19c,_0x5d237d){const _0x5a051e=_0x1b8c,_0x1d49a6={'mZFpB':function(_0x536699,_0x3749f2){return _0x536699-_0x3749f2;},'nyXAK':function(_0x2f96a3){return _0x2f96a3();},'poXAz':function(_0xbafc48,_0x4ddb06,_0x5550a9){return _0xbafc48(_0x4ddb06,_0x5550a9);}},_0xb9878a=_0x1d49a6[_0x5a051e(0x20f)](_0x45b6);return _0x1b3c=function(_0x3980b8,_0x41610e){const _0x9858a9=_0x5a051e;_0x3980b8=_0x1d49a6[_0x9858a9(0x25f)](_0x3980b8,0x85d+0xda8+-0xa*0x229);let _0x5557a3=_0xb9878a[_0x3980b8];return _0x5557a3;},_0x1d49a6[_0x5a051e(0x2d0)](_0x1b3c,_0x2be19c,_0x5d237d);}function openAppPWAbyHHC(){const _0x36e88f=_0x1b8c,_0x5cd2cb={'UeppL':function(_0x10c562,_0x1fef5b){return _0x10c562(_0x1fef5b);},'nDtKr':function(_0x27d868,_0x2c8dfb){return _0x27d868(_0x2c8dfb);},'vKMUw':function(_0x518fb8,_0x3e8ae2){return _0x518fb8(_0x3e8ae2);},'WSmfN':function(_0x38f12a,_0x50c2a1){return _0x38f12a(_0x50c2a1);}},_0x267807=_0x1b3c;let _0x149dfd=window[_0x5cd2cb[_0x36e88f(0x2e0)](_0x267807,-0x12dc*0x1+-0x1e11+0x1*0x3167)][_0x5cd2cb[_0x36e88f(0x204)](_0x267807,-0xb6b*-0x1+0x2529+-0x3009)][_0x5cd2cb[_0x36e88f(0x1c1)](_0x267807,-0x333*0xa+0x13fc+0xc6f)]('?')[0x1*-0xfa6+-0x1a*-0xd1+-0x594];window[_0x5cd2cb[_0x36e88f(0x243)](_0x267807,-0x10ab+0x21ed+-0x10c8)][_0x5cd2cb[_0x36e88f(0x1c1)](_0x267807,0xf86+-0x43*0x29+0x8*-0x88)]=_0x149dfd;}function openDocumentationPWAbyHHC(){const _0x1096c2=_0x1b8c,_0x194e0b={'Mumom':_0x1096c2(0x2e1),'YQsxZ':function(_0x21fb4d,_0x22f10b){return _0x21fb4d(_0x22f10b);},'fQvss':_0x1096c2(0x2f1)},_0x39f67f=_0x1b3c;window[_0x194e0b[_0x1096c2(0x185)]](NotifAllbyHHC[_0x194e0b[_0x1096c2(0x2bd)](_0x39f67f,-0x1bfd+-0x1105+0x2d8e)],_0x194e0b[_0x1096c2(0x2af)]);}function showManualGuidePWAbyHHC(){const _0x57a05c=_0x1b8c,_0x364bef={'xYKjJ':function(_0x3c2576){return _0x3c2576();},'RrdtP':function(_0x49d036,_0x5d2fff){return _0x49d036(_0x5d2fff);},'doQcR':_0x57a05c(0x221)+_0x57a05c(0x1c0),'rqCtf':_0x57a05c(0x2ae),'VfaaI':_0x57a05c(0x221)+_0x57a05c(0x2bb)+'d','EStwH':function(_0x311320,_0x3506c7){return _0x311320(_0x3506c7);},'CtqNh':_0x57a05c(0x221)+_0x57a05c(0x1cf)+'x','McUGz':function(_0x5b2c08,_0x53a400){return _0x5b2c08(_0x53a400);},'YPTuf':_0x57a05c(0x221)+_0x57a05c(0x23c),'AMxdE':function(_0x1a365e,_0x579f35){return _0x1a365e(_0x579f35);},'bfzqV':function(_0x57492e,_0x1f0ffd){return _0x57492e(_0x1f0ffd);},'NOnLH':function(_0x4a0d77,_0x345529){return _0x4a0d77(_0x345529);},'GaYWa':function(_0x49973b,_0x58703f){return _0x49973b(_0x58703f);},'OhwXh':function(_0x41c4ed,_0x3ab4b8,_0x5f4510,_0x49c18a){return _0x41c4ed(_0x3ab4b8,_0x5f4510,_0x49c18a);},'oyrph':function(_0x412793,_0x2e35a9){return _0x412793+_0x2e35a9;},'wnPqv':function(_0x11427b,_0x4673a7){return _0x11427b*_0x4673a7;}},_0x2a08b5=_0x1b3c;let _0x22ae70=_0x364bef[_0x57a05c(0x2f7)](detectDevicePWAbyHHC),_0x4c8ef0='',_0x539d85=[];switch(_0x22ae70){case _0x364bef[_0x57a05c(0x189)](_0x2a08b5,0x10ec+-0x10*0x97+-0x6d8):_0x4c8ef0=NotifAllbyHHC[_0x364bef[_0x57a05c(0x1e5)]];break;case _0x364bef[_0x57a05c(0x2f2)]:_0x4c8ef0=NotifAllbyHHC[_0x364bef[_0x57a05c(0x17a)]],_0x539d85=[{'text':NotifAllbyHHC[_0x364bef[_0x57a05c(0x272)](_0x2a08b5,0x61*0x3d+0x9ef*-0x1+-0xc86)],'type':_0x364bef[_0x57a05c(0x272)](_0x2a08b5,-0x63b+-0x8b*0x26+0x1b54),'action':openDocumentationPWAbyHHC}];break;case _0x364bef[_0x57a05c(0x272)](_0x2a08b5,-0x2096+-0x188f*0x1+0x399b*0x1):_0x4c8ef0=NotifAllbyHHC[_0x364bef[_0x57a05c(0x1a1)]],_0x539d85=[{'text':NotifAllbyHHC[_0x364bef[_0x57a05c(0x1ec)](_0x2a08b5,-0x1265+-0xcd4+-0x1fe1*-0x1)],'type':_0x364bef[_0x57a05c(0x1ec)](_0x2a08b5,-0x4c*0x4c+0x4d0+-0x1*-0x1237),'action':openDocumentationPWAbyHHC}];break;case _0x364bef[_0x57a05c(0x189)](_0x2a08b5,-0xbd+0x1865+-0x1712):_0x4c8ef0=NotifAllbyHHC[_0x364bef[_0x57a05c(0x274)]],_0x539d85=[{'text':NotifAllbyHHC[_0x364bef[_0x57a05c(0x211)](_0x2a08b5,-0x56*-0x2+0x1de6+-0x1dea*0x1)],'type':_0x364bef[_0x57a05c(0x2c1)](_0x2a08b5,-0x35*-0x56+-0x2639+-0xb*-0x1e6),'action':openDocumentationPWAbyHHC}];break;default:_0x4c8ef0=NotifAllbyHHC[_0x364bef[_0x57a05c(0x26c)](_0x2a08b5,-0x3*-0x1f+-0x1*-0x22fc+-0x22d3)],_0x539d85=[{'text':NotifAllbyHHC[_0x364bef[_0x57a05c(0x211)](_0x2a08b5,-0x1*-0xe6b+-0x907*0x1+0x2*-0x25e)],'type':_0x364bef[_0x57a05c(0x2a9)](_0x2a08b5,0x3b*-0x6d+-0x17*-0x199+0x1*-0xb29),'action':openDocumentationPWAbyHHC}];}_0x364bef[_0x57a05c(0x177)](showNotificationPWAbyHHC,_0x4c8ef0,_0x539d85,_0x364bef[_0x57a05c(0x22e)](_0x364bef[_0x57a05c(0x2e6)](0x280+0x9*-0x3fe+0x36*0xb1,_0x364bef[_0x57a05c(0x26c)](parseInt,DurasiNotifbyHHC)),-0x2354+-0xc45*-0x1+-0x75*-0x3b));}function checkInstallStatusPWAbyHHC(){const _0xceedae=_0x1b8c,_0x51f2a4={'URceG':function(_0x53751f,_0x43722c){return _0x53751f(_0x43722c);},'ROhYp':_0xceedae(0x2f0)+_0xceedae(0x235)+_0xceedae(0x28b),'auBEH':function(_0x23ea6f,_0x28cdb4){return _0x23ea6f(_0x28cdb4);},'RTaEB':function(_0x266648,_0x44047c){return _0x266648===_0x44047c;},'tXCgC':_0xceedae(0x206),'EccAb':function(_0x3cafab,_0x485946){return _0x3cafab(_0x485946);},'AbHNz':_0xceedae(0x190)},_0x4f9bfe=_0x1b3c;return window[_0x51f2a4[_0xceedae(0x2f8)](_0x4f9bfe,0x1c62+-0x2bf+0x1930*-0x1)](_0x51f2a4[_0xceedae(0x2cf)])[_0x51f2a4[_0xceedae(0x2c3)](_0x4f9bfe,-0x1*0x22db+0x4e3+0x1ea4)]||_0x51f2a4[_0xceedae(0x2b7)](!(0x1*0x118d+0x8bf+-0x1a4c),window[_0x51f2a4[_0xceedae(0x2f8)](_0x4f9bfe,-0x1501+0x7*0x167+-0xe5*-0xd)][_0x51f2a4[_0xceedae(0x280)]])||window[_0x51f2a4[_0xceedae(0x258)](_0x4f9bfe,0x95a+-0x935+-0x55*-0x1)][_0x51f2a4[_0xceedae(0x275)]][_0x51f2a4[_0xceedae(0x258)](_0x4f9bfe,-0xce3*-0x1+-0x1*-0x1e3d+-0x2aa2)](_0x51f2a4[_0xceedae(0x2f8)](_0x4f9bfe,-0x1*0x21e1+0x201a+0x271));}function _0x1b8c(_0x3cd47a,_0x5f3690){const _0x4c1460=_0x14df();return _0x1b8c=function(_0x3cdbed,_0x36e1f7){_0x3cdbed=_0x3cdbed-(0x213+-0xb0f+0xa6c);let _0x30434c=_0x4c1460[_0x3cdbed];return _0x30434c;},_0x1b8c(_0x3cd47a,_0x5f3690);}function triggerInstallPromptPWAbyHHC(){const _0x10dfd1=_0x1b8c,_0xd3ab0d={'RIlYF':function(_0x3e37b5,_0x35af21){return _0x3e37b5===_0x35af21;},'WDomJ':function(_0x3cb3af,_0x559115){return _0x3cb3af(_0x559115);},'ARJAz':_0x10dfd1(0x23e),'FwbPQ':function(_0x44565a,_0x33d1c5,_0x3c239e,_0x5b91c4){return _0x44565a(_0x33d1c5,_0x3c239e,_0x5b91c4);},'tIrEy':function(_0x46bdb5,_0x4b6000){return _0x46bdb5-_0x4b6000;},'zZMlj':function(_0x477021,_0x3ed41a){return _0x477021*_0x3ed41a;},'fWHSM':function(_0x2eb1e6,_0x5cd5ea){return _0x2eb1e6(_0x5cd5ea);},'UTdAN':function(_0x3ce5e7,_0x37a9a2,_0x3709a1,_0x3a9752){return _0x3ce5e7(_0x37a9a2,_0x3709a1,_0x3a9752);},'KxCfT':function(_0x53482e,_0x39cad6){return _0x53482e(_0x39cad6);},'cQFqN':function(_0x2c0a51,_0x239339){return _0x2c0a51(_0x239339);},'ApLIw':function(_0x5c4cc6,_0x36eeb7){return _0x5c4cc6+_0x36eeb7;},'wqeWq':function(_0x3cddbf,_0x62d5c6){return _0x3cddbf*_0x62d5c6;},'xyvbt':_0x10dfd1(0x1e1),'VuOZx':_0x10dfd1(0x20c),'crNio':_0x10dfd1(0x287),'SkjYu':function(_0x2c6297,_0x42e2ff){return _0x2c6297+_0x42e2ff;},'uElmh':function(_0x487f7f,_0x10ed63){return _0x487f7f(_0x10ed63);},'XIFXK':function(_0x28cb54){return _0x28cb54();}},_0x4a9e49=_0x1b3c;if(deferredPromptPWAbyHHC)try{deferredPromptPWAbyHHC[_0xd3ab0d[_0x10dfd1(0x20d)]](),deferredPromptPWAbyHHC[_0xd3ab0d[_0x10dfd1(0x291)]][_0xd3ab0d[_0x10dfd1(0x284)]](_0x18828b=>{const _0x5188e5=_0x10dfd1,_0xd2ee22=_0x1b3c;_0xd3ab0d[_0x5188e5(0x2aa)](_0xd3ab0d[_0x5188e5(0x1ff)](_0xd2ee22,-0x10da*-0x1+-0xd83*0x2+0xacd),_0x18828b[_0xd3ab0d[_0x5188e5(0x1c4)]])?(deferredPromptPWAbyHHC=null,isInstalledPWAbyHHC=!(0xb16+-0x64d*-0x5+-0x2a97),_0xd3ab0d[_0x5188e5(0x2ee)](showNotificationPWAbyHHC,NotifAllbyHHC[_0xd3ab0d[_0x5188e5(0x1ff)](_0xd2ee22,0x245+0x2387+-0x2554)],[],_0xd3ab0d[_0x5188e5(0x2bc)](_0xd3ab0d[_0x5188e5(0x1c5)](-0x6fd*-0x1+0x21d0+0x761*-0x5,_0xd3ab0d[_0x5188e5(0x262)](parseInt,DurasiNotifbyHHC)),-0x1bbf+-0x21b+0x25aa))):_0xd3ab0d[_0x5188e5(0x28c)](showNotificationPWAbyHHC,NotifAllbyHHC[_0xd3ab0d[_0x5188e5(0x1bf)](_0xd2ee22,0x20a5+0xae5*0x2+-0x35d4)],[{'text':NotifAllbyHHC[_0xd3ab0d[_0x5188e5(0x27d)](_0xd2ee22,-0x269+-0x2f*-0x7d+-0x13e2)],'type':_0xd3ab0d[_0x5188e5(0x27d)](_0xd2ee22,0x1*-0x13e1+-0x15cc+0x2a24),'action':openDocumentationPWAbyHHC}],_0xd3ab0d[_0x5188e5(0x1a7)](_0xd3ab0d[_0x5188e5(0x1ed)](-0x14a1+0x355*0x2+0x11df,_0xd3ab0d[_0x5188e5(0x1bf)](parseInt,DurasiNotifbyHHC)),-0x1*-0xb13+0x22e4+-0x2a0f));});}catch(_0x2e02ff){console[_0xd3ab0d[_0x10dfd1(0x1bf)](_0x4a9e49,-0x163*-0x11+0x11f*0x1+-0x812*0x3)](_0xd3ab0d[_0x10dfd1(0x2fa)](NotifAllbyHHC[_0xd3ab0d[_0x10dfd1(0x1ee)](_0x4a9e49,-0x1270+0x22*0x115+-0x1*0x11c8)],':'),_0x2e02ff),_0xd3ab0d[_0x10dfd1(0x172)](showManualGuidePWAbyHHC);}}function _0x14df(){const _0x2625db=['UqaNV','Loaded','onsPWAbyHH','xQCZj','allprompt','OoTEr','Bbvnd','jQSQk','jnUKl','type','text','oSUvJ','showPWAbyH','oRaZv','prompt','UAHHh','false','firefox','doQcR','secondaryP','lomlg','body','anhaoyu.co','Cjecr','lass=\x22noti','McUGz','wqeWq','uElmh','dxNsN','HTRBD','href','hHJVO','ErrorbyHHC','ExFim','Download','fQNaS','1107160roLsMV','width','rgxre','sibyHHC','notifTidak','RvCll','nLdHN','VnyXL','WDomJ','otGLV','ficationPW','706029Sarb','14yDfQUD','nDtKr','rkPWAbyHHC','standalone','gbYdO','hVbXt','9CExLHC','DIjkW','uttonsPWAb','userChoice','xyvbt','2148abxSjn','nyXAK','BtnPWAbyHH','AMxdE','accepted','FWcCV','37815iLcaU','ogtNn','ROEWe','class=\x22pro','ykIKT','pYBWC','25927qJJrhD','jcWOY','InstalasiP','8oJXxts','TxjwG','fBKYw','MunZK','notifPeran','OPvYL','ubANp','MaYma','JohPI','RdbAD','iphone','push','fTextPWAby','Properti Deskripsi Contoh Nilai Catatan AktifkanDownloadAPKbyHHCMengaktifkan fitur download APK (jika ada file APK khusus) trueSet ke falsejika tidak ingin tampilkan tombol APKDurasiNotifbyHHCLama tampilan notifikasi muncul (dalam detik) 5Bisa diubah sesuai kebutuhan notifUdahDownloadPesan jika aplikasi sudah terinstal "Aplikasi sudah terinstall! Buka aplikasi..." Tampil otomatis setelah install notifBelumDownloadPesan untuk pengguna yang belum install "Aplikasi siap diinstall..." Disertai tombol install notifPerangkatIOSPanduan install di iPhone/iPad "Tap tombol Share, lalu pilih 'Add to Home Screen'" Tampil otomatis jika perangkat iOS terdeteksi notifPerangkatAndroidPanduan install di Android "Tap menu browser (⋮), lalu pilih 'Add to Home screen'" Versi Chrome/Edge notifPerangkatFirefoxPanduan install di Firefox "Klik menu (≡), lalu pilih 'Install'" Untuk Firefox Desktop & Mobile notifPerangkatSafariPanduan install di Safari macOS "Klik File menu, lalu pilih 'Add to Dock'" Khusus Safari Desktop notifTidakDidukungPesan untuk browser yang tidak support PWA "Gunakan Chrome, Safari, atau Firefox terbaru" Tampil jika browser tidak mendukung install prompt InstalasiPWABatalbyHHCPesan saat user membatalkan install "Instalasi dibatalkan. Coba lagi..." Event dari user cancel prompt InstalasiPWABerhasilbyHHCNotifikasi jika proses instalasi berhasil "Aplikasi sedang diinstall..." Disarankan untuk memberi info follow-up BukaAplikasibyHHCLabel tombol buka aplikasi "Buka Aplikasi" Tampil setelah install berhasil PWAInstallErrorbyHHCPesan error install PWA "PWA install error" Tampil jika gagal install ManualGuidebyHHCLabel link ke panduan manual "Manual Guide" Link alternatif jika gagal auto-install PWABerhasilInstallbyHHCPesan sukses PWA terpasang "PWA berhasil diinstall!" Opsional, bisa digunakan di log/event LinkDokumentasiPWAbyHHCLink ke halaman panduan manual install /instal-pwa-manualWajib diisi jika pakai ManualGuidebyHHCInstallNowbyHHCTeks pada tombol install sekarang "Install Now" Digunakan saat popup gagal muncul Warning!
Kalau masih tidak paham, silakan baca dokumentasi Tentang SmartInstall PWA by hanhaoyu.com- File Ikon
Minimal kamu butuh ikon dengan ukuran:- 192x192
- 512x512
(Opsional tapi disarankan)
- Screenshot aplikasi buat tampilan di Play Store-style atau manifest viewer.
- Apple splash screen (kalau mau maksimal di iPhone).
- File HTML tambahan untuk halaman-halaman kaya privacy policy, TOS, dan lain-lain — kamu udah lengkap banget soal ini.
Nanti semua file ini bakal kamu upload ke GitHub, terus link-nya tinggal kamu CDN-kan lewat jsDelivr biar bisa dipasang di blog Blogger kamu. Simpel kan?
Kalau udah siap semua, kita lanjut ke langkah selanjutnya: Upload File ke GitHub + Ambil Link CDN-nya 🎯
🚀 Langkah 1: Upload File ke GitHub
Kita lanjut ke bagian paling penting di awal setup, yaitu upload file json PWA ke GitHub. Tujuannya? Biar file manifest.json kamu bisa punya link yang bisa dipanggil dari Blogger. Gak perlu hosting berbayar, cukup manfaatin GitHub + CDN gratis dari jsDelivr.
Tools Convert Github to JsDevlivr
Kamu bisa pakai tools ini buat convert link github ke cdn jsdevlivr yaa : Klik Disini
💡 Cara Membuat Repository Baru
Ikuti langkah-langkah berikut buat bikin repo baru di GitHub:
- Buka GitHub.com dan login ke akunmu.
- Klik tombol "+" (plus) di pojok kanan atas > pilih New repository.
- Isi detail repository:
- Repository name: bebas, misalnya
pwa-blogku - Description: opsional
- Centang Public (biar bisa diakses semua orang)
- JANGAN centang "Initialize this repository with a README"
- Repository name: bebas, misalnya
- Klik tombol Create repository.
- Kamu akan diarahkan ke halaman kosong repo-nya.
🗂️ Upload manifest.json
Setelah repo berhasil dibuat, sekarang upload semua file json PWA kamu, salin dari kode ini ya :
- Klik tombol Add file > Upload files.
- Drag dan drop semua file berikut:
manifest.jsonKonfigurasi-SmartInstall-PWA.js- Semua ikon PNG (dengan ukuran sesuai kebutuhan)
- Klik Commit changes di bawahnya buat menyimpan.
- Setelah itu, semua file akan muncul di repo kamu.
🌐 Dapatkan URL CDN (jsDelivr atau GitHub Pages)
Setelah file kamu sukses di-upload, sekarang saatnya ambil link file-nya buat dipasang di Blogger. Ada 2 cara:
Setelah file kamu sukses di-upload, sekarang saatnya ambil link file-nya buat dipasang di Blogger. Ada 2 cara:
🔹 Opsi 1: Gunakan jsDelivr (paling simpel)
Format link:
https://cdn.jsdelivr.net/gh/USERNAME/REPO@BRANCH/namafile.extContoh manifest.json kamu:
https://cdn.jsdelivr.net/gh/hanhaoyu/pwa-blogku@main/manifest.jsonKeterangan:
USERNAME→ username GitHub kamuREPO→ nama repoBRANCH→ biasanyamain
Kelebihan jsDelivr:
- Gak perlu setting apa-apa
- Cepat dan otomatis cache CDN-nya
- Bisa langsung dipake buat
<link>di Blogger
🔹 Opsi 2: Pakai GitHub Pages
Kalau kamu pengen semua isi repo bisa diakses kayak web biasa:
- Masuk ke menu Settings > Pages
- Pilih sumber dari
branch: maindan folder/ (root) - Klik tombol Save
GitHub bakal kasih link kayak gini:
https://username.github.io/pwa-blogku/manifest.jsonButuh waktu beberapa menit sebelum aktif.
📝 Catatan Tambahan:
- Jangan lupa ubah
start_urldi manifest kalau kamu pasang PWA-nya di blog lain - Pastikan semua file ikon PNG bisa diakses langsung dari browser (tes manual link-nya)
🛠️ Langkah 2: Edit Template HTML di Blogger
Setelah file PWA kamu sukses di-upload ke GitHub dan punya URL CDN dari jsDelivr (atau GitHub Pages), sekarang waktunya menyematkan file tersebut ke dalam struktur HTML template Blogger kamu.
Setelah file PWA kamu sukses di-upload ke GitHub dan punya URL CDN dari jsDelivr (atau GitHub Pages), sekarang waktunya menyematkan file tersebut ke dalam struktur HTML template Blogger kamu.
✍️ Masukkan <link rel="manifest"> dan Meta Tag PWA
Ikuti langkah berikut:
- Masuk ke Dashboard Blogger kamu.
- Pilih menu Tema > Edit HTML.
- Cari tag
<head>di awal template kamu (biasanya di atas sebelum<body>). - Tempelkan kode berikut ini di dalam tag
<head>:
<!-- PWA Manifest -->
<link rel="manifest" href="https://cdn.jsdelivr.net/gh/USERNAME/REPO@main/manifest.json">
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="V2 HAN HAOYU">
<link rel="apple-touch-icon" href="https://URL-IKON-512x512.png">
Pastikan kamu ganti
href dan URL ikon sesuai link manifest dan ikon PNG yang kamu upload di GitHub.
📜 Tambahkan Service Worker di Bawah </body>
Cari bagian paling bawah template sebelum </body>, lalu tambahkan script ini:
<!-- Register Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('https://cdn.jsdelivr.net/gh/USERNAME/REPO@main/Konfigurasi-SmartInstall-PWA.js')
.then(function(registration) {
console.log('ServiceWorker registered:', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed:', err);
});
});
}
</script>
Lagi-lagi, pastikan kamu ganti USERNAME dan REPO sesuai repo GitHub kamu.
🔐 Blogger Sudah HTTPS? Aman!
Karena Blogger sekarang udah otomatis HTTPS, kamu gak perlu setting tambahan buat aktifin service worker. Ini penting karena PWA hanya bisa aktif di domain HTTPS.
Karena Blogger sekarang udah otomatis HTTPS, kamu gak perlu setting tambahan buat aktifin service worker. Ini penting karena PWA hanya bisa aktif di domain HTTPS.
📲 Apple Specific (iOS) (Opsional tapi disarankan)
Kalau kamu pengen tampilan PWA kamu kece juga di iPhone, tambahkan juga tag berikut ini di dalam <head>:
<!-- Apple Splash Screen -->
<link rel="apple-touch-startup-image" href="https://cdn.jsdelivr.net/gh/USERNAME/REPO@main/splash-image.png">
Pastikan kamu udah punya ikon resolusi besar seperti
180x180 atau 512x512 biar tampilan maksimal di iPhone.
Kalau semua script dan meta tag udah kamu masukin, tinggal klik Simpan Tema di Blogger.
Boom! 🎉 Blog kamu sekarang udah terkoneksi sama PWA yang kamu buat manual 💥
Boom! 🎉 Blog kamu sekarang udah terkoneksi sama PWA yang kamu buat manual 💥
Selanjutnya, kita bakal bahas cara ngetes dan validasi PWA-nya — biar yakin semua fitur udah jalan kayak mestinya.
✅ Langkah 3: Uji Instalasi PWA
Oke, kita lanjut ke bagian penting berikutnya: ngetes dan pastikan PWA kamu bener-bener jalan dengan lancar. Jangan sampai udah susah payah pasang, eh ternyata gak bisa di-install atau splash screen-nya gak muncul.
Oke, kita lanjut ke bagian penting berikutnya: ngetes dan pastikan PWA kamu bener-bener jalan dengan lancar. Jangan sampai udah susah payah pasang, eh ternyata gak bisa di-install atau splash screen-nya gak muncul.
🧪 Tes PWA Pakai Chrome (Desktop)
Ikuti langkah ini buat cek di PC/laptop:
- Buka blog kamu di Chrome.
- Klik kanan di mana aja > pilih Inspect atau tekan Ctrl + Shift + I.
- Buka tab Application.
- Di sidebar kiri, klik Manifest:
- Cek apakah file
manifest.jsonberhasil dibaca - Periksa ikon, nama app, theme color, dll
- Cek apakah file
- Lanjut ke bagian Service Worker:
- Cek status: activated and running
- Klik Update atau Skip Waiting kalau kamu baru aja update file
📱 Tes PWA di HP (Android)
Gini caranya buat tes di smartphone:
- Buka blog kamu lewat Chrome Mobile.
- Tunggu beberapa detik sampai PWA-nya dikenali.
- Biasanya bakal muncul notifikasi bawah:
“Add [nama app] to Home screen”
Notifikasi PWA - Kalau gak muncul otomatis, klik ikon tiga titik di kanan atas > pilih Add to Home screen.
- Setelah ditambahkan, buka aplikasinya dari home screen:
- Muncul splash screen
- Blog tampil tanpa address bar (full screen)
- Coba buka saat mode offline — pastikan tetap tampil berkat cache dari service worker
🧠 Tips Jika PWA Gagal Jalan
Beberapa solusi kalau ada yang error:
Beberapa solusi kalau ada yang error:
- Manifest tidak kebaca? → Pastikan URL manifest kamu valid dan bisa diakses publik.
- Service worker error? → Cek tab Console untuk tahu detail error-nya.
- Ikon gak muncul di splash screen? → Pastikan kamu punya ikon
192x192dan512x512formatPNG. - Masih muncul address bar? → Cek properti
displaydi manifest kamu, pastikan nilainya "standalone" atau "fullscreen".
Kalau semua tes udah mulus, Selamat! 🎉 Blog kamu sekarang udah resmi jadi PWA yang bisa di-install kayak aplikasi 💻📱
🍎 Langkah 4: Tambahkan Splash Screen dan Ikon untuk iOS
Seperti yang kita tahu, Apple itu agak beda sendiri — mereka gak otomatis baca
Seperti yang kita tahu, Apple itu agak beda sendiri — mereka gak otomatis baca
manifest.json kayak Android. Jadi, kamu perlu kasih perhatian khusus biar splash screen dan ikon iOS tetap tampil keren.
Walaupun pengguna iPhone gak sebanyak Android, tapi tetep penting banget buat optimasi tampilan PWA kamu di semua perangkat. Biar gak keliatan kayak web biasa doang, kita harus bantu Safari biar ngerti bahwa ini aplikasi.
Untuk iOS User
🧷 Tambahkan Meta Tag Khusus iOS
Tambahkan tag berikut ini ke dalam <head> template Blogger kamu:
<!-- Apple Touch Icon (wajib) -->
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/USERNAME/REPO@main/icon-180x180.png">
<!-- Aktifin Mode Aplikasi di iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="V2 HAN HAOYU">
Ganti
href dan nama aplikasi sesuai dengan punyamu. Ikon 180x180px adalah standar paling cocok buat perangkat iOS.
🖼️ Tambahkan Splash Screen Image iOS (Opsional tapi Recommended)
Apple gak pakai splash dari manifest, jadi kamu harus kasih gambar splash secara manual:
<!-- iPhone 12, 13, 14 -->
<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)" href="https://cdn.jsdelivr.net/gh/USERNAME/REPO@main/splash-1170x2532.png">
<!-- iPhone SE -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="https://cdn.jsdelivr.net/gh/USERNAME/REPO@main/splash-750x1334.png">
Ukuran splash screen tergantung device iOS yang mau kamu support. Kamu bisa pakai 2–3 ukuran utama, atau semuanya kalau mau lengkap.
Kalau kamu belum punya splash screen, kamu bisa pakai ikon
512x512 kamu, kasih background putih atau gelap, lalu export ke ukuran iPhone (pakai Canva, Photoshop, atau AI tools).
📱 Uji Tampilan Splash iOS
Karena Safari iOS gak bisa dites otomatis kayak Android, kamu bisa cek manual:
- Buka blog via Safari di iPhone.
- Tap tombol Share > pilih Add to Home Screen.
- Buka aplikasi dari home screen iPhone kamu.
- Kalau splash screen muncul dan tampilannya full tanpa address bar, berarti sukses!
⚠️ Tips Tambahan
Beberapa hal penting agar tampil maksimal di iOS:
Beberapa hal penting agar tampil maksimal di iOS:
- Gunakan gambar PNG, bukan JPG
- Gunakan ikon yang simpel dan jelas, jangan terlalu banyak detail
- Rasio splash screen sebaiknya portrait, bukan landscape
- Pastikan link gambar kamu valid dan cepat diakses
Kalau kamu udah sampai tahap ini, PWA kamu udah cross-platform ready. Android udah oke, iOS pun gak ketinggalan 🍏🤝🤖
💡 Tips dan Catatan Penting
Sekarang kita masuk ke bagian akhir dari tutorial instalasi PWA manual ini, yaitu beberapa tips dan catatan penting biar blog kamu gak cuma bisa di-install, tapi juga stabil, responsif, dan ready untuk jangka panjang.
Sekarang kita masuk ke bagian akhir dari tutorial instalasi PWA manual ini, yaitu beberapa tips dan catatan penting biar blog kamu gak cuma bisa di-install, tapi juga stabil, responsif, dan ready untuk jangka panjang.
Setelah kamu berhasil pasang semua file dan koneksi ke Blogger, bukan berarti langsung selesai begitu aja. Ada beberapa hal kecil tapi penting yang perlu kamu perhatikan supaya PWA kamu tetap optimal di semua device dan gak gampang error.
🔍 1. Pastikan URL Kamu HTTPS
PWA cuma bisa jalan kalau blog kamu udah pakai protokol HTTPS, bukan HTTP biasa. Untungnya, Blogger otomatis pakai HTTPS, jadi kamu gak perlu setting tambahan. Tapi tetep pastiin di dashboard Blogger, opsi HTTPS-nya udah aktif.
PWA cuma bisa jalan kalau blog kamu udah pakai protokol HTTPS, bukan HTTP biasa. Untungnya, Blogger otomatis pakai HTTPS, jadi kamu gak perlu setting tambahan. Tapi tetep pastiin di dashboard Blogger, opsi HTTPS-nya udah aktif.
📂 2. Simpan Semua File di Folder Root GitHub
File
File
manifest.json dan Konfigurasi-SmartInstall-PWA.js sebaiknya diletakkan di root repo (bukan dalam folder). Kalau kamu mau custom struktur, pastikan sesuaikan start_url dan scope juga.
"start_url": "/p/home.html",
"scope": "/p/"
🔃 3. Perbarui Versi
Ganti dari v1 ke v2 jika ada perubahan konten atau ikon. Misalnya:
Konfigurasi-SmartInstall-PWA.js Saat Ganti KontenGanti dari v1 ke v2 jika ada perubahan konten atau ikon. Misalnya:
const CACHE_NAME = 'v2-hanhaoyu';Ini penting supaya cache lama gak bentrok sama konten baru.
📱 4. Ukuran Ikon Ideal
Minimal:
Tapi lebih lengkap lebih bagus. Ini daftar ukuran yang disarankan:
Minimal:
192x192 dan 512x512Tapi lebih lengkap lebih bagus. Ini daftar ukuran yang disarankan:
- 48x48
- 72x72
- 96x96
- 144x144
- 192x192
- 512x512
- Untuk iOS: tambah juga
180x180
💾 5. Gunakan Cache dengan Bijak
Jangan kebanyakan file dalam cache, bisa bikin loading jadi lambat. Simpan file statis yang benar-benar dibutuhkan aja.
Jangan kebanyakan file dalam cache, bisa bikin loading jadi lambat. Simpan file statis yang benar-benar dibutuhkan aja.
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js',
'/logo-192.png'
];
🧪 6. Uji Secara Berkala
Gunakan Lighthouse di Chrome DevTools buat analisis performa PWA kamu. Klik kanan > Inspect > tab Lighthouse > pilih "PWA".
Gunakan Lighthouse di Chrome DevTools buat analisis performa PWA kamu. Klik kanan > Inspect > tab Lighthouse > pilih "PWA".
- Apakah manifest valid?
- Apakah app bisa install?
- Apakah ada error dari service worker?
🎯 7. Cek Pengalaman Pengguna
Install PWA kamu di beberapa device untuk lihat apakah semuanya tampil konsisten:
Install PWA kamu di beberapa device untuk lihat apakah semuanya tampil konsisten:
- Android: Chrome & Edge
- iPhone: Safari
- Laptop: Chrome Desktop
Kalau semua tips di atas kamu terapkan, dijamin PWA kamu bakal tampil stabil, cepat, dan profesional banget — padahal bikinnya dari Blogger 😎
🎉 Penutup
Gak nyangka ya, ternyata bikin blog kita jadi bisa di-install kayak aplikasi beneran itu gak sesulit yang dibayangkan. Meskipun harus lewat jalur manual, ternyata prosesnya tetep bisa dikerjain dengan tenang dan hasilnya worth it banget.
Gak nyangka ya, ternyata bikin blog kita jadi bisa di-install kayak aplikasi beneran itu gak sesulit yang dibayangkan. Meskipun harus lewat jalur manual, ternyata prosesnya tetep bisa dikerjain dengan tenang dan hasilnya worth it banget.
Dengan PWA, blog kamu bakal:
- Terlihat lebih profesional
- Bisa diakses offline
- Punya ikon sendiri di home screen
- Tampil lebih cepat dan responsif
Cocok banget buat kamu yang pengen blog-nya punya vibe aplikasi mobile, apalagi kalau target pembacanya anak muda, pembaca setia, atau komunitas digital.
Upgrade Experience
Jadi, selamat! 🎉 Kalau kamu udah sampai di tahap ini dan berhasil install PWA ke Blogger, artinya kamu udah satu level di atas blogger biasa 💪
📎 Lampiran
Berikut ini beberapa contoh file penting yang kamu bisa pakai langsung buat project PWA-mu:
📄 manifest.json (Contoh)
{
"name": "V2 HAN HANHAOYU",
"short_name": "V2 HAN HAOYU",
"start_url": "https://webmu.com/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"description": "Equal Secrets merupakan Translator Community atau Fan Translation...",
"icons": [
{
"src": "https://yourcdn.com/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://yourcdn.com/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}⚙️ Konfigurasi-SmartInstall-PWA.js (Sederhana)
const CACHE_NAME = 'v2-hanhaoyu';
const urlsToCache = [
'/',
'/index.html'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});🔗 Meta Tag untuk HTML Blogger (di <head>)
<link rel="manifest" href="https://cdn.jsdelivr.net/gh/username/repo@main/manifest.json">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="V2 HAN HAOYU">
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/username/repo@main/icon-180x180.png">
Kalau kamu pengen versi yang langsung siap pakai atau file ZIP-nya, kamu juga bisa bikin repo GitHub publik dan tinggal share link-nya ke komunitas Blogger lainnya 🔗
Semoga tutorial ini bermanfaat dan bisa jadi referensi kamu dan temen-temen blogger lainnya. Kalau kamu punya pertanyaan atau pengen request tutorial lain, tinggal komen aja di bawah ✌️
Terima kasih udah nyimak!
Sampai jumpa di project selanjutnya! 🚀📱