Summary of "Progressive Web Apps (PWAs) vs native mobile apps | Leigh Kendell and Aranda Morrison"
Summary: Progressive Web Apps (PWAs) vs Native Mobile Apps
This video features Leigh Kendell (Lead Developer at Hatchd) and Aranda Morrison (Tech Director at Adapptor) discussing the differences, advantages, and challenges of Progressive Web Apps (PWAs) compared to native mobile applications.
Key Technological Concepts & Features
1. What is a PWA?
- A PWA is a web app built using standard web technologies but designed to deliver an app-like experience similar to native apps.
- PWAs are installable via browser prompts and can appear on home screens with app icons and notification badges.
- They can work offline but require explicit implementation of offline capabilities (service workers and caching).
2. Core Technical Requirements for PWAs
- Web App Manifest: JSON file defining app name, icons, start URL, and display mode (usually “standalone” to hide browser UI).
- Secure Context: Must be served over HTTPS or localhost during development.
- Service Worker: JavaScript that acts as a proxy to cache assets and enable offline functionality with customizable caching strategies and fallbacks.
3. Development & Deployment
- PWAs have a development speed and cost advantage due to a single codebase and widespread developer familiarity with web technologies (JavaScript, HTML, CSS).
- Deployment is simpler and faster—no app store approvals needed; updates can be pushed instantly.
- Tools like Microsoft’s PWABuilder.com can generate native app wrappers from PWAs for app store submission.
4. Device & Browser Support
- PWAs run on browsers, so support depends on browser engines (mainly Chromium and Safari/WebKit).
- Fragmentation exists due to different browser capabilities and OS-level restrictions, especially on iOS where Apple is slower to adopt PWA features.
- PWAs support millions of device screen sizes but face challenges with browser inconsistencies.
5. Offline & Background Capabilities
- Offline support is good but requires upfront design; native apps are inherently offline-first.
- Background processes (e.g., background sync) are limited or unsupported on iOS but work on Android Chrome.
- Storage limits exist (e.g., 1GB default in Safari with user approval needed for more).
6. OS Feature Access
- Native apps have superior access to OS features (Bluetooth, USB, ambient sensors, background geolocation, live activities, dynamic island on iOS).
- PWAs can access geolocation, camera, microphone, and recently push notifications on iOS and Android.
- Many advanced features remain behind browser flags and are not widely available or reliable on PWAs.
7. User Experience & Performance
- Visually, PWAs can be nearly indistinguishable from native apps.
- Performance is generally good for most apps but native apps outperform PWAs in rendering and complex animations due to direct hardware access.
- PWAs have a much smaller installation footprint (e.g., Spotify PWA ~330KB vs native app ~310MB).
8. Push Notifications
- As of recent updates, push notifications are supported on both Android and iOS PWAs, a significant improvement over past limitations.
9. Discoverability
- Native apps benefit from curated app stores, making discovery straightforward.
- PWAs rely on SEO and web search, which can be crowded and less trusted for app discovery.
10. Security
- PWAs have the same security model as websites, sandboxed and limited in device access compared to native apps.
- No deeper access than a browser tab, reducing risk but also limiting capabilities.
Comparisons with Other Frameworks
- PWAs are not a new concept (around 10+ years), but adoption and awareness are growing.
- PWAs can be built using frameworks like React, which also supports single-page applications.
- Hybrid frameworks like Ionic provide web technology apps wrapped with native interfaces, allowing greater access to native device features but still require app store deployment.
- React Native and Flutter provide fully native UI with web-like development experience but are different from PWAs.
Real-World Examples of PWAs
- Duolingo: Web version mimics native app experience, especially on desktop.
- Starbucks: PWA available for ordering.
- WhatsApp: PWA version exists and is nearly indistinguishable from native app.
- Spotify: PWA version is lightweight and visually similar to native app, with minor UI quirks on iOS.
Challenges & Considerations
- PWAs face hurdles with user education (install prompts can be confusing).
- Apple’s inconsistent support and recent temporary disabling of PWA features in iOS 17.4 beta highlight platform risks.
- Background processing and advanced OS integrations are limited on PWAs.
- Decision depends on project needs: lean teams with web expertise may prefer PWAs; apps requiring deep OS integration or high performance should consider native.
- Many companies choose to build both PWA and native apps to cover all bases.
Additional Notes
- Apple’s App Clips and Android’s Instant Apps are native mini-app concepts similar in spirit to PWAs but require native app bundles and app store deployment.
- Service worker cache is stored in non-volatile storage (disk) managed by the browser.
- Browser engine consolidation (Chromium and WebKit) has reduced cross-browser compatibility issues.
Main Speakers
- Leigh Kendell – Lead Developer at Hatchd, focuses on web apps and websites.
- Aranda Morrison – Tech Director at Adapptor, oversees tech teams and occasionally codes.
This video serves as both an educational guide and comparative analysis for developers and product teams considering PWAs versus native mobile apps, highlighting practical considerations, technology stacks, and real-world examples.
Category
Technology
Share this summary
Is the summary off?
If you think the summary is inaccurate, you can reprocess it with the latest model.
Preparing reprocess...