Membuat PWA Dengan Hexo

Progressive Web Apps

Halo halo, selamat siang!

Jadi begini, kemarin saya iseng cari-cari plugin Hexo buat blog ini, nah saya nemu satu plugin yang menarik, namanya hexo-pwa, plugin ini akan membuat blog kita menjadi PWA.

Apasih PWA itu? Menurut situs chromeplex, PWA adalah web yang dibuat agar pengguna bisa merasakan experience dari aplikasi native, jadi nanti web yang sudah mendukung PWA punya banyak kelebihan, antara lain adanya fitur add to Homescreen, instant loading, dan kelebihan lainnya.
Lalu bagaimana caranya agar blog Hexo kita bisa menjadi PWA?

Tutorialnya

Install Plugin

Pertama kita harus masuk dulu ke direktori blog kita.

1
$ cd direktoriBlog

Jika sudah didalam direktori blog kita, jalankan perintah ini untuk menginstall plugin hexo-pwa.

1
$ npm install --save hexo-pwa

Configure Plugin

Kalau sudah plugin sudah terinstall, kita bisa menambahkan baris kode berikut ini kedalam file _config.yml.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
pwa:
manifest:
path: /manifest.json
body:
name: hexo
short_name: hexo #ini menjadi nama di homescreen
icons: #src icon bisa diganti sesuai keinginan
- src: /images/android-chrome-192x192.png
sizes: 192x192
type: image/png
- src: /images/android-chrome-512x512.png
sizes: 512x512
type: image/png
theme_color: '#ffffff'
background_color: '#ffffff'
display: standalone
serviceWorker:
path: /sw.js
preload:
urls:
- /
posts: 5
opts:
networkTimeoutSeconds: 5
routes:
- pattern: !!js/regexp /hm.baidu.com/
strategy: networkOnly
- pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
strategy: cacheFirst
- pattern: !!js/regexp /\//
strategy: networkFirst
priority: 5

Baris kode itu akan membuat file manifest.json yang akan mengatur bagaimana tampilan icon blog kita saat ditaruh ke homescreen smartphone.

Audit Dengan Lighthouse (Optional)

Jika sudah selesai setting plugin, kita bisa mengaudit blog kita dengan Lighthouse. Jika menggunakan browser Chrome, fitur ini sudah tersedia di bagian audits pada Developer Tools, klik saja Run audits dan Chrome akan melakukan analisa terhadap blog kita.

Ini hasil audit dari blog saya
Hasil Audit
Lumayanlah hehe.

Menggunakan Add to Homescreen

Ini fitur yang paling saya suka dari PWA, jadi nanti blog yang kita taruh di homescreen smartphone kita akan otomatis mempunyai splash screen dan address bar yang berada diatas browser akan hilang.
Karena plugin ini belum sempurna, jadi kita harus menambah secara manual blog kita ini ke homescreen dengan cara klik tombol titik 3 di kanan atas -> add to homescreen. Oiya, disini saya baru mencoba browser Chrome di android, sebenarnya Chrome akan otomatis mendeteksi dan akan memberikan prompt jika suatu web sudah mendukung PWA, tetapi karena plugin ini belum sempurna jadi kita harus menggunakan fitur Add to Homescreen secara manual.

Oke cukup itu saja tutorial yang saya bagi hari ini, masih banyak plugin menarik dari Hexo yang mau saya ulik-ulik, jika ada pertanyaan atau bingung, silahkan tinggalkan komentar, terima kasih. Sampai ketemu di tulisan selanjutnya.

Pengumuman Jekyll ternyata juga punya plugin PWA, hehe.

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 D Blog All Rights Reserved.

Doddy Rizal Novianto hold copyright