BAB III

PWA#1
3.1. Tujuan
1. Praktikan mengetahui apa itu Progressive Web Application.
2. Praktikan memahami kegunaan dari Progressive Web Application.
3. Praktikan dapat memahami cara kerja dari Progressive Web Application.
4. Praktikan mengetahui cara mengimplementasikan Progressive Web
Application.
5. Praktikan dapat membuat aplikasi Progressive Web Application sederhana.
6. Praktikan dapat memahami fungsi Service Worker pada PWA.
7. Praktikan dapat memahami fungsi manifest.js pada PWA.
3.2. Alat dan Bahan
3.2.1. PC/Laptop

Gambar 3.1 Laptop

Laptop berfungsi untuk menjalankan aplikasi yang diperlukan untuk
praktikum seperti membuka Chrome, VSCode, dan menjalankan webserver.
3.2.2. Google Chrome

Gambar 3.2 Chrome

Chrome digunakan untuk menjalankan Web Server for Chrome dan
membuka aplikasi yang dibuat melalui localhost.
3.2.3. Visual Studio Code

Gambar 3.3 VSCode

Visual Studio Code berfungsi sebagai text editor untuk mengubah kode
aplikasi.
3.2.4. Web Server for Chrome

Gambar 3.4 Web Server for Chrome

Web Server for Chrome berfungsi untuk menjalankan web server pada
Laptop melalui browse Google Chrome.
3.3. Dasar Teori
3.3.1. Progressive Web App (PWA)
PWA adalah sebuah aplikasi web yang menggunakan beberapa teknologi
modern yang membuat user experience seperti menggunakan Native App
(Android/iOS).
Dengan konsep offline first dan Web API baru, aplikasi yang berjalan pada
browser tidak akan memunculkan pesan network error atau white screen seperti
yang selama ini sering kali kita alami ketika berada pada jaringan yang sangat
buruk. Pada PWA, ketika kita meninggalkan browser, dan kembali lagi membuka
aplikasi tersebut pada jaringan buruk atau tanpa jaringan sekalipun kita tidak akan
kehilangan UI dan data-data terakhir.
(Sumber: Modul 2 Praktikum Pemrograman Perangkat Bergerak 2019)
3.3.2. Web App Manifest
Manifes aplikasi web adalah file JSON sederhana yang memberikan Anda,
developer, kemampuan untuk mengontrol bagaimana aplikasi terlihat oleh
pengguna di daerah yang mereka harap akan melihat aplikasi (misalnya, layar
beranda perangkat seluler), mengarahkan apa yang bisa diluncurkan pengguna, dan
menentukan tampilannya pada saat peluncuran.
Manifes aplikasi web menyediakan kemampuan untuk menyimpan
bookmark situs ke layar beranda perangkat. Ketika sebuah situs diluncurkan dengan
cara ini:
 Situs akan memiliki ikon dan nama yang unik sehingga pengguna bisa
membedakannya dari situs yang lain.
 Situs akan menampilkan sesuatu kepada pengguna selagi sumber daya diunduh
atau dipulihkan dari cache.
 Situs akan menyediakan karakteristik tampilan default ke browser untuk
