Membuat PWA Pertama

Dalam pembuatan Progressive Web App atau biasa disingkat menjadi PWA di butuhkan tools untuk membuat sebuah aplikasi yang dibangun, dapat melakukan optimasi pada sebuah website. Optimasi yang dilakukan tidak hanya akan membuat website menjadi lebih cepat namun juga mampu memberikan pengalaman responsive pada pengguna mobile. 

PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet.

Kebutuhan Tools

1. Sama seperti pada pelatihan sebelumnya, tools yang dibutuhkan adalah:
1. Aplikasi NPM
2. Aplikasi Browser
3. Aplikasi Code Editor (VS Code)
4. Aplikasi Git
2. Download atau clone file dari github:
1. https://github.com/PacktPublishing/Progressive-Web-Apps-PWA---The-Complete-Guide/tree/master/1.%20Getting%20Started
2. Extract file dengan nama file: first-pwa-start.zip

Aplikasi PWA Pertama

1. Jalankan editor (VS Code) dan klik File > Open Folder.
2. Arahkan untuk membuka folder first-pwa-start yang baru saja di extract.
3. Setelah terbuka pada folder first-pwa-start, jalankan terminal dari menu Terminal > New Terminal seperti pada gambar:
4. Opsi ini akan membuka terminal pada window VS Code yang terletak di bagian bawah.
5. Pada terminal yang telah terbuka, jalankan instruksi: npm install
6. Bila terminal tidak dapat menjalankan perintah npm, jalankan terminal cmd dan masukkan instruksi: Set-ExecutionPolicy RemoteSigned
7. Setelah itu, terminal pada VS Code di restart dan jalankan Kembali instruksi npm install.
8. Setelah instalasi npm berjalan dengan sukses, jalankan web server dengan instruksi npm start.
9. Setelah itu, buka aplikasi browser Chrome dan masukkan url http://localhost:3000
10. Maka pada aplikasi Chrome, akan tampil halaman seperti pada gambar berikut.
11. Ini adalah halaman web biasa yang belum ditambahkan service workers. Hal ini dapat dilihat pada Developer Tool > Application. Window Application tidak menampilkan informasi service worker yang terdaftar dari halaman ini.
12. Pada folder project pertama ini, dapat dilihat struktur folder dan file project seperti pada gambar berikut.

Kesimpulan

1. Dapat dilihat bahwa di dalam folder public, ada folder src dan file sw.js.
2. File sw.js adalah sebuah file JavaScript yang menyimpan code untuk dijadikan sebagai service worker.
3. Di dalam folder src, terdapat sub folder css dan js.
4. Di dalam folder js, terdapat file app.js yang berisi kode JavaScript untuk mengatur tampilan animasi pada web.
5. Untuk mengaktifkan atau melakukan registrasi sw.js sebagai service worker, modifikasi app.js di dalam src/js/ dengan menambahkan kode berikut di bawah deklarasi variable button.
6. navigator.serviceWorker.register('/sw.js’);
7. Setelah itu, refresh halaman localhost dan cek status service worker pada Developer Tools.
8. Bila registrasi service worker berhasil, maka aplikasi tetap dapat dijalankan walau status koneksi adalah offline.