Building PWAs for Thai Mobile Users

What Is a Progressive Web App?

A Progressive Web App (PWA) is a website that behaves like a native app. It can be installed on a user's home screen, work offline or on slow connections, send push notifications, and load instantly on repeat visits — without going through an app store.

For Thai businesses, PWAs offer a compelling alternative to native apps: no app store approval process, no separate iOS and Android codebases, and no asking users to download a 50MB app before they even know if they like your product. Users can install your PWA in two taps directly from the browser.

Why Do PWAs Make Sense in Thailand?

Thailand's smartphone market is Android-dominant and device storage is a real concern for users with lower-tier phones. Many Thai users are reluctant to install apps from businesses they have not yet established trust with — the friction of the app store install process loses customers.

A PWA lets a first-time visitor experience your app immediately via the browser, then install it to their home screen once they are engaged. This dramatically lowers the barrier to "installation" compared to a native app.

How Do You Build a PWA with Next.js?

The two essential PWA components are a Web App Manifest and a Service Worker.

Web App Manifest (public/manifest.json) defines how your app appears when installed:

{
  "name": "Your App Name",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0055ff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Reference it in your layout.tsx metadata:

export const metadata: Metadata = {
  manifest: "/manifest.json",
  themeColor: "#0055ff",
};

Service Worker enables offline functionality and caching. Use the next-pwa package to generate a service worker from your Next.js configuration without writing service worker code manually:

npm install next-pwa

Configure it in next.config.ts:

import withPWA from "next-pwa";
export default withPWA({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
})(nextConfig);

How Does Offline Support Work?

The service worker caches your app's assets on first load. When the user subsequently opens the app without an internet connection, the service worker serves the cached assets. For pages that require live data, show a cached version with an "offline" indicator rather than an error.

For Thai users in areas with poor connectivity — provincial areas, the BTS underground, or congested 4G zones — this makes your app functional in situations where a regular website would show a browser error screen.

How Do You Implement an Install Prompt?

Browsers fire a beforeinstallprompt event when the PWA install criteria are met. Capture it and show your own custom install button rather than relying on the browser's default prompt:

window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault();
  setInstallEvent(e);
  setShowInstallBanner(true);
});

Show the install prompt at a meaningful moment — after the user has completed an action that demonstrates value, not immediately on first load.

Ready to Build Something Fast?

Get a free quote on LINE. We reply within 24 hours.