Build PWA & Deploy ke Web

Tujuan Pembelajaran

• Mengkonfigurasi Expo untuk PWA (Progressive Web App)
• Build dan deploy aplikasi sebagai PWA
• Install PWA di HP seperti aplikasi native

A. Apa itu PWA?

PWA = aplikasi web yang bisa:

• Di-install di home screen (tanpa app store)
• Bekerja offline
• Tampil seperti native app

B. Setup Expo untuk Web

Step 1: Install Web Dependencies

bash
npx expo install react-dom react-native-web @expo/metro-runtime

Step 2: Konfigurasi app.json

json
{
  "expo": {
    "name": "Praktikum Mobile",
    "slug": "praktikum-mobile",
    "version": "1.0.0",
    "web": {
      "bundler": "metro",
      "output": "single",
      "favicon": "./assets/favicon.png"
    },
    "platforms": ["ios", "android", "web"]
  }
}

Step 3: Jalankan di Web Browser

bash
npx expo start --web

Buka http://localhost:8081 di browser.

C. Build Production Web/PWA

bash
# Build untuk production
npx expo export --platform web

Hasil build ada di folder dist/.

D. Deploy ke Vercel (Gratis)

Step 1: Install Vercel CLI

bash
npm install -g vercel

Step 2: Deploy

bash
# Build dulu
npx expo export --platform web

# Deploy folder dist ke Vercel
cd dist
vercel --prod

Step 3: Akses PWA

1. Buka URL Vercel di Chrome HP
2. Klik menu (3 titik) di Chrome
3. Pilih "Add to Home Screen"
4. App icon muncul di home screen seperti native!

E. Testing PWA

Di Desktop:

• Buka di Chrome → klik icon install di address bar

Di Mobile:

• Buka di Chrome → Menu → "Add to Home Screen"
• Buka di Safari iOS → Share → "Add to Home Screen"

F. Perbandingan Platform

G. Latihan Mandiri

1. Konversi project sebelumnya menjadi PWA
2. Deploy ke Vercel (gratis)
3. Screenshot PWA di: browser desktop, browser mobile, setelah di-install
4. Kumpulkan URL live PWA