Cara membuat PWA (Aplikasi Web Progresif) untuk Blogger

Pernahkah Anda memperhatikan di beberapa situs web ketika Anda mengunjungi, akan keluar prompt, semacam notifikasi "Tambahkan ke Layar Utama"? Jika ya dan Anda juga ingin membuatnya untuk situs web Anda, maka Anda berada di tempat yang tepat.

Pada artikel ini, saya akan memandu Anda untuk membuat PWA (Progressive Web app) untuk situs web Anda dengan cara yang mudah.

Jadi, sebelum saya memandu anda memulai proses menyiapkan PWA Untuk situs web Anda, Anda harus mengetahui dulu apa itu PWA dan kok itu penting untuk situs web Anda.

Apa itu PWA (Aplikasi Web Progresif)

Aplikasi web progresif adalah cara baru untuk menciptakan pengalaman realtime di web. Teknologi ini menggabungkan kemudahan dari kedua dunia (Aplikasi dan Web), akan memberikan pengalaman terbaik dari situs web dan aplikasi.

Aplikasi Web Progresif adalah aplikasi tampilan web yang dapat dipasang di ponsel atau tablet pengunjung seperti aplikasi pada umumnya, tetapi dibuat dengan teknologi web. Artinya, Anda dapat menambahkan fitur seperti pemberitahuan push dan dukungan offline tanpa harus membuat aplikasi asli yang terpisah.

Mengapa PWA Penting?

Aplikasi Web Progresif adalah situs web yang berperilaku seperti aplikasi di perangkat pengguna. Ia sberjalan sangan cepat dan ringan, responsif terhadap perangkat yang berbeda, dan dapat diakses kapan saja tanpa perlu mengunduh apa pun.

Aplikasi Web Progresif menawarkan pengalaman yang lebih baik daripada situs web tradisional untuk pengguna dan pengembang. Ini memiliki fitur yang biasanya ditemukan di aplikasi asli seperti pemberitahuan push, dukungan offline, dan ikon layar beranda. Artinya, ini akan memuat lebih cepat, terlihat lebih baik di semua jenis layar, memiliki lebih banyak fungsi daripada situs web biasa, dan akan tersedia bahkan saat perangkat offline.

Cara membuat PWA untuk Blogger

Untuk membangun Aplikasi Web Progresif, Anda perlu menambahkan beberapa fitur ke situs web Anda. Fitur ini mencakup Services Worker, yang memungkinkan situs Anda bekerja offline, dan pemberitahuan push notification ketika pengguna kembali ke situs Anda.

Anda juga dapat memasang perintah Tambahkan ke layar Utama di situs web Anda yang meminta pengguna untuk menambahkan situs atau aplikasi Anda ke layar utama di perangkat seluler atau komputer desktop mereka.

Tutorial ini mungkin agak sulit untuk dipahami, tetapi jika Anda mengikuti semua langkah dengan benar, Anda pasti dapat membuat PWA untuk Situs Blogger Anda.

Persyaratan

Sebelum kita mulai, ada beberapa hal yang harus diperlukan untuk Aktivasi PWA:

Ikon Blog berekstensi .png dengan ukuran 512×512
5 Screenshot Halaman Web Anda dalam ekstensi .png
Harus memiliki Akun GitHub
Manajemen DNS: Blog harus lulus Cloudflare

Mengunggah Ikon

Siapkan ikon untuk blog Anda
dalam ekstensi .png dengan ukuran 512×512.
*Ubah nama file sebagai android-icon-512x512.png
Buka favicon-generator.org dan unggah Ikon Blog.
Unduh favicon yang dihasilkan dan ekstrak file.
* Hapus file yang tidak perlu seperti:
browserconfig.xml
manifest.json
Buat Repositori, yaitu icon-syabiz di GitHub dan unggah semua file ikon di cabang utama.
*Unggah juga file aslinya, yaitu android-icon-512x512.png.
Jumlah total ikon akan menjadi sekitar 26.

Mengunggah Tangkapan Layar

Siapkan 5 screenshot Halaman Web Anda dalam ekstensi .png yang akan muncul saat menunjukkan tombol instal.
Beri nama tangkapan layar dalam seri:
scr1.png
scr2.png
scr3.png
scr4.png
scr5.png
Unggah tangkapan layar ini di cabang utama Repositori GitHub yang sama.

Membuat Pekerja (Services Worker) di Cloudflare

Kita akan membuat 4 Worker di Cloudflare, untuk memudahkan dalam membuat ROUTE nanti, saya sarankan anda menyimpannya dengan nama worker dan nama blog, contoh:

main-syabiz
manifest-syabiz
serviceworker-syabiz
offline-syabiz

Main Worker

Masuk ke Akun Cloudflare Anda.
Buka bagian Pekerja dan klik Kelola Pekerja.
Klik Buat Layanan dan ganti nama layanan sebagai main-blogname, yaitu main-syabiz.
Hapus script yang ada, ganti dengan script berikut:

Download : main-syabiz.txt

* Perhatikan BUCKET_NAME pada kode harus sesuai folder Anda di github.
Klik Simpan dan Sebarkan.

Manifest.json

Dengan cara yang sama, buat Layanan dan ganti nama sebagai nama blog manifes, yaitu manifes-syabiz.
Ganti skrip yang ada dengan skrip berikut:

Download : manifest-syabiz.txt

* Ubah Judul dan Deskripsi sesuai situs Anda
Klik Simpan dan Sebarkan.

Services Worker

Seperti di atas, buat Service dan ganti namanya menjadi serviceworker-blogname, yaitu serviceworker-syabiz.
Ganti skrip yang ada dengan skrip berikut:

Download : serviceworker-syabiz.txt
Klik Simpan dan Sebarkan.

Offline

Seperti di atas, buat Layanan dan ganti nama sebagai offline-blogname, yaitu offline-syabiz.
Ganti skrip yang ada dengan skrip berikut:

Download : offline-syabiz.txt
* Ganti bagian Title Meta Tag, Theme Color dan Offile yang terdapat pada <body> sesuai keinginan Anda.
Klik Simpan dan Sebarkan.

Membuat Rute

Sekarang kembali ke bagian Pekerja dan kemudian klik Tambah Rute.

Masukkan bidang seperti yang ditunjukkan pada tabel yang diberikan:

Route	Service	Environment
www.syabiz.com/main/*	main-syabiz	production
www.syabiz.com/manifest.json	manifest-syabiz	production
www.syabiz.com/sw.js	serviceworker-syabiz	production
www.syabiz.com/offline.html	offline-syabiz	production

* Masukkan kolom sesuai url blog dan nama blog Anda.

Sekarang coba buka URL satu per satu, misalnya

www.syabiz.com/main/android-icon-144x144.png
www.syabiz/manifest.json
www.syabiz.com/sw.js
www.syabiz.com/offline.html

Jika Anda dapat membuka URL ini yang berarti tidak ada masalah, Anda telah selesai dengan pengaturan Cloudflare.

Sekarang saatnya membuat perubahan di blog.

Mengedit Blog

Sekarang buka Dasbor Blogger. Buka bagian Tema.
Klik Edit HTML.

Tempelkan kode berikut di bawah <head>, jika Anda tidak menemukannya, mungkin sudah diuraikan yaitu <head>. Hapus kode serupa yang ada.

<link href='/main/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57'/>
<link href='/main/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60'/>
<link href='/main/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'/>
<link href='/main/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'/>
<link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='144x144'/>
<link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='/main/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='/main/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png'/>
<link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>
<link href='/main/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png'/>
<link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>
<link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='#2196f3' name='msapplication-TileColor'/>
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage'/>
<meta content='#2196f3' name='theme-color'/>
<link href='/manifest.json' rel='manifest'/>

Ganti kode warna #2196f3 dengan kode yang Anda gunakan di manifest.json

Sekarang ikuti langkah-langkah sesuai template Anda, yaitu Template AMP atau Template Non-AMP.

Template AMP

Jika Anda menggunakan Template AMP, Anda harus mengikuti langkah-langkah di bawah ini:

Tambahkan AMP Serviceworker JS berikut di bawah ke <head> atau di atasnya ke </head>.

<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>

Paste kode berikut di atas ke </body>.

<amp-install-serviceworker data-iframe-src='/offline.html' layout='nodisplay' src='/sw.js'/>

Template Non-AMP

Jika Anda menggunakan Template Non-AMP, Anda harus mengikuti langkah-langkah di bawah ini:

Tambahkan kode Javascript berikut di atas ke </body>.

<script>/*<![CDATA[*/ /* Service Worker */ if('serviceWorker' in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js').then(registration=>{console.log('ServiceWorker registeration successful')}).catch(registrationError=>{console.log('ServiceWorker registration failed: ', registrationError)})})}; /*]]>*/</script>

Terakhir, simpan perubahan dan kunjungi blog Anda di ponsel Anda, yaitu Android, Anda akan dapat melihat tombol untuk menginstal Aplikasi Web Progresif Anda.

Kesimpulan

Ini semua tentang membangun PWA (Aplikasi Web Progresif) untuk Situs Web Blogger Anda. Saya harap Anda menikmati artikel ini. Tolong bagikan artikel ini. Dan jika Anda menghadapi masalah di bagian mana pun atau Anda memiliki pertanyaan, tanyakan kepada kami di kolom komentar.

Namun bagi anda yang masih tetap kesulitan, kami menawarkan jasa pemasangan untuk Website atau Blog anda.

Semoga artikel ini bermanfaat, Terima kasih!

Go to Link

SYABIZ™