menghindari transisi yang terlalu mendadak bila sumber daya situs tersedia.
Semua ini dilakukan melalui mekanisme sederhana dari metadata dalam file
teks. Itulah manifes aplikasi web.
(Sumber: https://developers.google.com/web/fundamentals/web-app-manifest/?hl=id)
3.3.3. Service Worker
Service Worker adalah teknologi dibalik PWA yang memberikan
fungsionalitas offline, notifikasi, update konten, pergantian konektivitas dan
lainnya. Service worker adalah semacam proxy yang berada di tengah antara
aplikasi web, browser, dan jaringan, atau lebih sederhana lagi bisa dianalogikan
aplikasi kita akan diatur oleh service worker agar bisa berjalan offline terlebih
dahulu, mengembalikan data dari cache jika request ke jaringan gagal.
(Sumber: Modul 2 Praktikum Pemrograman Perangkat Bergerak 2019)
3.3.4. Web Server
Web server adalah sebuah software yang memberikan layanan berbasis data
dan berfungsi menerima permintaan dari HTTP atau HTTPS pada klien yang
dikenal dan biasanya dikenal dengan nama web browser (Mozilla Firefox, Google
Chrome) dan untuk mengirimkan kembali yang hasilnya dalam bentuk beberapa
halaman web dan pada umumnya akan berbentuk dokumen HTML.
Fungsi utama server atau web server adalah untuk melakukan atau akan
mentransfer berkas permintaan pengguna melalui protokol komunikasi yang telah
ditentukan sedemikian rupa. halaman web yang diminta terdiri dari berkas teks,
video, gambar, file dan banyak lagi. pemanfaatan web server berfungsi untuk
mentransfer seluruh aspek pemberkasan dalam sebuah halaman web termasuk yang
di dalam berupa teks, video, gambar dan banyak lagi.
(Sumber: Modul 2 Praktikum Pemrograman Perangkat Bergerak 2019)
3.4. Langkah Kerja
1. Menyalakan dan mengkonfigurasi Web Server for Chrome.

Gambar 3.5 Mengatur web server

Choose folder lalu pilih folder Latihan yang telah di-download sebelumnya,
kemudian Start Web Server dan centang Automatically show index.html. Klik web
server.
2. Matikan Firewall pada jaringan pubik.

Gambar 3.6 Mematukan firewall

3. Buka link dari web server dan lihat tampilannya.

Gambar 3.7 Membuka aplikasi

4. Buat file dengan nama nav.html, seperti ditunjukkan pada gambar berikut.

Gambar 3.8 Membuat file nav.html

5. Isikan dengan source code berikut untuk menambahkan daftar menu sidenav
dan topnav.
<!--untuk menampilkan menu home-->
<li><a class="waves-effect" href="#home"><i class="material-
icons left">home</i> Home</a></li>
<li><div class="divider"></div></li>
<!--untuk menampilkan menu abous us-->
<li><a class="waves-effect" href="#about"> <i
class="material-icons left">supervisor_account</i> About
Us</a></li>
<li><div class="divider"></div></li>
<!--untuk menampilkan menu contact us-->
<li><a class="waves-effect" href="#contact"> <i
class="material-icons left">contacts</i> Contact Us</a></li>
<li><div class="divider"></div></li>
<!--untuk menampilkan ikon-->
<li><a id="logo-container" class="brand-logo center
pulse"><img src="img/icon.png" class="circle" style="height:
23px;" href="#"></a></li>

6. Maka hasilnya akan tampak seperti ini.

 Gambar 3.9 Tampilan desktop

Gambar 3.10 Tampilan mobile

7. Selanjutnya, menampilkan konten halaman. Tambahkan kode berikut di
dalam file script.js (tambah di dalam kode eventListener
DOMContentLoaded).
// Load page content
var page = window.location.hash.substr(1);
if(page == '') page = 'home'; //jika direktorinya / sama
dengan pada direktori/home
loadPage(page); //meload halaman
//
function loadPage(page) //fungsi load halaman
{
var xhttp = new XMLHttpRequest(); //deklarasi http
request
xhttp.onreadystatechange = function() { //membuat fungsi
ketika memuat halaman
if (this.readyState == 4){ //jika readystate bernilai
4
var content = document.querySelector(".body-
content"); //deklarasi query selector dengan nama content
if(this.status == 200) { //jika error halaman
menunjukkan 200
content.innerHTML = xhttp.responseText;
} else if(this.status == 404) {
content.innerHTML = "<p>Halaman tidak ditemuk
an.</p>"; //jika halaman tidak ditemukan
} else {
content.innerHTML = "<p>Ups.. halaman tidak d
apat diakses.</p>"; //jika tidak dapat diakses atau tidak
dapat dimuat dari cache
}
}
};
xhttp.open("GET", 'pages/'+page+'.html', true);
xhttp.send();
}

8. Masukkan folder img ke dalam folder project.

9. Buat folder “pages” pada folder project tersebut. Lalu, buat file “home.html”,
“about.html”, dan “contact.html”. Isi file “home.html” dengan kode berikut.
<!--menampilkan background-image-->
<div class="parallax-container" style="background-image:
url('img/bg-nav.jpg'); background-attachment: scroll; height:
70%;">
<div class="row container center">
<!--menampilkan teks Selamat Datang-->
<h3 style="color: azure;">Selamat Datang</h3>
<!--menampilkan teks Praktikum Modul 2-->
<h5 style="color: azure;">Praktikum Modul 2</h5>
</div>
</div>
<div class="section grey lighten-2">
<div class="row container">
<!--menampilkan teks Progressive Web Application-->
<h5 class="header">Progressive Web Application</h5>
<!--menampilkan teks dalam bentuk paragraf-->
<p class="grey-text text-darken-3 lighten-3">Sebuah
aplikasi web yang menggunakan beberapa teknologi modern yang
membuat user experience seperti menggunakan Native App
(Android/iOS).</p>
<div class="divider black"></div>
<!--menampilkan teks dalam bentuk paragraf-->
<p class="center">Ini adalah laman aplikasi web
progresif pertama karya kelompok 46.<br>
Semoga paham dengan materi yang diberikan dan dapat
bermanfaat untuk kedepannya.<br>
Enjoy the class!~
</div>
</div>

10. Modifikasi fungsi loadNav() dengan menambahkan kode event listener

pada file script.js di dalam eventListener DOMContentLoaded untuk setiap
tautan pada menu menjadi seperti ini.
function loadNav() //memuat nav
{
var xhttp = new XMLHttpRequest(); //deklarasi fungsi http
request dengan nama xhttp
xhttp.onreadystatechange = function() { //membuat fungsi
ketika memuat halaman
if (this.readyState == 4){ jika state halaman
menunjukkan 4
if(this.status != 200) return; //Muat
daftar tautan menu
document.querySelectorAll(".topnav, .sidenav")
memilih semua topnav dan sidenav
.forEach(function(elm){
elm.innerHTML = xhttp.responseText;
});
//Daftarkan event listener untuk setiap tautan menu
 document.querySelectorAll('.sidenav a, .topnav a'
)
.forEach(function(elm){
elm.addEventListener('click', function(event)
{
//Tutup sidenav
var sidenav = document.querySelector('.sidenav');
M.Sidenav.getInstance(sidenav).close();
//Muat konten halaman yang dipanggil
page = event.target.getAttribute('href').substr(1);
loadPage(page); //memuat halaman
});
});
}
};
xhttp.open("GET", 'nav.html', true); memuat halaman
nav.html dengan metode get
xhttp.send(); //mengirim xhttp
}

11. Buat file dengan nama service-worker.js di dalam folder project. Biarkan
kosong terlebih dahulu. Kemudian buka kembali file index.html dan
tambahkan kode berikut di bagian paling bawah sebelum tag tutup </body>.
<script>
// REGISTER SERVICE WORKER
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() { //untuk
mengecek status pendaftaran service worker
navigator.serviceWorker.register('/service-worker.js')
.then(function() {
console.log('Pendaftaran ServiceWorker berhasil');
}) //apabila service worker berhasil
.catch(function(){
console.log('Pendaftaran ServiceWorker gagal');
}); //apabila service worker tidak berhasil
})
} else {
console.log("ServiceWorker belum didukung browser ini");
} //apabila browser tidak mendukung sw
</script>

