Latihan Amali

Latihan PWA

Lima latihan praktikal untuk menguasai PWA — dari audit mobile hingga install di phone. Klik setiap latihan untuk melihat langkah terperinci.

5
Latihan
7
Langkah PWA
60-90
Minit
Intermediate
Tahap
1
Audit Mobile-Friendliness Website Sedia Ada Mudah
10-15 minit Audit / Analisis Chrome DevTools + Lighthouse
▼

Objektif

Objektif: Audit mana-mana website (projek sendiri atau website awam) untuk menilai mobile-friendliness dan PWA readiness menggunakan Chrome DevTools dan Lighthouse.

Langkah-langkah

  1. Buka website pilihan awak di Chrome (guna website sendiri atau mana-mana website)
  2. Buka Chrome DevTools: F12 atau right-click → Inspect
  3. Toggle device toolbar: Ctrl+Shift+M (Windows/Linux) atau Cmd+Shift+M (Mac)
  4. Pilih device "iPhone 12 Pro" atau "Pixel 5" dari dropdown
  5. Semak:
    • Adakah content muat dalam skrin tanpa horizontal scroll?
    • Adakah font cukup besar (min 16px)?
    • Adakah button cukup besar untuk ditekan jari (min 44px)?
    • Adakah spacing antara elemen cukup?
    • Adakah tap targets (links, buttons) terlalu rapat?
  6. Buka tab Lighthouse: Lighthouse → pilih "Mobile" → check "Best Practices" dan "PWA"
  7. Klik "Analyze page load" — tunggu audit selesai
  8. Baca report — perhatikan skor PWA dan cadangan penambahbaikan
  9. Ambil screenshot hasil audit (skor + masalah yang dikenalpasti)

Soalan Refleksi

1. Apa skor PWA website tersebut? 2. Apa isu mobile-friendliness yang paling ketara? 3. Apa yang perlu diubah untuk jadikan ia PWA-ready? 4. Berapa banyak effort yang diperlukan untuk tambah manifest + service worker? 5. Adakah website tersebut sudah guna HTTPS?

Tips

Lighthouse PWA Score: Skor 0-100. Untuk PWA yang baik, target minimum adalah 80+. Tapi jangan risau kalau rendah — tu sebab kita belum tambah PWA manifest dan service worker. Itulah tujuan latihan ini!

Bukti Screenshot

Screenshot hasil audit Lighthouse

Ambil screenshot yang menunjukkan skor PWA dan checklist item yang lulus/gagal. Juga screenshot mobile view (device toolbar) yang menunjukkan website dipaparkan dalam skrin phone.

Checklist

2
Tambah PWA Manifest & Service Worker Mudah
15-20 minit AI Prompt Manifest + sw.js
▼

Objektif

Objektif: Tambah PWA manifest.json dan service worker ke projek web app sedia ada menggunakan AI prompt. Hasilkan kedua-dua fail menggunakan AI dan integrasikan ke dalam projek.

Prasyarat

  • Projek HTML/CSS/JS sedia ada (dashboard, landing page, portfolio — mana-mana projek dari fasa sebelumnya)
  • Akses ke AI assistant (Claude, GPT, Copilot, dll.)
  • VS Code / editor teks
  • Projek sudah di-deploy ke HTTPS hosting (untuk test service worker)

Langkah-langkah

  1. Buka projek web app awak di editor VS Code
  2. Buka index.html dan semak struktur asas
  3. Buka AI assistant dan prompt untuk manifest:
    Prompt: "Tambah PWA manifest.json untuk web app saya. Nama app: Nama Projek Anda Nama pendek: Nama Pendek Warna tema: #0b0d17 Warna latar: #ffffff Display: standalone Orientasi: any Sediakan placeholder ikon 192x192 dan 512x512."
  4. Copy output AI ke fail baru → simpan sebagai manifest.json dalam folder projek
  5. Dalam index.html, tambah dalam <head>:
    <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#0b0d17">
  6. Prompt AI untuk service worker:
    Prompt: "Tambah service worker untuk offline caching. Nama cache: projek-anda-v1 Cache semua fail static: index.html, style.css, script.js, manifest.json, ikon Guna strategi Cache First, Network Fallback Tambah install event untuk pre-cache Tambah activate event untuk cleanup cache lama Tambah fetch event untuk serve dari cache"
  7. Copy output AI ke fail baru → simpan sebagai sw.js dalam folder projek
  8. Dalam index.html, register service worker (sebelum </body>):
    <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js'); } </script>
  9. Buka projek di browser — Buka DevTools → Application tab
  10. Semak:
    • Manifest — semua info dipaparkan dengan betul
    • Service Workers — status "Activated and running"
    • Cache — cache storage mengandungi fail yang di-cache

Tips

Debug service worker: Di DevTools → Application → Service Workers, ada link "skipWaiting" dan "Unregister". Guna ni untuk debug. Secara default, service worker akan tunggu sehingga semua tab lama ditutup sebelum activate version baru. Guna "Update on reload" untuk memudahkan debugging.

