Rujukan & Templat

Rujukan PWA

Prompt templates, kesilapan biasa, dan checklist mobile testing untuk membina Progressive Web App dengan AI.

8
Prompt Templates
10
Kesilapan Biasa
20+
Checklist Item
PWA
Fokus

Prompt Templates untuk PWA

Gunakan prompt-template di bawah untuk hasilkan kod PWA dengan AI. Copy-paste prompt ke AI assistant dan ubah bahagian dalam kurungan [...] mengikut keperluan projek anda.

1Buat Web App Mobile-Responsive
Gunakan prompt ini untuk hasilkan web app asas yang mobile-friendly dengan viewport, flexbox, dan reka bentuk responsive.
"Buat web app mobile-responsive dengan: 1. Viewport meta tag untuk kawalan skala 2. Guna flexbox/grid untuk layout yang auto-adjust 3. Font saiz sesuai untuk mobile (min 16px) 4. Button touch-friendly (min 44x44px) dengan gap yang selesa 5. Dark theme dengan warna latar #0b0d17 dan aksen cyan #06d6f0 6. Satu halaman dashboard ringkas dengan: - Header (nama app + logo) - Navigation bar (mobile-style, bottom) - Content area dengan 3 card info - Footer CSS moden, smooth animations, dan consistent spacing."
2Tambah PWA Manifest.json
Hasilkan manifest.json untuk PWA. Tentukan nama app, warna tema, dan saiz ikon.
"Tambah PWA manifest.json untuk web app saya. Nama app: [Nama App Anda] Nama pendek: [Nama Pendek] Warna tema: [#0b0d17] Warna latar: [#ffffff] Display: standalone Orientasi: any Start URL: / Sediakan placeholder ikon dalam saiz: - 192x192 (icon-192.png) - 512x512 (icon-512.png) Guna format PNG. Description: [Penerangan ringkas tentang app]"
3Tambah Service Worker untuk Cache Offline
Hasilkan service worker yang menguruskan caching dan membolehkan app berfungsi offline.
"Tambah service worker untuk offline caching. Nama cache: [nama-app]-v1 Senarai fail untuk pre-cache: - / - /index.html - /style.css - /script.js - /manifest.json - /icon-192.png - /icon-512.png Guna strategi 'Cache First, Network Fallback': 1. Install event: pre-cache semua fail dalam senarai 2. Activate event: cleanup cache lama (versioning) 3. Fetch event: serve dari cache dulu, kalau tak ada baru fetch dari network, dan simpan dalam cache Handle situasi offline — serve cached response walaupun network failed."
4Tambah Install Prompt — 'Add to Home Screen'
Tambah butang install tersuai untuk PWA, sebagai alternatif kepada prompt Chrome automatik.
"Tambah butang 'Install App' tersuai untuk PWA saya. Guna beforeinstallprompt event: 1. Dengar event 'beforeinstallprompt' 2. Simpan reference event dalam variable 3. Paparkan button 'Install App' (yang tersembunyi sebelum event) 4. Bila button diklik, trigger prompt dengan event.prompt() 5. Selepas user pilih (install/cancel), sembunyikan button 6. Handle case where app already installed (appinstalled event) 7. Guna CSS yang konsisten dengan dark theme Buat button yang menarik — gradient, icon + text, dan hover effect."
5Tambah Push Notification Basic
Tambah keupayaan menghantar notifikasi menggunakan Notification API, dengan button interaktif dan status mesej.
"Tambah push notification dalam PWA saya. Guna Notification API: 1. Button 'Hantar Notifikasi' di halaman 2. Minta permission notification (trigger bila button diklik) 3. Bila button diklik dan permission granted: - Hantar notification dengan title '[Nama App]' - Body: 'Terima kasih! Notifikasi PWA pertama anda.' - Icon: icon-192.png 4. Handle click event pada notification — buka app 5. Tunjukkan status di halaman: - 'Notification permission: granted/denied' - 'Notification dihantar!' 6. CSS dark theme konsisten Kod mesti ringkas dan mobile-friendly."
6Akses Kamera/Gallery dari Web App
Guna getUserMedia() untuk mengakses kamera phone dan ambil gambar terus dari PWA.
"Tambah feature kamera dalam PWA saya. Guna navigator.mediaDevices.getUserMedia(): 1. Button 'Buka Kamera' — minta akses kamera belakang 2. Paparkan live preview dalam elemen <video> 3. Button 'Tangkap Gambar' — ambil screenshot current frame 4. Guna <canvas> untuk capture gambar dari video 5. Paparkan gambar yang ditangkap di bawah preview 6. Button 'Tutup Kamera' — stop semua track media 7. Handle error jika camera tak available atau permission denied 8. CSS dark theme dan mobile-friendly Pastikan cleanup betul — stop media tracks bila tutup kamera."
7Bina Bottom Navigation Bar (Mobile-Style)
Bina navigation bar gaya mobile — bottom-aligned, dengan icon dan label, seperti app native.
"Bina bottom navigation bar mobile-style untuk PWA saya. Guna flexbox: 1. Bar di bahagian bawah skrin (fixed bottom) 2. 3-4 item navigasi: [Rumah, Carian, Notifikasi, Profil] 3. Setiap item ada icon (guna emoji atau SVG) dan label teks 4. Item aktif (current page) — highlight dengan warna cyan #06d6f0 5. Item tak aktif — warna teks #64748b 6. Bar mempunyai background #111827 dengan border atas halus 7. Ketinggian bar: 64px (mobile-friendly) 8. Bila item diklik, content berubah (guna JavaScript ringkas) 9. Smooth transition untuk content change 10. Responsive — bar auto-adjust untuk tablet/desktop Guna CSS moden dengan dark theme yang konsisten."
8Bina Swipeable Cards/Tabs
Bina kad atau tab yang boleh di-swipe menggunakan touch events — sesuai untuk antara muka mobile.
"Bina swipeable cards untuk PWA saya. Guna touch events: 1. Tiga card dengan content berbeza (Card 1: Info, Card 2: Statistik, Card 3: Tetapan) 2. Touch events: touchstart, touchmove, touchend 3. Geser kiri → card seterusnya 4. Geser kanan → card sebelumnya 5. Indicator dots di bawah card (bullet nav) 6. Animasi smooth — card slide in/out 7. Auto-resize untuk content yang berbeza 8. Juga responsive untuk mouse — klik dot untuk navigate Setiap card ada: - Icon (emoji) - Title - Short description - Warna accent berbeza CSS moden, dark theme, touch-friendly."

