🔬 Praktikum 14: Build PWA & Deploy ke Web

Tujuan Praktikum

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

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

Step 2: Konfigurasi app.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

npx expo start --web

Buka http://localhost:8081 di browser.

C. Build Production Web/PWA

# Build untuk production
npx expo export --platform web

Hasil build ada di folder dist/.

D. Deploy ke Vercel (Gratis)

Step 1: Install Vercel CLI

npm install -g vercel

Step 2: Deploy

# 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

| Aspek | PWA Web | Android APK | iOS App |

|-------|---------|-------------|---------|

| Biaya | Gratis | $25 Play Store | $99/tahun |

| Install | Browser | APK / Store | TestFlight / Store |

| Update | Auto (redeploy) | Upload ulang | Upload ulang |

| Offline | Ya (service worker) | Ya | Ya |

G. Tugas Praktikum 14

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