Progressive Web App (PWA): How to Turn a Website into an App

What is a PWA?

Progressive Web App = a website that behaves like an app: - Installable (to the phone's home screen) - Works offline - Push notifications - Access to camera and GPS - Native app feel

Well-known PWAs: Twitter, Pinterest, Starbucks, Spotify.

Advantages vs Native App

PWA - Single codebase (web + iOS + Android) - Installation without an App Store - Fast development (50% cheaper) - SEO benefits (searchable on Google) - No 30% Apple/Google tax

Native - Better performance - Deeper operating system integration - Discoverable in App Stores - Apple/Google brand association

PWA Components

1. Service Worker JS running in the background – providing offline capabilities and caching.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => 
      cache.addAll(['/index.html', '/styles.css'])
    )
  );
});

2. Web App Manifest A JSON file describing the app's metadata:

{
  "name": "Website Management",
  "short_name": "WM",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0F172A",
  "theme_color": "#1E3A5F",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

3. HTTPS PWAs require HTTPS. Cloudflare Free offers this for free.

Functionality

Offline Support - Cache strategies (cache-first, network-first, stale-while-revalidate) - Offline fallback page - Background sync (sends data when the network is restored)

Push Notifications ```js const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: 'public-vapid-key' }); ```

Web push works on iOS Safari 16.4+ (since 2023) and Android Chrome (everywhere).

Installation - Chrome / Edge: Add to Home Screen prompt - iOS Safari: Share → Add to Home Screen (manual) - Desktop: Install icon in the URL bar

Frameworks

Workbox Google's official tool: ```bash npm install workbox-cli ```

Next.js + next-pwa ```bash npm install next-pwa ```

Vite + vite-plugin-pwa ```bash npm install vite-plugin-pwa ```

WordPress - **Super PWA** plugin (free) - **PWA for WP** plugin

Testing

Chrome DevTools - Application → Manifest - Application → Service Workers - Lighthouse → PWA audit

Tools - [PWA Builder](https://www.pwabuilder.com/) – official Microsoft tool - [Web Manifest Validator](https://manifest-validator.appspot.com/)

When to use vs not use PWA

Suitable For - E-commerce (offline products, push notifications) - News/blogs (offline reading) - Productivity apps - Food ordering - Travel tools - Social media

Not Suitable For - Games (limited performance) - Complex 3D / AR - Massive offline data - Bluetooth/USB access (limited)

iOS Limitations (2026)

Apple allows PWAs, but with limitations: - 50 MB storage limit - Limited push notifications (improved since iOS 16.4) - Restricted background tasks - No In-App Purchase (Apple wants their 30%)

Real-World Examples

Pinterest - Switched mobile web to PWA in 2017 - Time spent: +60% - User-generated ads: +44% - Revenue: +44%

Starbucks - PWA vs native app: PWA used 2x more, 99.84% smaller size - Increase in orders through PWA

Twitter Lite - Bounce rate: -20% - Pages/session: +65% - Tweets: +75%

SEO Benefits

• Indexable (unlike native apps)
• Schema.org WebApplication support
• Automatically mobile-friendly
• Better Core Web Vitals (via caching)

See our SEO fundamentals guide.

Pricing Estimates (Estonia)

PWA Cost - Simple (added to existing site): €800–€2,000 - Complex (offline-first): €3,000–€8,000 - Custom (push, native features): €5,000+

Native App Cost - Simple: €8,000–€15,000 - Medium: €15,000–€30,000 - Complex: €30,000+

PWA is 3–5x cheaper.

Summary

In 2026, PWA is the sensible choice for most projects where a mobile app is desired. 50% of the cost, 80% of the functionality. We offer PWA development based on WordPress or custom-built with Next.js. Request a quote.

Sources

• Google – PWA Documentation
• MDN – Progressive Web Apps
• PWA Stats – Case Studies