Kemudian mendaftarkan file service-worker.js menggunakan method

navigator.serviceWorker.register(). Buka Dev Tools pada Google Chrome
(Ctrl + Shift + i) saat membuka page latihan. Jika berhasil maka tampilan pada
Service Worker akan seperti ini.
12. Untuk menyimpan file asset ke cache, sekarang kita akan menulis kode
service worker pada file service-worker.js dengan menambahkan kode
berikut.
const CACHE_NAME = 'firstpwa'; //menamai cache
var urlsToCache = [ //untuk mendaftarkan aset yang akan
disimpan pada cache
'/',
'/nav.html',
'/index.html',
'/pages/home.html',
'/pages/about.html',
'/pages/contact.html',
'/css/materialize.min.css',
'/js/materialize.min.js',
'/js/script.js',
'/img/parallax.png',
'/img/icon.png'
];

self.addEventListener('install', function(event){
//menyimpan aset yang dicache pada storage
event.waitUntil(
caches.open(CACHE_NAME) memuat CACHE_NAME
.then(function(cache) { membuat fungsi untuk cache
return cache.addAll(urlsToCache);
//mengembalikan ke urlsToCache
})
);
});

Bila kode berjalan dengan baik, maka seharusnya aset-aset tadi akan terdaftar
pada cache browser. Kamu dapat mengecek cache yang sudah terdaftar
pada DevTools tab Application bagian Cache Storage. Klik tanda segitiga
terbalik di sebelah kiri menu Cache Storage untuk melihat daftar cache. Sampai
sini baru menyimpan aset-aset file ke cache.
 Gambar 3.11 Cache storage
