Pertemuan 12 – PWA dan Library JS Modern

← Kembali ke Beranda

Tujuan Pembelajaran

Mahasiswa diharapkan mampu mengimplementasikan Progressive Web App (PWA) untuk aplikasi web offline-capable, serta menggunakan library JavaScript modern seperti jQuery dan React untuk pengembangan UI yang efisien.

Progressive Web App (PWA)

PWA adalah web app yang berperilaku seperti native app: installable, offline support, push notification. Komponen utama: Service Worker (cache resource), Web App Manifest (ikon, nama), HTTPS. PWA buat web lebih engaging, seperti Twitter Lite.

Keuntungan: Load cepat, work offline, discoverable via search. Implementasi: Register service worker, buat manifest.json.

Library JS Modern: jQuery dan React

  • jQuery: Library simplifikasi DOM manipulation, AJAX, event handling. Contoh: $('button').click(function() { ... }). Mudah untuk beginner, tapi kurang modern.
  • React: Library untuk UI komponen-based. Buat komponen reusable, state management. Contoh: function App() { return <div>Hello</div>; }. Lebih powerful untuk app kompleks.

Pilih jQuery untuk quick fix, React untuk scalable app.

Contoh Kode

// PWA: Service Worker (sw.js)
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll(['/', '/index.html', '/style.css']);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

// Register di main JS: navigator.serviceWorker.register('sw.js');

// jQuery
$(document).ready(function() {
    $('#btn').click(function() {
        $('#content').html('Hello jQuery!');
    });
});

// React (dasar, butuh setup)
import React from 'react';
function Greeting() {
    return <h1>Hello React</h1>;
}

Penjelasan: Service worker cache resource untuk offline. jQuery manipulasi DOM simpel. React buat komponen. Untuk React, install via npm.

Tips Praktis

  • PWA test di Lighthouse (dev tools) untuk score.
  • jQuery include via CDN: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>.
  • React butuh build tool seperti Create React App untuk setup mudah.
  • Untuk PWA, pastikan manifest.json: {"name": "App", "start_url": "/", "display": "standalone"}.

Ringkasan Materi

PWA buat web seperti app, library JS percepat development. Ini tingkatkan UX dan produktivitas.

Latihan dan Diskusi

1. Buat PWA sederhana: tambah service worker dan manifest, test offline. 2. Implementasi jQuery untuk toggle div. 3. Setup React app kecil, buat komponen button. 4. Diskusikan: Kapan pakai PWA vs native app? Jika stuck, cek dokumentasi resmi.