Progressive Web Apps (PWA)

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.

Why do we need it?

In the ever-evolving world of technology, the line between web and native applications is blurring, thanks to Progressive Web Apps (PWAs). These hybrid powerhouses fuse the versatility of the web with the robust features of native apps, creating a new breed of applications that are fast, reliable, and engaging.

Imagine a world where your app can be accessed with a single URL, installed directly from a browser, work offline, and send real-time push notifications—all without the hassle of app store submissions. Welcome to the geeky elegance of PWAs, where innovation meets simplicity!

Whether you're a developer looking to reduce costs or a tech enthusiast ready to explore the cutting edge, this guide dives deep into the anatomy of PWAs, their architecture, and why they’re reshaping the web as we know it.

How is a PWA different from a regular website?

Progressive Web Apps (PWAs) stand out from traditional websites due to a distinctive set of features, including:

• Offline Functionality: PWAs can operate without an internet connection, unlike traditional websites.

• App-like Experience: They offer a more immersive, native app-like experience, featuring smooth animations and responsive interactions.

• Home Screen Installation: Users can add PWAs to their home screens, just like native apps.

• Push Notifications: PWAs can send push notifications to users, even when the browser is closed.

• Automatic Updates: PWAs update automatically, bypassing the need for app store involvement.

The Three pillars of PWA design

To make a PWA that feels as good to use as a platform-specific application, you must design it to be capable, reliable, and installable.

1. Capable

Modern web apps can now access powerful device features that were once exclusive to native apps. This is expanding rapidly thanks to new APIs.

• Key Technologies: WebRTC (video chat), Geolocation, Push Notifications, WebGL, WebVR/WebXR, and WebAssembly (basically allows code from languages like C++ and Rust to run on the web).

• Permission Model: These powerful features are unlocked through a secure, user-centric system where the user must grant permission, ensuring safety and trust.

• Example: Squoosh.app is a high-performance image compression tool built with WebAssembly, demonstrating the web's ability to handle complex, computation-heavy tasks traditionally done by desktop software.

2. Reliable

A reliable PWA is fast and works predictably under any network condition, including offline.

• Speed is Critical: Performance is paramount. Even small delays in loading or interaction can cause users to leave.

• Offline Functionality: Users expect the app to work and for their most recent data (like tickets, itineraries, or media) to be available even without an internet connection. The app should communicate errors clearly instead of crashing silently.

• Example: Starbucks' PWA allows customers to browse the entire menu, customize their order, and add items to their cart perfectly without a network connection. This reliability is crucial for user trust.

3. Installable

An installable PWA transforms the user experience by moving the app out of the browser and onto the device, making it feel like a native application.

• Integration: Once installed, it launches from the home screen, appears in app searches, and can be switched to using the app switcher, fully integrating with the OS.

• New Capabilities: Installation unlocks features like dedicated keyboard shortcuts and the ability to register as the default app for certain file types.

• Example: Twitter Lite (X), when installed, functions just like a native app. It has its own icon on the home screen and runs in a standalone window, providing a focused, app-like experience without being downloaded from an app store.

Key Features of a PWA:

• Space-saving: PWAs take up less space than native apps.

• Fast Loading: They're quick and responsive, even on slow networks

• Cross-Platform: One PWA works on multiple platforms (iOS, Android, desktop).

• Cost-Effective: PWAs are cheaper to develop and maintain than native apps.

• Discoverable: They're searchable on the web and don't require an app store.

Examples of PWAs and Their Impact

Example 1: Twitter Lite

• Before PWA: Twitter's native app had issues with performance and data consumption, especially for users with limited data plans and low-end devices.
  After PWA: Twitter Lite, the PWA version, resulted in a 65% increase in pages per session, a 75% increase in Tweets sent, and a 20% decrease in bounce rate. The app also uses significantly less data and loads quickly, even on slower networks.
  Benefits for You:

  • Faster Loading Times: Your users can access your content quickly, even with slow internet connections.

  • Reduced Data Usage: Users with limited data plans will appreciate the reduced data consumption, increasing their likelihood of staying engaged with your app.

Example 2: Pinterest

Before PWA: Pinterest had a slow mobile web experience, leading to low engagement rates and high bounce rates.

After PWA: After launching their PWA, Pinterest saw a 60% increase in core engagements, a 44% increase in user-generated ad revenue, and a 40% increase in time spent on the site.

Benefits for You:

• Higher Engagement: Users are more likely to stay on your site longer and interact with your content.

• Increased Revenue: Improved user experience can lead to higher conversion rates and increased revenue.

Example 3: Starbucks

Before PWA: Starbucks' mobile app was not accessible to all users, particularly those with lower-end devices or limited internet access.

After PWA: Starbucks' PWA resulted in a 2x increase in daily active users. The app allows users to browse the menu, customize their orders, and add items to their cart without needing a consistent internet connection.

Benefits for You:

• Offline Functionality: Users can access and interact with your app even when they are offline, providing a seamless experience.