13. Tambahkan kode berikut pada file service-worker.js agar halaman
menggunakan asset yang sudah disimpan di-cache.
self.addEventListener('fetch', function(event) { /untuk
menggunakan aset dari cache pada penyimpanan
event.respondWith( //respons ketika event
caches.match(event.request, {cacheName:CACHE_NAME})
.then(function(response) { //mengecek aset diakses
dari mana asalnya
if(response){
console.log("ServiceWorker: Gunakan aset dari
cache: ", response.url); //jika cache diakses dari cache
return response;
}
console.log("ServiceWorker: Memuat aset dari serv
er: ", event.request.url); //jika cache diakses server
return fetch(event.request); //mengembalikan
fetch menyimpan halaman ke cache storage
})
);
});

Bila sekarang kamu refresh kembali halaman, kamu akan lihat pada tab
Network aplikasi masih belum menggunakan aset dari cache. Hal ini disebabkan
karena service worker yang aktif masih kode yang lama. Browser akan menunggu
proses pengaktifan sampai kita membuka aplikasi pada sesi yang baru. Satu sesi
dihitung selama kita membuka aplikasi sampai kita menutup tab browser atau
jendela browsernya.
 Gambar 3.12 Merefresh halaman
Setelah service worker yang terbaru diaktifkan, kamu dapat memuat ulang
halaman dan sekarang seharusnya halaman sudah menggunakan aset dari cache,
ditunjukkan pada kolom size yang sekarang sudah tertulis bahwa aset disuplai dari
service worker.

Gambar 3.13 Memuat aset dari cache

Sekarang kamu dapat mencoba memanggil halaman dalam mode offline
untuk memastikan aplikasi tetap tampil meskipun tidak terhubung ke jaringan.
Kamu dapat mematikan web server, atau pada tab Network di DevTools, kamu
dapat mengaktifkan ceklis opsi Offline di bagian atas panel untuk menyimulasikan
mode jaringan offline.
14. Menghapus cache lama. Sekarang coba buat beberapa perubahan kecil pada
halaman (konten atau CSS) dan ganti nama cache-nya di file service-
worker.js.
 const CACHE_NAME = 'firstpwa-v1'; //mengubah nama cache
menjadi firstpwa-v1

Gambar 3.14 Menghapus cache lama

Semakin sering mengganti nama cache, maka akan banyak cache sampah di
browser pengguna dan akan memakan ruang penyimpanan perangkat milik si
pengguna. Untuk itu kita membuat mekanisme penghapusan cache yang lama agar
tidak membebani pengguna. Tambahkan kode berikut di bagian akhir file service-
worker.js.
self.addEventListener("activate", function(event) { //untuk
menghapus cache lama
event.waitUntil(
caches.keys().then(function(cacheNames) { //memuat fungsi
cache name
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName != CACHE_NAME) { //apabila nama cache
name sesuai dengan cache name yang dideklarasikan
console.log("ServiceWorker: cache " + cacheName +
" dihapus"); //menampilkan log sw
return caches.delete(cacheName); //mengembalikan
untuk proses menghapus cache
}
})
);
})
);
});

15. Menambahkan aplikasi ke home screen. Agar sebuah PWA bisa dipasang
ke home screen. Sebuah web app manifest didaftarkan melalui
 elemen link yang disimpan di dalam tag head di setiap halaman HTML
seperti saat kita akan menggunakan CSS eksternal. Ubah
kode index.html dengan memasukkan kode berikut di dalam elemen <head>.
<!--mengatur warna tema yang digunakan-->
<meta name="theme-color" content="#00897B"/>
<!--mengatur letak file manifes-->
<link rel="manifest" href="/manifest.json">

16. Selanjutnya, buat sebuah file bernama manifest.json di folder project

