Progressive Web App (PWA): A Website That Works Like a Mobile App

The digital business dilemma: "Do I need a mobile app, or is a website enough?" The answer: PWA (Progressive Web App) combines the best of both worlds.

A PWA is a website that feels and works like a mobile app — it can work offline, has a home screen icon, and supports push notifications — but without needing to be downloaded from an app store. In 2026, PWAs are becoming an increasingly popular choice for businesses that want wide reach at an efficient cost.

What Is a PWA?

A PWA is a web application built with modern technology (Service Workers, Web APIs) that delivers an experience similar to a native mobile app.

Characteristics of a PWA:

• Responsive: Works well on all screen sizes.
• Offline capability: Can function without internet (cached data).
• Installable: Can be installed on the home screen like an app.
• Push notifications: Can send notifications to users.
• Fast: Quick loading, smooth interactions.

Differences: PWA vs. Native App vs. Website

Aspect	Website	PWA	Native App
Download	Not needed	Not needed (optional)	Must be from a store
Size	0 (streaming)	100-500 KB	10-100 MB
Offline	No	Yes (cache)	Yes
Notifications	No	Yes	Yes
Hardware access	Limited	Some (camera, GPS)	Full access
Distribution	URL / QR	URL / QR / app store	App store only
Updates	Automatic	Automatic	Manual by user
Development	React, Vue, etc	React, Vue, etc	Swift/Kotlin
Cost	Cheap	Cheap	Expensive

Conclusion: A PWA is the sweet spot for most businesses — a combination of cost effectiveness, reach, and functionality.

Benefits of PWAs for Business

1. Wider reach

• A website can be accessed by anyone through a browser.
• No need to download from an app store.
• Links can be shared via WhatsApp, social media, email.

Example: a flash sale promo → share the link on social media → users can access it instantly without needing to install an app first.

2. Much lower cost

• One codebase for all platforms (iOS, Android, web).
• No need to maintain 2-3 teams (iOS dev, Android dev, backend).
• Automatic updates — no waiting for app store approval.

PWA cost: Rp 5-15M (similar to a good website). Native mobile app cost: Rp 15-50M+ (iOS and Android built separately).

3. Superior user experience

• Instant loading: Cached assets load instantly, even offline.
• No app store friction: Users can access it directly without opening an app store.
• Home screen icon: Can be pinned to the home screen, launching instantly like a native app.
• Full screen: Can launch fullscreen without browser chrome.

4. Offline functionality

A PWA with Service Workers can:

• Load pages that were previously opened while offline.
• Accept form input offline, syncing once back online.
• Work well for poor connections or remote areas.

Example: an offline ordering app — customers can browse and add to cart, auto-syncing once a connection is available.

5. Home screen installability

Users can install a PWA to their home screen with a single tap — no need to open an app store. Faster installs, higher discoverability.

6. Push notifications

A powerful engagement tool — you can notify users about orders, promos, or important updates. Conversion from push notifications tends to be higher than from email.

How PWAs Work: Core Technologies

1. Service Worker

A script that runs in the background of the browser, outside the main thread. Main functions:

• Caching: Save assets (HTML, CSS, JS, images) to local storage.
• Offline support: Serve cached content while offline.
• Background sync: Sync data when back online.
• Push notifications: Receive and display notifications.

Example of Service Worker registration:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered'))
    .catch(err => console.log('SW registration failed'))
}

2. Web Manifest

A JSON file that defines app metadata:

{
  "name": "My Online Store",
  "short_name": "MyStore",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0E8C86",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

3. HTTPS

Service Workers only run over HTTPS (or localhost for dev). This security requirement is a good thing.

4. Responsive design

Must work optimally on all screen sizes — mobile, tablet, desktop.

Technology & Frameworks for PWAs

From scratch

• Vanilla JS + Service Worker API: Full control, but complex.
• Workbox (Google): A library that simplifies Service Worker setup.

Modern frameworks

• React + PWA tools: Create React App has a PWA template.
• Vue + PWA: Nuxt.js has built-in PWA support.
• Next.js: Has the next-pwa plugin for PWA support.
• Svelte: Lightweight, well-suited for PWAs due to performance.

Ready-to-use platforms

• Firebase Hosting: Auto-serves PWAs, SSL, CDN included.
• Netlify / Vercel: PWA-friendly hosting with analytics.

PWA Build Checklist

• Install an HTTPS certificate
• Create a Web Manifest (manifest.json) with icons
• Register a Service Worker
• Implement a caching strategy (cache-first vs network-first)
• Test offline functionality
• Optimize for mobile (responsive, touch-friendly)
• Test installability in Chrome / Safari
• Set up push notifications (optional but recommended)
• Test on a slow 4G network (Chrome DevTools > Network)
• Audit with Lighthouse
• Set up analytics to track install rate

Benchmark: PWA vs. Native Mobile App

Case study: Global brand

• Before PWA: Native iOS app = 20 MB, iOS dev team = 2 people, updates every 2 weeks.
• After PWA: Single PWA = 500 KB, web team = 1 person, instant updates.
• Result: 3x faster user acquisition, retention on par with the native app.

Limitations of PWAs to Keep in Mind

1. Limited hardware access

A PWA can't access all the hardware a native app can (Bluetooth, advanced camera features on iOS).

2. App store presence is optional

Unless your PWA is also distributed via an app store (possible since 2023), visibility is more limited.

3. Slower iOS support

Apple adopts PWA features more slowly than Android. But support keeps improving.

4. Dependency on the browser

A PWA runs inside a browser — if the browser has a bug or a breaking update, you're affected. A native app is more isolated.

Conclusion: PWAs are excellent for most business cases, but for apps that need extensive hardware access (AR, Bluetooth), a native app is more suitable.

When to Choose a PWA vs. a Native App

Choose a PWA if:

• Budget is limited.
• You need wide, fast reach.
• The app is productivity/utility focused (not graphics-intensive gaming).
• You need offline capability.
• Frequent updates matter.

Choose a native app if:

• Budget is large and the timeline is flexible.
• You need extensive hardware access.
• The app is a game with complex graphics.
• You're targeting a specific market (iOS-only or Android-only).
• App store presence is crucial.

Hybrid approach: Many businesses start with a PWA first (fast launch, low cost), then develop a native app once it's proven and there's budget.

PWA Cost Breakdown

• Design & development: Rp 5-10M (similar to a good website)
• Icons & branding: Rp 1-2M
• Hosting: Rp 0-500K/month (Firebase / Netlify)
• Push notification service: Free-2M/month depending on volume
• Maintenance: Rp 2-5M/month

Total for the first year: Rp 15-30M + hosting. Much cheaper than a native app (Rp 40-100M).

Examples of Successful PWAs

• Twitter Lite: A lightweight PWA that loads even on 2G connections. Engagement increased.
• Spotify: A web player that works offline (cached songs).
• Pinterest: A PWA with home screen install. Traffic from PWA grew 250%.
• Telegram: A powerful PWA with real-time messaging and offline support.

Conclusion

A PWA is a future-proof choice for businesses that want a mobile app-like experience without prohibitive cost. The combination of reach, affordability, and functionality makes PWA a strategic choice for 2026.

AFSS can help you build your PWA — from design and development to push notifications and deployment. See our PWA and web app services or get a free consultation to discuss a PWA strategy for your business.