10 Kesilapan Biasa PWA

1. Manifest.json Tak Sah (Invalid JSON)

Koma tertinggal, petil tak tertutup, atau struktur JSON salah. Browser akan ignore manifest yang invalid.

Guna validator JSON (jsonlint.com) atau minta AI semak balik manifest. Dalam DevTools → Application → Manifest, kalau error, ia akan tunjuk.

Prompt: "Check JSON ni untuk syntax error: [paste manifest]"

2. Ikon PWA Tak Cukup Besar

Chrome memerlukan ikon sekurang-kurangnya 192x192 untuk PWA. Kalau ikon kecil atau format salah, PWA tak akan berfungsi.

Pastikan ada ikon 192x192 dan 512x512 dalam manifest. Guna PNG format. AI boleh generate placeholder SVG/PNG, atau guna tool macam pwa-asset-generator, favicon.io, atau canva.com.

Prompt: "Buat SVG icon untuk PWA dalam saiz 192px dengan tema cyan"

3. Service Worker Tak Register (HTTPS Error)

Service worker hanya register di HTTPS atau localhost. Kalau guna HTTP biasa, register akan fail dengan SecurityError.

Deploy ke hosting HTTPS — Cloudflare Pages, Netlify, Vercel semua bagi HTTPS percuma. Jangan deploy ke hosting HTTP biasa. Untuk development, localhost juga OK.

Semak: Buka Console di DevTools — ada error "Service Worker registration failed: The document is in an invalid state"?

4. Path Service Worker Salah

Service worker path adalah relatif. Kalau sw.js diletak dalam subfolder, scope service worker terhad ke folder itu sahaja.