berdampingan dengan index.html dan isikan dengan konten berikut ini.
{
"name": "Kel46 - PWA Dasar", //nama aplikasi pada mobile
"short_name": "PWA Dasar", //nama pada splashcreen
"description": "Aplikasi PWA Dasar Kelompok 46 Praktikum
MDP 2019", //nama shortcut pada mobile
"start_url": "/index.html", //mengatur halaman awal
"display": "standalone", //untuk berjalan offline
"background_color": "#00897B", //mengatur warna
"theme_color": "#00897B", //mengatur warna
"icons": [{ memuat ikon yang akan digunakan
"src": "img/icon/Icon-36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
}, {
"src": "img/icon/Icon-48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
}, {
"src": "img/icon/Icon-72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
}, {
"src": "img/icon/Icon-96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
}, {
"src": "img/icon/Icon-144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
}, {
"src": "img/icon/Icon-192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
 }

17. Terakhir simpan file icon di dalam folder project dan beri nama icon.png.
Hapus tanda komentar yang ada di nav.html agar icon muncul di halaman
kerja.
<li><a id="logo-container" class="brand-
logo center pulse"><img src=" img/icon.png" class="circle"
style="height: 23px;" href="#"></a></li>

18. Untuk menguji web app manifest telah berhasil di daftarkan, buka kembali
aplikasi PWA di Chrome, lalu buka tab Application di jendela Chrome Dev
Tools dan pilih menu Manifest di sebelah kiri. Periksa bahwa icon dan
elemen lainnya telah terdefinisikan di dalam file manifest.json.
19. Terakhir, install aplikasi dengan cara menekan tombol titik tiga dipojok
kanan atas, seperti yang ditunjukkan pada gambar di bawah ini. Lalu, klik
“Install ...”.

Gambar 3.15 Menginstall aplikasi pada desktop

20. Setelah diinstall, akan muncul ikonnya pada Desktop.
Buka aplikasinya dari Desktop, maka akan seperti gambar berikut ini karena
tipe tampilannya standalone, maka akan tidak akan terlihat URL-nya seperti pada
saat dibuka melalui browser.

Gambar 3.16 Shortcut aplikasi pada desktop

21. Buka aplikasinya dari Desktop, maka akan seperti gambar berikut ini karena
tipe tampilannya standalone, maka akan tidak akan terlihat url nya seperti
pada saat dibuka melalui browser.
 Gambar 3.17 Tampilan aplikasi setelah diinstall
22. Install dan buka PWA melalui mobile dengan cara satu kan jaringan internet
pada desktop dan mobile.

Gambar 3.18 Tampilan aplikasi pada mobile

23. Lalu, install PWA-nya di Mobile.
 Gambar 3.19 Menginstal aplikasi pada mobile
24. Buka PWA-nya melalui Mobile.

Gambar 3.20 Tampilan apliaksi setelah diinstal

3.5. Hasil Percobaan dan Analisa

Gambar 3.21 Tampilan aplikasi pada browser

Untuk membuat halaman dapat diakses melalui browser, digunakan plugin
Web Server for Chrome pada browser Chrome. Kemudian mengatur direktori
dengan port defaultnya yaitu 8887.
Untuk dapat membuat halaman dapat diakses tanpa internet, digunakan service
worker. Service worker berisikan perintah mengenai cache yang akan disimpan
maupun dihapus.

Gambar 3.22 Service Worker telah terdaftar

Agar halaman dapat berjalan dalam jaringan low ataupun offline, maka
harus menyimpan asset-asset file seperti gambar '/img/parallax.png', navbar
'/nav.html', ke cache yang akan dimasukkan pada file service-worker.js yang
dimana asset-asset tersebut akan terdaftar di Cache Storage pada aplikasi.
const CACHE_NAME = 'firstpwa-v1';
var urlsToCache = [
'/',
'/nav.html',
'/index.html',
'/pages/home.html',
'/pages/about.html',
'/pages/contact.html',
'/css/materialize.min.css',
'/js/materialize.min.js',
'/js/script.js',
'/img/parallax.png',
'/img/arief.jpg',
'/img/majid.jpg',
'/img/bg-nav.jpg',
'/img/icon/favicon.ico',
'/manifest.json',
'/img/icon.png'
];

self.addEventListener('install', function(event){
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {cacheName:CACHE_NAME})
.then(function(response) {
if(response){
console.log("ServiceWorker: Gunakan aset dari
cache: ", response.url);
return response;
}
console.log("ServiceWorker: Memuat aset dari
server: ", event.request.url);
return fetch(event.request);
})
);
});

self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName != CACHE_NAME) {
console.log("ServiceWorker: cache " + cacheName
+ " dihapus");
return caches.delete(cacheName);
}
})
);
 })
);
});

