Mengaktifkan PWA Pada Blogger AMP HTML

Aktifkan PWA di HTML AMP Blogger – Sebenarnya, saya tidak mengaktifkan PWA di Blogger karena saya perlu mengaktifkan Cloud Proxy di CloudFlare untuk menggunakan fitur kerja yang membantu Blogger mendukung PWA.

Seperti yang kita ketahui, ketika kita mengaktifkan plugin cloud di CloudFlare, kita menghadapi beberapa masalah, seperti kesalahan B. 503, sehingga blog tidak dapat diakses.

Namun karena penasaran, akhirnya saya mengaktifkan cloud proxy untuk menggunakan fitur-fitur CloudFlare, salah satunya adalah fungsionalitasnya.

Ya, jadi PWA bisa diaktifkan di Blogger menggunakan CloudFlare. Untuk melakukan ini, Anda harus terlebih dahulu menghubungkan domain blog Anda ke CloudFlare. Jika blog Anda belum terhubung ke CloudFlare, silakan ikuti posting ini Tingkatkan kinerja blog dengan Cloudflare DNS dan Anda harus memperhatikan agar proxy cloud tetap aktif, Anda tidak boleh beralih ke cloud abu-abu atau DNS.

Setelah blog terhubung ke CloudFlare, ikuti blog Marwanto606 berikut untuk membuat blog dukungan PWA.

• Cara membuat blog blogger dengan teknologi PWA

Tutorial Marwanto606 adalah untuk blog non-AMP, dan untuk blog AMP ada beberapa langkah tambahan untuk berinteraksi dengan komponen pembangun amp-load-service .

Ada sedikit perbedaan antara blog NON AMP dan blog AMP ini, yaitu blog AMP menampilkan notifikasi untuk menginstal aplikasi atau menambahkan blog ke home screen mobile blog NON AMP. Blog tidak akan memberikan pemberitahuan push tetapi harus menyediakan tombol untuk menginstal aplikasi di ponsel.

Pemberitahuan untuk menginstal aplikasi akan muncul di layar bawah ponsel.

Ikon aplikasi Magic Company akan dipasang di layar beranda ponsel Anda.

Di desktop, ikon penginstal aplikasi muncul di sisi kanan bilah alamat browser.

Ikon aplikasi Magic Company di layar desktop.

Sekarang jika Anda ingin mengaktifkan PWA (Progressive Web App) di blog AMP maka ikuti langkah-langkah ini.

Sebenarnya langkah-langkahnya sama seperti aktivasi PWA pada blog NON AMP blog Marwanto606 di atas. Ikuti langkah satu, dua dan tiga.

Tetapi langkah pertama adalah tidak memiliki halaman statis untuk /p/offline.html

Dan perhatikan langkah ketiga untuk membuat karyawan ketiga, karyawan yang diganti namanya, menggunakan kode di bawah ini.

 
const js = `

 'use strict';

 const CACHE_VERSION=1;

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

 const OFFLINE_URL=" /p/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); kembali c.search+=(c.search?"&":"")+"cachebust="+Date.now(),New Request(c)}self.addEventListener("load",a=>{a.wait ) ambil(buatCacheBustedRequest(OFFLINE_URL).lalu(fungsi(a){ kembalikan cache ){kembalikan CURRENT_CACHES[a]}); a.waitUntil(caches.keys().then(a=> commit.all(a.map(a=>{if--1===b.indexOf(a)) ))) mengembalikan console.log (" Hapus cache lama:",a),caches.delete(a)} )))))), self.addEventListener("search",a=>{("search"==) = a.request.mode| |" GET"===a.request for", a.request.url), a.respondWith(fetch(a.request).catch( a =>(console.log("Gagal mengambil, kembalikan halaman offline sebagai gantinya ." , a), caches.match (atau f FLINE_URL ))))));



 `



 fungsi async handleRequest(permintaan) {

 kembalikan Respons baru(js, {

 Topik: {

 "content-type": "aplikasi/javascript;charset=UTF-8",

 }

 })

 }



 addEventListener("pencarian", acara => {

 Acara kembali

 })

Kode yang disorot /p/offline.html ke /offline.html

Pekerja keempat kemudian masuk untuk membuat halaman offline yang diperlukan dalam pekerja di atas.

Klik Create Custom dan hapus kode yang ada dan ganti dengan kode di bawah ini.

 const html = `

 const html = `

 









 Tidak, Anda sedang offline! 

 Sepertinya koneksi jaringan Anda sedang tidak aktif saat ini.

 `



 fungsi async handleRequest(permintaan) {

 kembalikan Respons baru(html, {

 Topik: {

 "Content-Type": "text/html;charset=UTF-8",

 }

 })

 }



 addEventListener("pencarian", acara => {

 Acara kembali

 })

Kemudian simpan dan gunakan dan kemudian ganti namanya menjadi pekerja4.

Halaman offline ini berfungsi ketika pengunjung tanpa koneksi internet masuk ke aplikasi dan melihat halaman seperti di bawah ini.

Kemudian pada langkah selanjutnya untuk membuat path untuk pekerja yang dibuat di atas, lihat jalur untuk pekerja, www.domainanda.com/sw.js , buat www.domainanda.com/serviceworker.js .

Kemudian buat 4 jalur yang dibuat untuk karyawan terakhir, buat www.domainanda.com/offline.html

Kemudian ikuti langkah-langkah untuk menambahkan kode di bawah ini Perhatikan bahwa kode yang mirip dengan ikon blog sudah ada di tema. Hapus dan ganti dengan kode yang diberikan. Hapus juga kode manifest.json yang Anda buat sebelumnya.

Kemudian langkah untuk menambahkan kode di atas Ganti dengan kode berikut.

Kemudian paste kode berikut di panel