• Broader Accessibility: Your app becomes accessible to users with various devices and internet connectivity, expanding your user base.

Example 4: Uber

Before PWA: Uber's native app had issues with accessibility and performance on low-end devices and slower networks.

After PWA: Uber developed a PWA that is lightweight, fast, and capable of functioning on low-speed networks. The PWA is less than 50 KB in size and loads within 3 seconds on 2G networks, ensuring that users can quickly book a ride regardless of their network conditions.

Benefits for You:

• Quick Load Times: Even on slow networks, your app will load quickly, improving user satisfaction.

• Lightweight and Efficient: A smaller app size ensures that it can be downloaded and updated easily, without consuming too much data or storage.

Benefits of PWAs

For Users	For Businesses & Developers
🚀 No Installation Needed: Can be used directly from a URL.	📱 Cross-Platform: A single codebase works on iOS, Android, and desktop.
💾 Saves Storage: Much smaller than native apps (often just 1MB vs. 50MB+).	💰 Lower Development Cost: Build and maintain one product, not three (iOS, Android, Web).
📶 Works Offline: Critical functionality remains available.	🔍 Discoverable: It's a website, so it's indexable by search engines (SEO).
🔄 Always Updated: Always runs the latest version; no app store updates needed.	🚫 No App Store Gatekeeping: No need for approval processes or paying store fees.
🔔 Push Notifications: Keeps users engaged with timely updates.	🔗 Easy Sharing: Can be shared via a simple link.
📱 App-Like Experience: Feels like a native app, with smooth animations and navigation.	📊 Better Performance: Faster load times lead to better conversion rates and user retention.

PWA vs. Native App vs. Responsive Website

Feature	Progressive Web App	Native App	Responsive Website
Installation	Via browser prompt	App Store	Not installable
Offline Use	Full functionality	Full functionality	Limited to none
Device Access	Good (growing API support)	Full (all APIs)	Limited
Updates	Instant (background)	App Store required	Instant
Discovery	Search engines, links	App Stores	Search engines, links
Platform	Cross-platform	Platform-specific (iOS/Android)	Cross-platform

Key Components of a PWA

1. Service Workers

Service workers are JavaScript files that run independently of the main browser thread, enabling:

• Offline Support: Cache resources to ensure functionality without an internet connection.

• Advanced Caching: Optimize load times by storing static assets.

• Background Sync: Sync data when the connection is restored.

• Push Notifications: Deliver updates or promotions to users.

Example of Registering a Service Worker:

if ('serviceWorker' in navigator) {

  navigator.serviceWorker.register('/service-worker.js')

    .then(reg => console.log('Service Worker registered:', reg))

    .catch(err => console.error('Service Worker registration failed:', err));

}

2. Web App Manifest

The Web App Manifest is a JSON file that describes your app's metadata, including its name, icons, theme colors, and display behavior. This file is essential for enabling the "Add to Home Screen" feature.

Example Manifest File:

{

  "name": "My PWA",

  "short_name": "PWA",

  "start_url": "/",

  "display": "standalone",

  "background_color": "#ffffff",

  "theme_color": "#000000",

  "icons": [

    {

      "src": "/icon-192x192.png",

      "type": "image/png",

      "sizes": "192x192"

    },

    {

      "src": "/icon-512x512.png",

      "type": "image/png",

      "sizes": "512x512"

    }

  ]

}

3. Application Shell

The Application Shell architecture ensures a fast and reliable user experience by separating the core user interface (UI) elements from the content.

• Fast Load Times: Caches essential UI components for instant loading.

• Consistent Experience: Displays the app’s structure, even when offline.

Example of Application Shell Caching:

const cacheName = 'app-shell-v1';

const appShellFiles = [

  '/',

  '/index.html',

  '/styles.css',

  '/app.js',

  '/icon-192x192.png',

  '/icon-512x512.png'

];

self.addEventListener('install', event => {

  event.waitUntil(

    caches.open(cacheName).then(cache => cache.addAll(appShellFiles))

  );

});

How to Build a PWA

1. Plan Your App:

   • Identify your target audience and key features.

   • Sketch wireframes and mockups for the interface.

2. Design the User Interface:

   • Follow mobile-first design principles.

   • Ensure the app is responsive and accessible.

3. Implement Service Workers:

   • Use tools like Workbox for caching strategies.

4. Add a Web App Manifest:

   • Configure metadata to enable installation and enhance appearance.

5. Optimize Performance:

   • Apply lazy loading, code splitting, and resource compression.

6. Test Your App:

   • Use Google Lighthouse to measure performance, accessibility, and PWA compliance.

Real-World Use Cases of PWAs

1. E-Commerce: Companies like Flipkart and AliExpress use PWAs to provide offline functionality, push notifications, and fast loading times.

2. Social Media: Twitter Lite is a PWA that delivers a fast and engaging experience with a smaller footprint.

3. News Platforms: The Washington Post's PWA ensures instant access to news articles, even with limited connectivity.

4. Travel:
   Trivago uses a PWA to enhance the search and booking experience for users across devices.