Membuat PWA Sederhana – Halo sahabat Iltekkomputer, pada kesempatan kali ini saya ingin membuat tutorial bagaimana cara membuat Progressive Web Apps (PWA) sederhana. Sebelum lanjut, kalian harus tau dulu apa itu PWA.
Apa itu PWA?
Progressive Web Apps (PWA) adalah jenis perangkat lunak aplikasi yang dikirim melalui web, dibuat menggunakan teknologi web umum termasuk HTML, CSS, dan JavaScript. Ini dimaksudkan untuk bekerja pada platform apa pun yang menggunakan browser yang sesuai standar, termasuk desktop dan mobile.
Cara Membuat Progressive Web Apps
Sebetulnya untuk membuat PWA tidak terlalu susah untuk di lakukan, kita hanya perlu memenuhi semua ketentuan website yang baik lalu mengikuti tutorial cara membuat progressive web apps sederhana.
Persiapan
Pastikan anda sudah mempersiapkan beberapa persiapan yang akan kita butuhkan untuk membuat sebuah PWA, beirkut ini 3 persiapan untuk membuat PWA:
- Browser Chrome
- Visual Studio Code
- Live Server (bisa menggunakan plugin VSCode atau extensi Google Chrome)
Memulai Membuat PWA Sederhana
Sekarang kita akan mencoba untuk membuat sebuah PWA sederhana, namun pastikan bahwa struktur file anda telah di buat dengan benar. Karena jika salah sedikit saja, aplikasi PWA kita tidak akan berjalan dengan baik. Untuk struktur file, anda bisa mengikuti contoh punya saya seperti di bawah ini:
Silahkan anda ikuti struktur file PWA diatas, di dalam folder PWA yang sudah kita buat di atas terdapat folder assets. Di dalam folder assets juga terdapat 3 subfolder lagi yaitu css, images, dan js.
Pada folder images silahkan anda buat logo yang ingin anda jadikan sebagai icon dari aplikasi PWA kita. Pada contoh disini icon diatas memiliki resolusi 256×256 pixel. Anda bebas menggunakan logo apapun untuk di jadikan icon tetapi anda harus mengetahui resolusi dari icon tersebut. Karena resolusi icon ini akan kita input ke dalam settingan manifest.json nantinya.
Mulai Membuat Kode
Sekarang, kita akan mulai untuk menulis kode atau koding dari masing-masing file diatas. Pertama, silahkan anda buka file index.html dan ketikkan kode di bawah ke text editor anda.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PWA Sederhana</title>
<meta name="theme-color" content="#007aff"/>
<link rel="manifest" href="assets/js/manifest.json">
<link rel="apple-touch-icon" href="assets/images/favicon.png">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div>
<h1>Selamat Datang</h1>
<p>Lorem ipsum dolor sit amet...</p>
<a href="/about.html">About</a>
</div>
<script src="assets/js/register.js"></script>
</body>
</html>
Setelah itu buka file about.htmldan ketikkan kode dibawah ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PWA Sederhana</title>
<meta name="theme-color" content="#007aff"/>
<link rel="manifest" href="assets/js/manifest.json">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet...</p>
<a href="/index.html">Kembali</a>
</div>
<script src="assets/js/register.js"></script>
</body>
</html>
Untuk sedikit memberikan tampilan untuk website kita menarik dilihat, kita memerlukan sedikit sentuhan dari CSS. Silahkan buka style.css pada folder css kemudian ketikkan kode di bawah ini:
body {
text-align: center;
padding-right: 10%;
padding-left: 10%;
background-color: rgb(236, 236, 236);
font-family: Montserrat;
}
div {
background-color: #fff;
padding: 20px 100px;
box-shadow: 0 1px 19px 0 rgba(0,0,0,0.2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
margin: 0 auto;
}
h1 {
font-size: 3em;
}
p {
font-size: 18px;
}
a {
margin-left: 15px;
color: #007aff;
text-decoration: none;
}
p {
text-align: justify;
font-weight: 300;
}
Jika semuanya sudah selesai, silahkan anda install plugin Live Server pada visual studio code anda. Caranya dengan klik kanan kemudian pilih Open with Live Server.
Dengan begitu, browser chrome akan otomatis membuka jendela baru yang akan mengarahkan anda ke url http://127.0.0.1:5500/index.html.
Berikut ini adalah website yang sudah kita buat dengan kodingan di atas.
Pada website diatas merupakan contoh simpel saja, jika anda ingin mengubah desain, itu bebas. Anda bisa mengubah desain sesuai dengan keinginan anda.
Nah, sekarang kita akan lanjut ke pembuatan PWA nya. Buka file manifest.json yang berada pada folder js, kemudian ketikkan kode berikut ini:
{
"name": "PWA Sederhana",
"short_name": "PWA",
"description": "Membuat PWA Sederhana",
"icons": [
{
"src": "../images/favicon.png",
"sizes": "256x256",
"type": "image/png"
}
],
"start_url": "/",
"display": "fullscreen",
"theme_color": "#007aff",
"background_color": "#007aff"
}
Pada file inilah kita akan mensetting atau konfigurasi PWA kita, makanya sebelumnya saya sudah menyebutkan bahwa anda harus mengetahui detail dari file anda seperti salah satunya resolusi dari icon.
Selanjutnya, anda buka register.js kemudian ketikkan kode berikut:
document.addEventListener('DOMContentLoaded', init, false);
function init() {
if ('serviceWorker' in navigator && navigator.onLine) {
navigator.serviceWorker.register('/service-worker.js')
.then((reg) => {
console.log('Registrasi service worker Berhasil', reg);
}, (err) => {
console.error('Registrasi service worker Gagal', err);
});
}
}
Kode diatas akan langsung dijalankan ketika website diakses, setelah itu akan mendaftarkan service worker yang berada di dalam folder root (PWA).
Service Worker adalah script yang dijalankan browser di latar belakang, terpisah dari halaman web, yang membuka pintu ke berbagai fitur yang tidak memerlukan halaman web atau interaksi pengguna.
Sekarang, buka file service-worker.js kemudian ketikkan kode di bawah:
const CACHE_NAME = 'CACHE-01';
const toCache = [
'/',
'assets/js/manifest.json',
'assets/js/register.js',
'assets/images/favicon.png',
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(toCache)
})
.then(self.skipWaiting())
)
})
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request)
.catch(() => {
return caches.open(CACHE_NAME)
.then((cache) => {
return cache.match(event.request)
})
})
)
})
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys()
.then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('Hapus cache lama', key)
return caches.delete(key)
}
}))
})
.then(() => self.clients.claim())
)
})
Pada kode diatas anda akan melihat nama CACHE-01 yang merupakan nama dari cache yang kita buat. Jadi cara kerjanya, service worker akan men-cache semua file yang telah anda input/tentukan dalam variabel toCache. Sehingga website bisa di panggil atau diakses diluar browser.
Hal terpenting yang perlu anda ketahui dan ingat adalah, ketika ingin merubah file yang ada pada cache diatas, anda juga harus merubah nama dari cache tersebut supaya browser tidak membaca cache yang lama.
Mencoba PWA
PWA sudah berhasil kita buat, sekarang kita akan mengetes PWA nya menggunakan Live Server dengan cara yang sama seperti diatas. Setelah terbuka, pada address bar paling kanan anda akan melihat icon install seperti gambar dibawah ini:
Jika anda melihat icon Install atau plus (+) pada kanan address bar seperti yang saya bilang diatas, berarti PWA berhasil di pasang pada website. Jika tombol install di klik, secara otomatis aplikasi akan langsung berada di desktop kita.
Jika aplikasi dibuka, maka tampilannya akan menjadi seperti ini:
Sampai sini anda sudah berhasil membuat PWA sederhana dan juga cara kerja PWA.