Pada kode dari service worker di atas, terdapat urlsToCache yang isinya
merupakan file-file yang akan dicache sehingga dapat diakses apabila tidak ada
koneksi internet seperti gambar di bawah.

Gambar 3.23 Membuka halaman secara offline

Gambar 3.24 Mengambil aset dari cache

Terlihat bahwa pada gambar di atas service workernya bekerja yaitu dengan
tidak mengakses aset dari server, tetapi menggunakan aset dari cache, sehingga
halaman dapat dibuka meskipun tidak terhubung dengan internet.
Kemudian untuk bagian self.addEventListener('install',

function(event) berfungsi untuk membuat menyimpan cache dari file yang

disebutkan [ada bagian urlsToCache.
Kemudian pada bagian self.addEventListener('fetch',

function(event) yaitu untuk mengambil dari cache yang disimpan pada

penyimpanan.
Kemudian untuk bagian self.addEventListener("activate",

function(event) yaitu untuk membuat mekanisme penghapusan cache yang

lama agar tidak membebani pengguna. Karena jika tidak begitu, maka semakin
sering memuat halaman, maka cache akan menumpuk dan memenuhi
penyimpanan.
 Gambar 3.25 Mengambil aset dari cache
Setelah itu membuat web app manifest dengan format JSON untuk
memasang aplikasi tersebut ke home screen, yang akan menambahkan icon, nama
aplikasi sebagai pembeda secara visual dengan aplikasi lainnya. Membuat file
manifest.json, lalu memasukkan source code yang berisi nama dengan perintah
"name": "PWA Dasar Kelompok 46",, memberikan deskripsi "description":
"Aplikasi PWA Dasar Kelompok 46 Praktikum MDP 2019", dengan perintah
dan icon dengan format icon.png dalam berbagai ukuran, misal pada ukuran 72x72,
menggunakan perintah Icon-72.png", "sizes": "72x72", "type":

"image/png", "density": "1.5" }, { "src": "img/icon/. Lalu periksa pada

Dev Tools bahwa manifest telah didaftarkan.

Gambar 3.26 Manifes telah didaftarkan

 Jika tampil seperti tampilan pada gambar di atas, maka manifest telah
berhasil didaftarkan dengan menampilkan informasi yang ada di dalam
manifest.json.

Gambar 3.27 Storage cache

Untuk file cache-nya, akan dapat dilihat pada bagian Devtools >
Application, terlihat bahwa file cache tersimpian dengan nama firstpwa-v1 yang
dapat diakses dalam keadaan offline.

Gambar 3.28 Web server

Kemudian untuk dapat diakses dari mobile, dapat dengan cara
menghubungkan desktop dan mobile dalam satu jaringan yang sama, kemudian
pada mobile membuka URL 192.168.1.2:8887 pada browser.
 Gambar 3.29 Tampilan aplikasi pada mobile
Apabila berhasil dibuka, maka akan menampilkan halaman yang sama
dengan yang di desktop. Kemudian jika sudah berhasil dibuka, dapat memasang
aplikasi dengan menambahkan ke layar utama.

Gambar 3.30 Potongan kode manifes

Untuk pemasangan offline, detailnya dapat dilihat pada potongan kode pada
manifest.json. Pada potongan kode tersebut, maka ketika dibuka ketika offline pada
mobile, akan tampil PWA KELOMPOK 46, kemudian untuk warna ada pada
backgroud_color dan theme_color yang pada potongan kode di atas akan
menunjukkan warna ungu. Kemudian untuk start_url, yaitu menunjukkan halaman
yang akan dibuka pertama kali ketika membuka aplikasi.
 Gambar 3.31 Menginstall aplikasi pada mobile
Apabila sudah ditambahkan, aplikasi dapat dibuka tanpa membuka browser
terlebih dahulu, tinggal hanya membuka aplikasi melalui shortcut yang tersedia
pada mobile.
3.6. Tugas
3.6.1. About Us

Gambar 3.32 Tampilan pada About Us pada desktop

Gambar 3.33 Tampilan pada About Us pada mobile

 Pada halaman About Us, berisikan foto dan biodata praktikan Kelompok 46
yaitu Majid dan Arief. Membuat card untuk konten yang akan di masukan dalam
halaman about dengan menggunakan perintah <div class="row"><div
class="col s4 "><div class="card"><div class="card-
image"style="height: 19pc;">. Untuk menambahkan foto, pada about.html
menggunakan perintah <img src="img/majid.jpg">. .lalu untuk mengisi
informasi pribadi pada card content menggunakan perintah</div><div
class="card-content" >. Perintah ini untuk membuat card yang akan diisi
.</div><div class="card-panel red darken-1">Memberi warna pada card
content. <p class="center-align">Saya Kurnia Luqman Majid</p><p
class="center-align">Mahasiswa S1 di Teknik Komputer UNDIP</p><p
class="center-align">NIM : 21120117140025</p> Syntax ini untuk mengisi
tulisan di dalam card content.

const CACHE_NAME = 'firstpwa-v1';

var urlsToCache = [
'/',
'/nav.html',
'/index.html',
'/pages/home.html',
'/pages/about.html',
'/pages/contact.html',
'/css/materialize.min.css',
'/js/materialize.min.js',
'/js/script.js',
'/img/parallax.png',
'/img/arief.jpg',
'/img/majid.jpg',
'/img/bg-nav.jpg',
'/img/icon/favicon.ico',
'/manifest.json',
'/img/icon.png'
];

self.addEventListener('install', function(event){
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
 event.respondWith(
caches.match(event.request, {cacheName:CACHE_NAME})
.then(function(response) {
if(response){
console.log("ServiceWorker: Gunakan aset dari
cache: ", response.url);
return response;
}
console.log("ServiceWorker: Memuat aset dari
server: ", event.request.url);
return fetch(event.request);
})
);
});

self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName != CACHE_NAME) {
console.log("ServiceWorker: cache " + cacheName
+ " dihapus");
return caches.delete(cacheName);
}
})
);
})
);
});