Bukti Screenshot

Screenshot DevTools menunjukkan manifest dan service worker aktif

Ambil screenshot yang menunjukkan tab Application → Manifest (paparkan info app) dan tab Application → Service Workers (tunjukkan status "Activated").

Checklist

3
Test Offline — Turn Off WiFi, App Masih Berfungsi Sederhana
15-20 minit Offline Test DevTools + Phone
▼

Objektif

Objektif: Test keupayaan offline PWA. Pastikan service worker berfungsi dengan betul — app masih boleh diakses walaupun tiada sambungan internet. Uji di desktop dan di phone.

Prasyarat

  • PWA dari Latihan 2 (manifest + service worker sudah ditambah)
  • Projek sudah di-deploy ke hosting HTTPS
  • Phone dengan Chrome browser (untuk test di phone)

Langkah A: Test Offline di Desktop

  1. Buka PWA di Chrome (localhost atau HTTPS)
  2. Buka DevTools (F12) → tab Network
  3. Tengok checkbox "Offline" — tandakan (check)
  4. Refresh halaman
  5. Jika berjaya: Halaman masih muncul, walaupun tiada network
  6. Jika gagal: Halaman tunjuk "No Internet" atau error — semak service worker
  7. Buka tab Application → Cache → Cache Storage
  8. Semak sama ada fail yang diperlukan ada dalam cache
  9. Nyahkan tanda "Offline" — kembalikan network

Langkah B: Debug Jika Offline Gagal

Masalah: App tak jalan offline. Semak: 1. Buka DevTools → Console — ada error? 2. Buka Application → Service Workers — status "Activated"? 3. Buka Application → Cache Storage — fail ada dalam cache? 4. Cuba: Unregister service worker, refresh, register semula Prompt AI untuk debug: "Service worker saya tak cache dengan betul. Ini kod sw.js saya: [Paste kod sw.js] Apa yang salah dan bagaimana nak betulkan?"

Langkah C: Test Offline di Phone

  1. Buka PWA yang sudah di-deploy di Chrome pada phone
  2. Biar semua content loaded sepenuhnya
  3. Turn off WiFi / Data / Flight Mode
  4. Buka semula PWA dari home screen
  5. App sepatutnya masih berfungsi!
  6. Ambil screenshot sebagai bukti
  7. Hidupkan semula internet

Tips

Cache Versioning: Bila awak ubah fail HTML/CSS/JS, pastikan update version cache dalam sw.js. Contoh: tukar dari 'projek-v1' ke 'projek-v2'. Ini memastikan service worker cache version baru dan tak guna cache lama yang sudah outdated.

Bukti Screenshot

Screenshot PWA berfungsi dalam mod offline

Ambil screenshot yang menunjukkan: (1) DevTools dengan Network tab — checkbox "Offline" ditandakan, (2) Halaman PWA masih dipaparkan dengan sempurna. Screenshot kedua: PWA di phone dalam flight mode masih berfungsi.

Checklist

4
Tambah Push Notification Basic Sederhana
15-20 minit Notification API AI Prompt
▼

Objektif

Objektif: Tambah push notification menggunakan Notification API. Pelajar akan belajar cara minta permission, hantar notifikasi, dan handle notification click events.

Prasyarat

  • PWA dari Latihan 2 (manifest + service worker sudah ada)
  • HTTPS hosting (wajib untuk Notification API)

Langkah-langkah

  1. Buka AI assistant dan prompt untuk notification:
    Prompt: "Tambah feature push notification dalam web app saya. Guna Notification API JavaScript: 1. Apabila halaman dimuat, minta permission notification secara automatik 2. Tambah satu button 'Hantar Notifikasi Ujian' 3. Bila button diklik, hantar notification dengan: - Title: 'Hello dari [Nama App]!' - Body: 'Ini adalah push notification pertama. PWA saya dah power!' - Icon: guna ikon dari manifest.json (icon-192.png) 4. Bila notification diklik, buka halaman utama app 5. Handle error jika permission ditolak 6. Tunjukkan mesej status di halaman (contoh: 'Notification dihantar!') Buat kod yang ringkas dan mobile-friendly. Guna CSS yang konsisten dengan dark theme (bg: #0b0d17, cyan: #06d6f0)."
  2. Copy output AI dan integrate ke dalam index.html
  3. Buka PWA di browser
  4. Perhatikan: browser akan minta permission notification — klik "Allow"
  5. Klik button "Hantar Notifikasi Ujian"
  6. Notifikasi akan muncul — ambil screenshot!
  7. Klik notification — ia patut buka/memberi fokus ke halaman PWA

Tips Penting

Permission Request Timing: Jangan minta permission notification serta-merta bila halaman dimuat. Tunggu sehingga user melakukan interaksi (clicks button). Browser semakin ketat tentang "aggressive permission requests" dan mungkin auto-block.

