The document compares mobile web apps, progressive web apps, hybrid apps, and native apps. It discusses their key differences in areas like installation process, updates, access to device features, battery life, security, launch to market timeline, codebase, talent required, and development costs and time. Progressive web apps are the fastest to launch, have a single codebase, but have limited offline capabilities and access to device features. Native apps have the best performance and access to features but the longest development time and costs.

1. Copyright 2021 Vincent Lau

2. Copyright 2021 Vincent Lau

3. Copyright 2021 Vincent Lau

4. Copyright 2021 Vincent Lau
Mobile Web App Progressive Web App Hybrid App Native App
Uses a responsive
web view
Uses web
components and
service workers
Uses a library of
purpose built
components
Uses purely native
components

5. Copyright 2021 Vincent Lau
https://app.drwealth.com/

6. Copyright 2021 Vincent Lau
https://www.hoolah.co/sg/

7. Copyright 2021 Vincent Lau

8. Copyright 2021 Vincent Lau

9. Copyright 2021 Vincent Lau
Mobile Web App Progressive Web App
Mobile Web Browser
Web App Manifest File
Mobile OS (iOS, Android)
Application Shell Architecture
Transport Layer Security
Service Worker

10. Copyright 2021 Vincent Lau
Native AppHybrid App

11. Copyright 2021 Vincent Lau
Connector provides an interface with
the host platform native UI elements.
E.g. <View> = Android View
Connector /
Bridge
To access native APIs that are not
already available in your version of
React Native, you will need to write a
Bridge.
#import
<React/RCTBridgeModule.h>
@interface CalendarManager :
NSObject <RCTBridgeModule>
@end
AppEntry.js /
app.json
class MainActivity: FlutterActivity() {
private val CHANNEL =
"samples.flutter.dev/battery"
override fun configureFlutterEngine(@NonNull
flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
MethodChannel(flutterEngine.dartExecutor.binaryMe
ssenger, CHANNEL).setMethodCallHandler {
call, result ->
}
}
}
class _MyHomePageState extends
State<MyHomePage> {
static const platform = const
MethodChannel('samples.flutter.dev/
battery');
// Get battery level
}
Similarly, Flutter components can
communicate with native code via
MethodChannel.
Here, the Android Java code passes
battery info to the Flutter component.

12. Copyright 2021 Vincent Lau
Progressive Web App Hybrid App Native App
Installable From Mobile Browser From Play/App Store From Play/App Store
App Updates Automatic User needs to update User needs to update
App Promotion SEO Indexable Listed on Play/App Store Listed on Play/App Store
Push Notifications Yes (limited for iOS) Yes Yes
UI on Screen Adaptive to any screen-size Requires additional work to
cater for screen-sizes
Requires additional work to
cater for screen-sizes
UI Components Interaction Relatively less smooth Relatively smoother Smoothest

13. Copyright 2021 Vincent Lau
Progressive Web App Hybrid App Native App
Offline Capable Yes (limited to data cached
when online)
Yes Yes
Access to Device Features Limited* Via Native Bridges All
Battery Life Drains the most Drains more Drains the least
Inter-app Communication** No Yes Yes
GPS Location Yes Yes Yes
Security Relatively Less Secured Relatively More Secured Most Secured

14. Copyright 2021 Vincent Lau
Progressive Web App Hybrid App Native App
Launch to Market Fast (no need to wait for
App/Play store approvals*)
Relatively Slower Relatively Slower
Codebase One for iOS/Android
platforms and Web browsers
One for both iOS/Android
platforms
Separately maintained for
iOS and Android platforms
Development Time Fastest Fast Relatively Slower
Development Costs S$45k-S$100k S$60k-S$250k S$100k-S$360k
Talent Required Fullstack Web Devs Frontend Web/App Devs iOS and Android Devs

15. Copyright 2021 Vincent Lau

16. Copyright 2021 Vincent Lau

17. Copyright 2021 Vincent Lau

18. Copyright 2021 Vincent Lau

19. Copyright 2021 Vincent Lau

20. Copyright 2021 Vincent Lau

21. Copyright 2021 Vincent Lau

22. Copyright 2021 Vincent Lau

23. Copyright 2021 Vincent Lau

24. Copyright 2021 Vincent Lau

25. Copyright 2021 Vincent Lau

26. Copyright 2021 Vincent Lau

27. Copyright 2021 Vincent Lau

28. Copyright 2021 Vincent Lau

29. Copyright 2021 Vincent Lau