2 Cara Pasang atau Setting PWA di Blogger

Daftar Isi

Cara Memasang PWA dengan metode "Simple"
Cara Memasang PWA dengan metode "Advanced"

2 Cara Pasang atau Setting PWA di Blogger

PWA adalah singkatan dari Progressive Web App yang dapat membuat website atau blog layaknya sebuah aplikasi mobile seperti pada umumnya.

Dengan begitu, mengakses website tidak harus membuka melalui browser, melainkan dapat melalui icon aplikasi pada beranda mobile.

Untuk penjelasan lebih lengkap mengenai PWA dapat Anda baca pada artikel berikut:

Apa itu PWA (Progressive Web App) dan Studi Kasus

https://theme62.com/id/blog/progressive-web-app

Pada tutorial ini DIKHUSUSKAN untuk pengguna Template Blogger Theme62.

Apa itu Theme62?

Theme62 adalah website penyedia template blogger terbaik dengan fitur yang terinspirasi dari WordPress, memiliki dukungan banyak plugin dan konfigurasi template yang mudah tanpa menyentuh kode apapun.

Kembali ke topik utama, cara pasang atau setting PWA di blogger ini memiliki 2 cara/metode:

Simple, Anda tinggal aktifkan saja melalui plugin PWA di Dashboard Template, tidak ada konfigurasi lainnya.
Advanced, Anda harus membuat Worker pada Cloudflare, saya akan jelaskan nanti.

Apa perbedaan dari keduanya?

Simple

Menambahkan blog ke beranda mobile dilakukan secara manual, karena tidak muncul notifikasi install aplikasi.
Tidak mendapatkan tampilan khusus ketika koneksi internet sedang offline.
Blog yang terinstal ke beranda mobile tidak dapat dibagikan (seperti menggunakan SHAREit) ataupun dicadangkan, karena pada dasarnya seperti sebuah shortcut atau pintasan saja.
Dapat dipasangkan di Subdomain Blogger (example.blogspot.com) maupun Custom Domain (example.com).

Advanced

Blog akan muncul notifikasi install aplikasi, sehingga mempermudah pengguna untuk menginstalnya.
Mendapatkan tampilan khusus ketika koneksi internet sedang offline.
Blog yang terinstal ke beranda mobile dapat dibagikan (seperti menggunakan SHAREit) ataupun dicadangkan, karena blog menjadi aplikasi utuh seperti aplikasi pada umumnya.
Hanya dapat dipasangkan di Custom Domain (example.com), jadi untuk Subdomain Blogger (example.blogspot.com) tidak bisa menggunakan metode ini.

Cara Memasang PWA dengan metode "Simple"

1. Masuk ke Theme62 > My License > Pilih blog Anda.

2. Buka menu Plugin > Progressive Web App.

3. Aktifkan plugin Progressive Web App, dan pilih method Simple.

4. Kemudian perbarui template.

5. Selesai..

Bagaimana cara menambahkan blog ke beranda mobile?

Kunjungi blog Anda di browser (contoh Google Chrome), kemudian ketuk icon titik 3 > Tambahkan ke Layar Utama

Cara Memasang PWA dengan metode "Advanced"

Disini saya asumsikan sudah membuat akun Cloudflare dan domain blog Anda sudah terhubung dengan Cloudflare, jika belum Anda dapat mengikuti tutorial berikut:

Cara Setting Custom Domain Blogger Menggunakan Cloudflare

https://www.igniel.com/2019/06/cara-custom-domain-blogger-cloudflare.html

Kemudian lanjutkan langkah berikut:

1. Masuk akun Cloudflare.

2. Klik menu Workers.

3. Isikan nama subdomain Workers yang akan digunakan, Anda bebas mengisi apa saja selama tersedia, kemudian klik Set up.

4. Pilih Continue with Free.

5. Pada tahap ini sudah berhasil membuat Workers, kemudian kita akan membuat Service baru untuk Theme62, klik menu Workers > Create a Service.

6. Ganti nama dengan "theme62", dan klik Create service

7. Ganti seluruh script dengan dibawah ini, kemudian klik Save and Deploy

	const Theme62 = async event => {
	const url = new URL(event.request.url);
	const param = url.searchParams;
	const pathname = param.get('path') ?? '';
	const filename = url.pathname.substr(2);
	const response = await fetch(`https://theme62.pages.dev/${pathname}/${filename ? filename : 'workers-test'}`);
	const { headers, status } = response;
	return new Response(await response.text(), {
		status: status,
		headers: {
			'content-type': headers.get('content-type')
		}
	})
}
addEventListener('fetch', event => {
	return event.respondWith(Theme62(event));
});

8. Setelah itu, kembali ke halaman Dashboard Cloudflare > Workers > Triggers, dan klik Add route

9. Isi sebagai berikut, kemudian klik Add route

Route : www.droidawam.com/@*
Zone : droidawam.com

Sesuaikan dengan domain blog milik Anda.

10. Pada tahap ini Service untuk Theme62 sudah terpasang, untuk mengecek apakah sudah terpasang dengan benar, coba akses domain blog Anda dengan menambahkan tanda "@" dibelakang, seperti ini :