Letak sw.js dalam root folder (sama level dengan index.html). Atau guna parameter scope: navigator.serviceWorker.register('/folder/sw.js', { scope: '/folder/' }).

Best practice: sw.js sentiasa di root.

5. Cache Tak Update Lepas Ubah Kod

Service worker cache fail static. Lepas ubah HTML/CSS/JS, pelayar masih serve version lama dari cache. Pelajar fikir kod tak berubah.

Update version cache: tukar 'app-v1' ke 'app-v2' dalam sw.js. Atau guna "Update on reload" di DevTools → Application → Service Workers. Hard refresh (Ctrl+Shift+R/Cmd+Shift+R) juga boleh membantu.

Prompt: "Macam mana nak update cache service worker lepas ubah fail?"

6. PWA Buka dalam Browser, Bukan Standalone

Display mode dalam manifest adalah "browser" bukan "standalone". Jadi PWA buka dalam tab biasa dengan address bar.

Dalam manifest.json, pastikan "display": "standalone" atau "fullscreen". Jangan "browser". Untuk test, buka dari home screen — standalone hanya berfungsi bila buka dari icon PWA yang di-install, bukan dari URL biasa.

7. "Add to Home Screen" Prompt Tak Muncul

Browser tak tunjuk prompt install. Ini boleh jadi karena manifest incomplete, tiada service worker, atau PWA dah di-install.

Checklist: (1) Manifest sah dengan ikon >=192px, (2) Service worker registered dan activated, (3) HTTPS, (4) Guna Chrome (Safari limited support). Cuba buka di incognito window atau clear site data. Guna beforeinstallprompt event untuk trigger manual.

Prompt: "Kenapa Add to Home Screen prompt tak muncul dalam PWA saya?"

8. Offline Tak Berfungsi Sepenuhnya

Service worker cache beberapa fail tapi tak semua. Contoh: CSS atau gambar tak di-cache, jadi separuh halaman rosak offline.

Pastikan semua fail yang diperlukan di-cache. Guna strategi yang sesuai — untuk static files, guna "Cache First". Untuk dynamic content (API), guna "Network First" atau "Stale While Revalidate". Test offline di DevTools: Network tab → check "Offline".

Prompt: "Service worker saya tak cache gambar. Ini kod: [paste]. Macam mana nak betulkan?"

9. Push Notification Tak Sampai (Server Required)

Notification API asas hanya berfungsi semasa app dibuka. Push notification sebenar dari server perlukan setup VAPID keys dan backend.

Untuk beginner, fokus pada Notification API dulu (local notification). Push dari server adalah topik advanced — perlukan backend (Node.js, Python) dan push service. Gunakan Firebase Cloud Messaging (FCM) atau Web Push Protocol bila dah bersedia.

Prompt: "Beza antara Notification API dengan Push API dalam PWA?"

10. Alpha/Beta Test — Lupa Test di Phone Sebenar

PWA nampak sempurna di Chrome DevTools (mobile emulation), tapi bila buka di phone sebenar, ada isu: font kecik, button tersentuh, layout pecah.

Sentiasa test di phone sebenar. DevTools mobile emulation adalah approximation — bukan real device. Guna remote debugging (chrome://inspect) untuk debug langsung dari komputer ke phone. Minta rakan pinjam phone mereka untuk cross-browser testing.

Tip: Test minimum 3 device berbeza (iPhone, Android kecil, Android besar).

Mobile Testing Checklist

Gunakan checklist di bawah untuk memastikan PWA anda benar-benar bersedia untuk digunakan di phone. Tandakan setiap item yang telah diuji.

Cara guna: Buka PWA di phone dan desktop. Test setiap item. Tandakan yang lulus. Jika ada yang gagal, gunakan AI prompt untuk bantu troubleshoot.

Asas PWA

Responsive & Mobile-First

Offline Capability

Install & Home Screen

Performance

Native Features

Cross-Platform

Nota iOS Safari: Safari pada iOS menyokong PWA tetapi dengan limitasi. Service worker dan manifest disokong sejak iOS 16.4+. Walau bagaimanapun, push notification masih belum disokong sepenuhnya di iOS. Test di Chrome Android untuk pengalaman PWA yang paling lengkap.