labsan / dicoding-first-example-pwa

Latihan kedua pada modul 2: Application Shell pada kelas online Dicoding tentang "Membangun Progressive Web App"

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dicoding-first-example-pwa

Merupakan aplikasi modifikasi hasil latihan pertama dari Modul 2 tentang "Application Shell" yang disimpan di repo dicoding-first-example-spa. Pada aplikasi ini ditambahkan dua teknologi web browser yaitu Service Worker dan Cache agar aplikasi yang dibuat dapat berjalan pada kondisi perangkat offline atau tanpa koneksi. Berikut ini informasi tentang modifikasi aplikasi yang dilakukan pada latihan kedua dari Modul 2 tentang Application Shell :

  • Menambahkan script pada file index.html untuk me-registrasikan Service Worker dan mendaftarkan Web App Manifest
  • Menambahkan file service-worker.js untuk menyimpan dan menggunakan asset dari cache serta menghapus cache lama
  • Menambahkan file manifest.json untuk menyimpan informasi seputar aplikasi seperti nama aplikasi, gambar icon, pengembang, warna tema, dsb

Jika ingin mengetahui hasil dari kode diatas, download terlebih dahulu kode tersebut, kemudian jalankan menggunakan local web server yang kalian gunakan. Local web server yang saya gunakan untuk menjalankan kode program diatas adalah "Web Server for Chrome" yang merupakan ekstensi dari browser Google Chrome. "Web Server for Chrome" mudah sekali digunakan, berikut langkah-langkahnya:

  1. Download terlebih dahulu kode program diatas, lalu di-ekstrak
  2. Unduh ekstensi "Web Server for Chrome" melalui tautan berikut ini: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
  3. Jika muncul pop-up seperti "Add Web Server for Chrome ?", pilih "Add app"
  4. Setelah berhasil dipasang, Web Server tersebut muncul pada halaman chrome apps atau bisa klik tautan berikut ini: chrome://apps/
  5. Buka Web Server tersebut, lalu tekan tombol "CHOOSE FOLDER" untuk memilih folder yang sudah di-ekstrak sebelumnya
  6. Copy Web Server URL(s) tersebut, lalu Paste pada URL browser agar bisa mengakses kode program yang di-download sebelumnya pada browser
  7. Selamat !!!, kamu berhasil menjalankan kode program tersebut menggunakan lokal web server dari browser Google Chrome

About

Latihan kedua pada modul 2: Application Shell pada kelas online Dicoding tentang "Membangun Progressive Web App"


Languages

Language:JavaScript 70.9%Language:HTML 29.1%