Mengaktifkan PWA Pada Blogger Non AMP

Aktifkan PWA pada Blogger Non-AMP - Sebelumnya saya telah berhasil mengaktifkan PWA pada HTML AMP Blogger dan sekarang saya dapat mengaktifkan PWA pada blogger non-AMP juga. Sebenarnya trik aktivasi PWA sudah pernah dibahas pada blog non AMP di blog Marwanto606, namun masih ada sedikit masalah yaitu notifikasi install aplikasi tidak muncul secara otomatis di perangkat mobile.

Jadi saya mencoba menggunakan kode lain untuk sw.js dan akhirnya pemberitahuan bahwa aplikasi telah diinstal di telepon berhasil muncul. Sedangkan langkah-langkahnya tetap sama seperti di blog Marwanto606, namun ada langkah tambahan untuk membuat halaman offline.

Jika Anda ingin mencoba mengaktifkan PWA di blog non-AMP Anda, Anda harus terlebih dahulu menghubungkan domain blog ke CloudFlare. Jika blog Anda belum terhubung ke CloudFlare, silakan ikuti posting ini. Optimalkan kinerja blogging dengan Cloudflare DNS , pastikan Anda tetap mengaktifkan proxy cloud, jangan hanya beralih ke cloud abu-abu atau DNS.

Setelah blog terhubung ke CloudFlare, ikuti posting blog Marwanto606 di bawah ini untuk membuat blog dukungan PWA.

• Cara membuat blogger blog untuk mendukung PWA

Ikuti langkah-langkahnya hingga langkah ketiga.

Sekarang di langkah ketiga dari bagian kedua untuk membuat pekerja2 untuk manifest.json gunakan kode berikut.

 

addEventListener("fetch", event => {

 const data = {

 name: " menulis informasi ",

 nama pendek: " menulis informasi ",

 Layar: "mandiri",

 Aplikasi_korelasi_favorit: kesalahan,

 start_url: ".",

 Daerah: "\/",

 warna latar belakang: #ffff ",

 Warna tema: #01579b ",

 sebuah deskripsi: " Teknologi telah menjadi bagian dari kehidupan dan gaya hidup manusia. Hidup sehat juga kembali populer dan menjadi trend hidup kaum milenial. ",

 Simbol: [

 {

 src: "\ / home \ /android-icon-36x36.png",

 Dimensi: "36x36",

 Ketik: "gambar / png",

 Kepadatan: "0,75",

 Tujuan: "topeng apa saja"

 },

 {

 src: "\ / main \ /android-icon-48x48.png",

 Dimensi: "48x48",

 Ketik: "gambar / png",

 Kepadatan: "1.0",

 Tujuan: "topeng apa saja"

 },

 {

 src: "\ / main \ /android-icon-72x72.png",

 Dimensi: "72x72",

 Ketik: "gambar / png",

 Kepadatan: "1,5",

 Tujuan: "topeng apa saja"

 },

 {

 src: "\ / main \ /android-icon-96x96.png",

 Dimensi: "96x96",

 Ketik: "gambar / png",

 Kepadatan: "2.0",

 Tujuan: "topeng apa saja"

 },

 {

 src: "\ / main \ /apple-icon-144x144.png",

 Dimensi: "144x144",

 Ketik: "gambar / png",

 Kepadatan: "3.0",

 Tujuan: "topeng apa saja"

 },

 {

 src: "\ / main \ /android-icon-192x192.png",

 Dimensi: "192x192",

 Ketik: "gambar / png",

 Kepadatan: "4.0",

 Tujuan: "topeng apa saja"

 },

 {

 src: "\ / main \ /android-icon-512x512.png",

 Dimensi: "512x512",

 Ketik: "Gambar / PNG",

 Kepadatan: "4.0",

 Tujuan: "topeng apa saja"

 },

 ],

 Karyawan Layanan: {

 "src": "/sw.js"

 }

 }



 const json = JSON.stringify (data, null, 2)



 kembalinya acara. membalas dengan (

 jawaban baru (json, {

 Judul: {

 Jenis konten: "aplikasi / json; set karakter = UTF-8"

 }

 })

 )

 })

