Progressive Web App (bagian 3)

Halo devs !

Jika temen-temen sudah belajar teorinya, kurang afdol kalo belum praktik. Ya kan? Oke, untuk masuk ke codelabsnya ada hal yang perlu di persiapkan. Apa saja?

1. Text Editor (Sublime Text, Visual Studio Code, Notepad++, dll). Disini saya pake Visual Studio Code ya :)
2. Browser. Perlu di ketahui bahwa PWA belum support semua browser. Kali ini kita menggunakan chrome diatas versi terbaru (72 atau lebih).
3. Xampp. Service Worker membutuhkan localhost untuk developmentnya.

Disini kita akan membuat tampilan sederhana menggunakan framework css yaitu Materialize. Tapi saya tidak menjelaskan bagaimana membuat tampilan menggunakan framework materialize. Karna saya yakin pasti temen-temen disini jauh lebih jago di banding saya. Gimana, bisa di lanjutkan kan? Yuk kita mulai,

1. Download Materialize

Temen-temen harus mendownload materialize terlebih dahulu. Setelah di download jangan lupa di extract ya. Lalu file apa saja yang terdapat di dalam folder materialize? Seperti di bawah inilah gambarannya :

Materialize
  |css
     |materialize.css
     |materialize.min.css
  |js
     |materialize.js
     |materialize.min.js
  |LICENSE
  |README.md

Note : Extract di dalam xampp/htdocs.

2. Tambahkan file index.html

Pada root tambahkan file index.html. Sehingga penampakannya seperti di bawah ini :

Materialize
  |css
     |materialize.css
     |materialize.min.css
  |js
     |materialize.js
     |materialize.min.js
  |index.html
  |LICENSE
  |README.md

Setelah berhasil membuat file index.html, sekarang waktunya kita menambahkan coding di dalamnya. Temen-temen bisa copas ataupun membuat sendiri ya ^^

3. Tambahkan file style.css

Jika temen-temen perhatikan pada line 8 kita memanggil file pada css/style.css, sedangkan kita belum membuat file tersebut. Yuk kita tambahkan file tersebut.

Buka folder css dan tambahkan file style.css sehingga struktur foldernya seperti ini :

Materialize
  |css
     |materialize.css
     |materialize.min.css
     |style.css
  |js
     |materialize.js
     |materialize.min.js
  |LICENSE
  |README.md

Dan berikut ini code nya.

4. Add image

Next, kita buat folder img lalu isikan gambar di dalamnya. Jika temen-temen belum punya gambarnya, bisa download disini.

5. Open with Browser

Sampai disini kita berhasil membuat tampilan web sederhana menggunakan Materialize. Nyalakan terlebih dahulu apache nya, lalu buka localhost/materialize. Seperti inilah penampakannya :)

6. Service Worker

Saat ini, kita sudah masuk ke tahap Service Worker. Di dalam rootnya, kita membuat file baru dengan nama main.js dan isikan code nya seperti di bawah ini.

Sebelum kita lanjut, kita buka file index.html kita, dan tambahkan tag script sebelum tag penutup html untuk memanggil file main.js.

<script src="main.js"></script>

Setelah berhasil, kita akan membuat file baru di root bernama sw.js dan seperti ini codenya.

Oke, sampai sini kita sudah berhasil menambahkan service worker ya temen-temen. Jika ada yang error bisa di tanyakan di kolom komentar.

Mohon maaf jika materi kita mengenai Progressive Web App (PWA) terlalu banyak ya. See you next last artikel ya temen-temen ^^