Progressive Web Apps - Bridging the Gap Between Web and Native

June 2017 marks a turning point for mobile web development as Progressive Web Apps (PWAs) move from experimental technology to mainstream adoption. These enhanced web applications combine the best aspects of native apps with the reach and accessibility of the web, potentially transforming how businesses approach their mobile strategy.

What Makes an App "Progressive"?

Progressive Web Apps are characterized by several key capabilities:

• Responsive: Adapting to any screen size or form factor
• Connectivity Independent: Functioning offline or with poor network conditions
• App-Like Interactions: Offering fluid animations and immersive user experiences
• Fresh: Always up-to-date thanks to service worker update processes
• Safe: Served via HTTPS to prevent snooping and content tampering
• Discoverable: Identifiable as "applications" by search engines
• Re-engageable: Enabling re-engagement through features like push notifications
• Installable: Allowing users to add the app to their home screen
• Linkable: Easily shared via URL without complex installation

These capabilities are made possible by recent advancements in web standards and browser technologies, particularly service workers, which enable rich offline experiences and background processing.

The Business Case for Progressive Web Apps

Organizations are increasingly adopting PWAs for compelling business reasons:

1. Improved User Engagement

Early adopters are reporting impressive results:

• Twitter Lite: 65% increase in pages per session, 75% increase in Tweets sent
• Alibaba: 76% higher conversions across browsers, 14% more monthly active users on iOS
• Housing.com: 38% increase in conversion rate, 40% lower bounce rate

2. Reduced Development Costs

PWAs offer significant cost advantages over maintaining separate web and native applications:

• Single codebase for multiple platforms
• No app store approval process for updates
• Simplified maintenance and feature parity
• Lower user acquisition costs

3. Improved Performance

PWAs typically outperform traditional mobile websites:

• Faster loading times through service worker caching
• Reduced data usage
• Better performance on low-end devices and poor networks

Technical Foundations of Progressive Web Apps

Several key technologies enable the PWA experience:

1. Service Workers

JavaScript files that act as proxies between web applications and the network, enabling:

• Offline functionality through strategic caching
• Background sync when connectivity is restored
• Push notifications even when the browser is closed

2. Web App Manifest

A JSON file that provides metadata about the web application, allowing browsers to:

• Display the app with an icon on the home screen
• Present the app in full-screen mode without browser UI
• Control screen orientation and theme colors

3. HTTPS

Secure connections are a requirement for PWAs, not just for security but because many new web APIs only work with secure origins.

Browser and Platform Support in Mid-2017

The PWA ecosystem has reached a critical threshold of support:

• Chrome: Full support across Android and desktop
• Firefox: Strong support for core PWA features
• Safari: Limited support, with some features in development
• Edge: Microsoft actively implementing PWA capabilities

Google is particularly bullish on PWAs, featuring them prominently at I/O 2017 and integrating PWA discovery into the Play Store.

Implementation Strategies for Product Teams

Organizations considering PWAs have several implementation approaches:

1. The App Shell Architecture

Separating the application's infrastructure and UI (the "shell") from its content, allowing the shell to be cached and loaded instantly on repeat visits.

2. PRPL Pattern

A performance-focused pattern emphasizing:

• Push critical resources for the initial route
• Render the initial route as soon as possible
• Pre-cache remaining routes
• Lazy-load other routes and non-critical assets

3. Incremental Adoption

Many organizations are taking an incremental approach:

• Adding service workers to existing sites for offline capability
• Implementing app manifests for home screen installation
• Gradually enhancing the UX to be more app-like

Challenges and Limitations

Despite their promise, PWAs face several challenges:

1. iOS Limitations: Apple's Safari browser lacks support for key features like push notifications and home screen installation prompts
2. Feature Access: Limited access to device capabilities compared to native apps
3. Discovery: Users are accustomed to finding mobile apps in app stores
4. Education: Many users don't understand how to "install" PWAs

Looking Ahead: The PWA Roadmap

As we progress through 2017, several developments are likely to accelerate PWA adoption:

1. Improved iOS Support: Apple is expected to implement more PWA features in Safari
2. New Web APIs: Expanding access to device capabilities like Bluetooth, NFC, and advanced camera features
3. Better Discovery Mechanisms: Improved methods for users to discover and install PWAs
4. PWA Stores: Curated collections of Progressive Web Apps similar to traditional app stores

Conclusion: A Strategic Opportunity

Progressive Web Apps represent a strategic opportunity for organizations to deliver better user experiences while potentially reducing development costs. While they may not replace native apps for all use cases, they offer a compelling alternative for many scenarios.

As browser support continues to improve and more organizations share success stories, we can expect PWA adoption to accelerate throughout 2017 and beyond. Forward-thinking product teams should be evaluating where PWAs fit into their mobile strategy and beginning to experiment with the technology.

The web platform is evolving rapidly, and Progressive Web Apps represent one of the most significant advancements in recent years—bridging the gap between the reach of the web and the experience of native applications.

This article was written by Nguyen Tuan Si, a web technology specialist focusing on performance optimization and modern web application architectures.