Atur token agar sesuai dengan blog Anda.

Kemudian gunakan kode berikut untuk membuat pekerja sw.js di langkah berikutnya, Anda tidak perlu mengubah kode apa pun.

 

const js = `

 importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

 if (workbox) {

 workbox.core.skipWaiting();

 workbox.core.clientsClaim();

 workbox.core.setCacheNameDetails({

 prefix: 'thn-sw',

 suffix: 'v22',

 precache: 'install-time',

 runtime: 'run-time'

 });



 const FALLBACK_HTML_URL = '/offline.html';

 const version = workbox.core.cacheNames.suffix;

 workbox.precaching.precacheAndRoute([{url: FALLBACK_HTML_URL, revision: null},{url: '/manifest.json', revision: null},{url: '/favicon.ico', revision: null}]);



 workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());



 workbox.routing.registerRoute(

 new RegExp('.(?:css|js|png|gif|jpg|svg|ico)$'),

 new workbox.strategies.CacheFirst({

 cacheName: 'images-js-css-' + version,

 plugins: [

 new workbox.expiration.ExpirationPlugin({

 maxAgeSeconds: 60 * 24 * 60 * 60,

 maxEntries:200,

 purgeOnQuotaError: true

 })

 ],

 }),'GET'

 );



 workbox.routing.setCatchHandler(({event}) => {

 switch (event.request.destination) {

 case 'document':

 return caches.match(FALLBACK_HTML_URL);

 break;

 default:

 return Response.error();

 }

 });



 self.addEventListener('activate', function(event) {

 event.waitUntil(

 caches

 .keys()

 .then(keys => keys.filter(key => !key.endsWith(version)))

 .then(keys => Promise.all(keys.map(key => caches.delete(key))))

 );

 });



 }

 else {

 console.log('Boo! Workbox didnt load ');

 }

 `



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

 })

Sekarang, sebelum membuat rute, buat pekerja lain untuk membuat halaman offline dengan kode berikut, lalu ganti nama pekerja ini menjadi pekerja4.

 const html = `

 const html = `

 









 Ups, Anda sedang offline! 

 Tampaknya koneksi jaringan Anda sedang down.

 "



 handleRequest fungsi asinkron (permintaan) {

 mengembalikan respons baru (html, {

 Judul: {

 Jenis konten: "teks / html; kumpulan karakter = UTF-8",

 },

 })

 }



 addEventListener ("Cari", Acara => {

 kembali event.respondWith (handleRequest (event.request))

 })

Kemudian ikuti langkah selanjutnya yaitu membuat jalur untuk pekerja yang dibuat di atas.

Kemudian itu juga membuat jalur untuk 4 faktor yang terakhir dihasilkan, www.domainanda.com/offline.html

Kemudian ikuti langkah-langkah untuk menambahkan kode berikut Perhatikan bahwa ada ikon yang mirip dengan ikon blog sebelumnya di utas ini, harap hapus dan ganti dengan kode yang disediakan. Hapus juga kode manifest.json jika Anda membuatnya sebelumnya.

Kemudian tambahkan kode pada langkah sebelumnya Ganti kode berikut.

Selesai, sekarang simpan HTML yang telah diedit dan muat ulang blog untuk melihat seperti apa tampilan PWA. Ikon pemasangan aplikasi akan muncul di sisi kanan bilah alamat browser, seperti yang ditunjukkan di bawah ini.

Untuk mencoba melihat PWA di blog blogger non-AMP ini, lihat blog Nulis Info dan coba akses dengan perangkat seluler untuk melihat notifikasi pemasangan aplikasi yang otomatis muncul di bagian bawah blog.

Referensi ke manifest.json dan sw.js dari blogThehackernews.com

Bagi yang masih bingung bagaimana cara membuat github dan repositori pekerja di CloudFlare, saya membuat video instruksional dan mengikuti langkah-langkahnya sampai tidak ada lagi kesalahan.