Push dari Server vs Local Notification: Notification API asas hanya berfungsi semasa PWA dibuka. Untuk push notification sebenar (notifikasi sampai walaupun app tutup), kita perlukan "Push API" + VAPID keys + backend server. Itu beyond scope modul ini. Tapi untuk asas dan demo, Notification API sudah cukup impressive.

Bukti Screenshot

Screenshot notification yang berjaya dihantar

Ambil screenshot yang menunjukkan: (1) Notification muncul di skrin (corner kanan bawah/atas), (2) Button "Hantar Notifikasi" di halaman PWA, (3) Status mesej "Notification dihantar!" dipaparkan.

Checklist

5
Install PWA ke Phone & Test Sederhana
20-30 minit Deploy + Install Phone Test
▼

Objektif

Objektif: Deploy PWA ke Cloudflare Pages (atau platform HTTPS lain), install di phone, dan test semua feature termasuk offline. Ini adalah latihan paling memuaskan — bila pelajar nampak app sendiri di home screen phone!

Prasyarat

  • PWA lengkap dengan manifest.json dan sw.js (dari Latihan 2-4)
  • Akaun GitHub dan Cloudflare Pages
  • Phone dengan Chrome browser
  • Kabel USB (untuk remote debugging — optional)

Langkah 1: Deploy PWA

  1. Buka terminal di folder projek PWA
  2. Git init, add, commit, push:
    git init git add . git commit -m "PWA siap deploy" git remote add origin https://github.com/username/pwa-saya.git git push -u origin main
  3. Buka https://dash.cloudflare.com
  4. Workers & Pages → Create application → Pages → Connect to Git
  5. Pilih repository PWA awak
  6. Set: Build command = (kosong), Output directory = /
  7. Klik "Save and Deploy" — tunggu 10-30 saat
  8. Dapatkan URL: https://pwa-saya.pages.dev

Langkah 2: Install di Phone

  1. Buka Chrome di phone
  2. Taip URL PWA awak: https://pwa-saya.pages.dev
  3. Tunggu "Add to Home Screen" banner muncul (bawah skrin)
  4. Kalau tak muncul: ⋮ menu → Add to Home Screen
  5. Klik "Install" — confirm — icon akan muncul di home screen
  6. Buka PWA dari home screen — ia buka standalone (tiada address bar!)
  7. Ambil screenshot PWA di home screen + PWA sedang dibuka

Langkah 3: Test Offline di Phone

  1. Buka PWA — pastikan semua content loaded
  2. Turn off WiFi / Flight Mode
  3. Buka semula PWA dari home screen
  4. App masih berfungsi! (Ini bukti service worker berjaya)
  5. Ambil screenshot sebagai bukti
  6. Hidupkan semula internet

Langkah 4: Test Feature Lain

  1. Test push notification (jika ditambah)
  2. Test camera/geolocation (jika ditambah)
  3. Test semua navigasi dan functionality
  4. Kongsi URL PWA dengan rakan sekelas
  5. Minta mereka install dan bagi feedback

Langkah 5: Remote Debugging (Optional)

1. Sambung phone ke komputer guna USB 2. Buka Chrome di komputer → chrome://inspect 3. Phone akan muncul — klik "Inspect" 4. Boleh debug PWA di phone dari komputer! 5. Semak service worker, cache, console

Tips

Share URL PWA: Lepas deploy, kongsi URL dengan semua orang. Mereka boleh buka dan install PWA awak di phone mereka. Bayangkan — app yang awak bina boleh diguna oleh kawan-kawan, keluarga, atau bahkan client! Inilah magik PWA + AI.

Jika "Add to Home Screen" tak muncul: (1) Pastikan manifest.json sah — guna validator, (2) Pastikan ada icon saiz 192x192, (3) Pastikan service worker register dengan jayanya, (4) Pastikan HTTPS, (5) Chrome mungkin tak tunjuk prompt jika PWA sudah di-install (check home screen), (6) Tunggu beberapa saat — kadang-kadang Chrome lambat detect PWA.

Bukti Screenshot

Screenshot PWA di home screen phone + dalam keadaan offline

Ambil MINIMUM 3 screenshot: (1) Home screen phone yang menunjukkan icon PWA, (2) PWA dibuka dalam standalone mode (tiada address bar), (3) PWA berfungsi dalam flight mode (tiada internet) — bukti offline capability.

Checklist

Rumusan Latihan

Tahniah! Selepas menyelesaikan kelima-lima latihan ini, anda akan:

  • Mampu audit mobile-friendliness mana-mana website guna Lighthouse
  • Tahu tambah PWA manifest dan service worker guna AI prompt
  • Boleh test offline capability PWA di desktop dan phone
  • Tahu cara tambah push notification guna Notification API
  • Berjaya deploy dan install PWA di phone sendiri — pertama dari banyak app!

Langkah seterusnya: Bina PWA sebenar untuk portfolio, projek akhir, atau bisnes — dengan kuasa AI, tiada had kepada apa yang awak boleh bina!