Pada kode dari service worker di atas, terdapat urlsToCache yang isinya
merupakan file-file yang akan dicache sehingga dapat diakses apabila tidak ada
koneksi internet seperti gambar di bawah. Pada halaman ini, karena berisikan foto,
ditambahkan /img/arief.jpg dan /img/majid.jpg untuk di-cache.

Gambar 3.34 Membuka halaman secara offline

Gambar 3.35 Mengambil aset dari cache

 Terlihat bahwa pada gambar di atas service workernya bekerja yaitu dengan
tidak mengakses aset dari server, tetapi menggunakan aset dari cache, sehingga
halaman dapat dibuka meskipun tidak terhubung dengan internet.
Kemudian untuk bagian self.addEventListener('install',

function(event) berfungsi untuk membuat menyimpan cache dari file yang

disebutkan [ada bagian urlsToCache.
Kemudian pada bagian self.addEventListener('fetch',

function(event) yaitu untuk mengambil dari cache yang disimpan pada

penyimpanan.
Kemudian untuk bagian self.addEventListener("activate",

function(event) yaitu untuk membuat mekanisme penghapusan cache yang

lama agar tidak membebani pengguna. Karena jika tidak begitu, maka semakin
sering memuat halaman, maka cache akan menumpuk dan memenuhi
penyimpanan.

3.6.2. Contact Us

Gambar 3.36 Tampilan pada Contact Us pada desktop

 Gambar 3.37 Tampilan pada Contact Us pada mobile
Pada halaman Contact Us. Kelompok 46 menggunakan 1 card content
dengan menggunakan perintah .<div class="row">Untuk membuat container
card.<div class="col s12 m6">mengatur ukuran card.<div class="card red
darken-1">mengubah warna card.<div class="card-content white-text">
memberi warna untuk text yang akan di masukan. Lalu mengisi konten dengan teks
yang mengarahkan kepada pengujung web untuk menghubungi kami. <span
class="card-title">Silahkan Kunjungi Kami</span> Membuat judul
dengan tulisan Silahkan kunjungi kami <p>Alamat: JL.Pustaka II B : 53</p>
Membuat text alamat : Jl.Pustaka II B : 53 <p>Instagram : @Kurniamajid_</p>
Membuat text instagram : @kurniamajid_.

Gambar 3. 38 Ikon pada navbar mobile

Gambar 3.39 Ikon pada navbar desktop

Menambahkan icon navbar pada tampilan aplikasi desktop dan mobile,
menggunakan perintah <li><a id="logo-container" class="brand-logo
center pulse"><img src="img/icon/icon.png" class="circle"
style="height: 23px;" href="#home"></a></li> .
 Gambar 3.40 Ikon perintah instal

Gambar 3.41 Ikon aplikasi mobile

Setelah itu, menambahkan berbagai ukuran ikon pada manifest.js, agar ikon
dapat ditampilkan pada saat akan diinstal, maupun setelah diinstal pada desktop dan
mobile.
 Gambar 3.42 Splash screen pada tampilan mobile
Tampilan pada awal aplikasi mobile, terdapat Splash screen yang
ditambahkan pada manifest.json, untuk memberi background dengan warna ungu
menggunakan perintah "background_color": "#6915cf", lalu menambahkan
nama aplikasi dengan perintah "name": "PWA KELOMPOK46",.

const CACHE_NAME = 'firstpwa-v1';

var urlsToCache = [
'/',
'/nav.html',
'/index.html',
'/pages/home.html',
'/pages/about.html',
'/pages/contact.html',
'/css/materialize.min.css',
'/js/materialize.min.js',
'/js/script.js',
'/img/parallax.png',
'/img/arief.jpg',
'/img/majid.jpg',
'/img/bg-nav.jpg',
'/img/icon/favicon.ico',
'/manifest.json',
'/img/icon.png'
];

self.addEventListener('install', function(event){
event.waitUntil(
 caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {cacheName:CACHE_NAME})
.then(function(response) {
if(response){
console.log("ServiceWorker: Gunakan aset dari
cache: ", response.url);
return response;
}
console.log("ServiceWorker: Memuat aset dari
server: ", event.request.url);
return fetch(event.request);
})
);
});

self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName != CACHE_NAME) {
console.log("ServiceWorker: cache " + cacheName
+ " dihapus");
return caches.delete(cacheName);
}
})
);
})
);
});

