Progressive Web Apps (PWA): Why, Where, and How

Imagine an app that feels as smooth and feature rich as a native app you download from the app store, but works seamlessly in your web browser, on any device. That’s the magic of progressive web apps (PWAs). Let’s find out how to develop them.

Progressive web apps (PWAs) represent a revolutionary approach to web development, blending the best features of traditional websites and native mobile applications. They are designed to deliver a seamless, app-like experience directly within the web browser, providing users with fast, reliable, and engaging interactions without the need to download and install a separate app from an app store.

Why choose progressive web apps (PWAs)?

There are several reasons why you may choose to develop a progressive web app (PWA) instead of a traditional website or native mobile app. Here are some of the key benefits.

For businesses

• PWAs deliver lightning-fast loading times and smooth interactions, keeping users engaged. Offline functionality ensures a seamless experience even without an internet connection.
• Push notifications allow businesses to send timely updates and reminders, driving repeat visits and fostering stronger user connections.
• PWAs eliminate the need for app store downloads, reducing friction in the user journey and potentially boosting conversions.
• They benefit from SEO, making them discoverable through search engines, unlike native apps solely reliant on app store discovery.
• PWAs leverage a single codebase for various platforms, streamlining development and potentially lowering costs compared to building separate native apps for each operating system.
• They generally take up less storage space on user devices compared to native apps, making them ideal for users with limited storage or on slower internet connections.

For developers

• PWAs are built using familiar web technologies like HTML, CSS, and JavaScript, minimising the need to learn entirely new programming languages for native app development.
• Building a single codebase for PWAs can potentially streamline development compared to creating separate native apps for different platforms.
• Updates to PWAs can be deployed instantly through the web, eliminating the app store approval process required for native apps.
• PWAs work across various devices and platforms, extending a developer’s reach without needing to create platform-specific versions.

Table 1: PWAs vs traditional web apps and native mobile apps

Where PWAs are most effective: Key industries and use cases

PWAs aren’t a one-size-fits-all solution, but they excel in specific industries and use cases. Here’s a breakdown of where PWAs truly take centre stage.

• E-commerce: Imagine a world where your favourite online store feels as smooth and responsive as a native app, even on a slow internet connection. PWAs make this a reality for e-commerce businesses. With lightning-fast loading times, offline browsing capabilities (perfect for product research on the go!), and push notifications for promotions and abandoned carts, PWAs can significantly enhance the mobile shopping experience and drive sales.
• Publishing: News outlets, magazines, and other content publishers can leverage PWAs to ensure their content is always accessible, even when users are offline. This allows readers to download articles or browse saved content for later, creating a seamless and uninterrupted reading experience. Push notifications also keep users informed about the latest updates and stories.
• Travel: No more scrambling for a Wi-Fi signal to access your travel itinerary or manage bookings! PWAs empower travel companies to create apps that function flawlessly offline. Users can download their flight information, hotel reservations, and even local maps before their trip, ensuring a stress-free travel experience regardless of internet connectivity.
• Financial services: Security is paramount when it comes to financial apps. PWAs offer a secure way for banks and financial institutions to provide users with mobile access to their accounts, payment options, and financial tools. Additionally, PWAs can leverage push notifications for transaction alerts and security verifications, enhancing user trust and convenience.

How to develop PWAs

Here is the step-by-step process of creating a PWA based on your website.

Step 1: Preparing the foundation: Audit and manifest

Before diving into code, assess your website’s readiness for a PWA transformation.

• Audit your website: Use tools like Google Lighthouse to identify performance bottlenecks and areas for improvement. Ensure your website loads quickly and offers a smooth user experience on mobile devices.
• Create a web app manifest (JSON): This file acts as the blueprint for your PWA, providing essential information like name, icons, and functionalities. Here’s a basic structure to get you started (replace placeholders with your website’s details):

“short_name”: “Your PWA Name”,
“name”: “Your PWA’s Full Name”,
“icons”: [
{
“src”: “icon-72x72.png”,
“sizes”: “72x72”,
“type”: “image/png”
},
{
“src”: “icon-192x192.png”,
“sizes”: “192x192”,
“type”: “image/png”}
],
“start_url”: “/”,
“display”: “standalone”,
“theme_color”: “#ffffff”
}

Step 2: Adding service worker magic: Offline functionality

The magic of PWAs lies in service workers, which are scripts that run in the background. Here’s how to create a basic service worker to enable offline functionality (replace index.html with your website’s main file):

• Create a new JavaScript file (e.g., sw.js).
• Add the following code to sw.js:

cacheName = ‘your-pwa-cache’;
self.addEventListener(‘install’, function(e) {
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([
‘/’,
‘/index.html’,
// Add other essential files here (CSS, JavaScript)
]);
})
);
});
self.addEventListener(‘fetch’, function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

This code caches your website’s essential files (index.html, and other critical assets) during installation. When a user requests a resource, the service worker attempts to serve it from the cache first, ensuring offline functionality.

Step 3: Registering the service worker

In your website’s main HTML file (usually index.html), add a script tag to register the service worker:

<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’)
.then(function(registration) {
console.log(‘Service worker registration successful:’, registration);
})
.catch(function(error) {
console.log(‘Service worker registration failed:’, error);
});
}
</script>

Step 4: Progressive enhancements: Push notifications (optional)

Push notifications allow you to send real-time updates to users, further enhancing the app-like experience. However, implementing them requires additional configuration and may involve using libraries or frameworks like Firebase push notification.

Step 5: Deployment and testing

• Deploy your website and service worker files to a web server.
• Test your PWA across different devices and browsers to ensure proper functionality. Use developer tools to identify and fix any issues.

Remember, this is a foundational guide. As you delve deeper into PWA development, you’ll explore more advanced features and functionalities. However, these steps provide a solid starting point to transform your website into a progressive web app and offer a compelling user experience!

Real-world examples of PWAs in action

These real-world examples showcase the versatility and power of PWAs. From streamlining e-commerce transactions to enhancing social media engagement, PWAs are transforming the way businesses connect with users in a mobile-centric world.

1. Starbucks: Streamlining coffee orders

• Challenge: Encourage mobile ordering without requiring app downloads.
• Solution: A PWA that allows users to browse menus, place orders, and even add items to carts offline.
• Benefits: Increased convenience, faster ordering (especially for on-the-go customers), and reduced storage requirements on user devices.

2. Uber: Expanding reach with a lightweight PWA

• Challenge: Increase user base in regions with limited internet connectivity and low-end devices.
• Solution: A PWA that functions flawlessly on slow networks and has a small file size for quick downloads.
• Benefits: Reaches a wider audience, reduces data usage and storage requirements, and caters to users who may not want to install a full app.

3. Spotify: A PWA that fuels user growth

• Challenge: Convert free users to premium subscriptions.
• Solution: A PWA offering a fast, reliable, and offline-capable music streaming experience.
• Results: A significant boost in free-to-paid conversion rates, increased user engagement (including average listening hours), and a rise in desktop users.
• Key features: Lightweight design, offline functionality, and personalised playlists.

4. Telegram: From laggy app to agile PWA

• Challenge: Provide a smoother and faster user experience for sending messages and interacting with the platform.
• Solution: Replacing the outdated native app with a PWA.
• Benefits: Enhanced user experience with faster performance, improved agility, and some offline functionality. This shift is likely a major contributor to Telegram’s massive user base.

5. Facebook: A PWA for all devices

• Challenge: Offer a compelling alternative to the native app, especially for mobile users.
• Solution: A PWA that delivers a quick and efficient experience, taking up minimal storage space.
• Benefits: Appeals to casual users and those with limited storage, while also offering a performant desktop experience.

The best part? PWAs are on the rise. From e-commerce giants to news outlets, businesses are recognising their potential. Don’t get left behind! The future of mobile is fast, frictionless, and accessible. Make sure your business is part of it – go PWA today!