Pada kode dari service worker di atas, terdapat urlsToCache yang isinya
merupakan file-file yang akan dicache sehingga dapat diakses apabila tidak ada
koneksi internet seperti gambar di bawah.

Gambar 3.43 Membuka halaman secara offline

 Gambar 3.44 Mengambil aset dari cache
Terlihat bahwa pada gambar di atas service workernya bekerja yaitu dengan
tidak mengakses aset dari server, tetapi menggunakan aset dari cache, sehingga
halaman dapat dibuka meskipun tidak terhubung dengan internet.
Kemudian untuk bagian self.addEventListener('install',

function(event) berfungsi untuk membuat menyimpan cache dari file yang

disebutkan [ada bagian urlsToCache.
Kemudian pada bagian self.addEventListener('fetch',

function(event) yaitu untuk mengambil dari cache yang disimpan pada

penyimpanan.
Kemudian untuk bagian self.addEventListener("activate",

function(event) yaitu untuk membuat mekanisme penghapusan cache yang

lama agar tidak membebani pengguna. Karena jika tidak begitu, maka semakin
sering memuat halaman, maka cache akan menumpuk dan memenuhi
penyimpanan.
3.7. Kesimpulan
1. Untuk membuat halaman dapat diakses tanpa koneksi internet, harus
menyimpan aset-aset file ke cache yang akan dimasukkan pada file service-
worker.js yang di mana aset-aset tersebut akan terdaftar di Cache Storage
pada aplikasi.
2. Pada manifest.json, terdapat detail seperti nama, deskripsi, warna, dan lain-
lain ketika dinstal pada mobile.
3. Ketika aplikasi dipasang pada desktop dan mobile, pada desktop tidak
terdapat splash creen, sedangkan pada mobile terdapat splash creen ketika
membuka aplikasi.
4. Agar aplikasi dapat dibuka dari mobile, harus ada pada jaringan yang sama
dengan membuka alamat yang tertera pada aplikasi Web Server for Chrome.
5. Ketika membuka aplikasi dalam keadaan offline, maka yang diakses adalah
file cache yang sebelumnya sudah disimpan, sehingga tidak akan
menampilkan pesan error karena tidak terhubung ke internet.
6. Pada tugas untuk about us, karena menambahkan foto baru pada halaman,
maka ditambahkan pula kode untuk mendefinisikan file foto dan juga
halaman about us tersebut tersebut pada service worker agar nantinya dapat
disimpan pada cache sehingga dapat diakses secara offline.
7. Pada tugas contact us, hanya perlu menambahkan file halaman contact us
pada service worker agar disimpan pada cache sehingga dapat diakses secara
offline.