Does your business need a web app, native app, or both? The triplicate costs of developing and maintaining separate applications for each platform – Web, iOS, and Android – make this a high stakes question for any business invested in engaging digitally with its customers. And yet the technological landscape against which one might analyze this question is changing so rapidly that many businesses may choose the wrong product strategy based on outdated information.
So goal of this post clarify the difference between web and native apps as of July 2017.
Case Study – Twitter
In February 2017, Twitter began redirecting all of its mobile web traffic from its native app to its new Progressive Web App (PWA), dubbed Twitter Lite, with the goals of increasing user engagement, achieving near-instant load times, and decreasing data consumption.
- 65% increase in pages per session
- 75% increase in Tweets sent
- 20% decrease in bounce rate
<blockquote class=”twitter-tweet” data-lang=”en”><p lang=”en” dir=”ltr”>Today we moved all of Twitter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA.</p>— Nicolas (@necolas) <a href=”https://twitter.com/necolas/status/829128165314306048″>February 8, 2017</a></blockquote>
<script async src=”//platform.twitter.com/widgets.js” charset=”utf-8″></script>
Twitter Lite now uses only 3% of the local storage required by Twitter’s native app, and it requires only 600kb in bandwidth consumption for the initial load, as opposed to the 23.5MB required to download Twitter for Android. Learn more from this Google blog post.
To better understand how Twitter’s web app is able to achieve such significant advantages over its native app in terms of performance and data consumption, you need to understand the PRPL pattern, a web app architecture that has become possible over the past five years because of increasing browser support for the Service Worker and HTTP2, the latest version of the Hypertext Transfer Protocol. (We discuss HTTP2 at length in this article here).
Native app features that are now achievable on the web include:
- GPS and geolocation access
- Camera and microphone access via the getUserMedia/Stream and the upcoming MediaStream Image Capture APIs
- Device vibration
- Screen orientation and accelerometer access, including compass and gyroscope
- battery status
- Access to gamepad controllers connected via USB through the GamePad API
As new browser updates roll out over the coming months, a host of new device hardware features will become accessible to web apps, further diminishing any advantage native apps may have may over PWAs. These forthcoming APIs will expose access to:
- All connected USB devices via the WebUSB API
- All connected Bluetooth devices via Web Bluetooth API
- Ambient light sensor (works currently in Edge and Firefox 48+)
- Proximity sensor (works in Firefox 48+)
- Full accelerometer, magnetometer and gyroscope sensor access
Advantages of progressive web apps over native apps:
- Discoverability – Content within progressive web apps can easily be found by search engines. Native apps can be discovered by search, but the content within them cannot.
- Linkability – Any page or content section in a PWA can have a direct link, which can be shared easily.
- bookmarkability – save that link to access an app’s view directly
- Always Up-to-date – Users do not have to download the latest update from the app store when using PWAs
- universal access – not subject by app stores sometimes arbitrary policies or (unintended) geographic restrictions
- large data savings, extremely important in emerging markets with expensive and/or slow Internet access. For example, e-commerce website Konga cut data usage by 92% for the first load by migrating to a PWA.
- low friction of distribution – if your progressive web app is online, it’s already accessible for Android (and other mobile) users.
- 65.5% of US smartphone users don’t download any new apps each month
- PWAs eliminate the need to go to the app store, search for the app, click Install, wait for the download, then open the app. Each of these steps loses 20% of the potential users.
Advantages of progressive web apps (PWAs) over native apps:
- contacts, calendar and browser bookmarks access (lack of access to these could be viewed as a feature by privacy-conscious users)
- alarms
- telephony features – intercept SMSes or calls, send SMS/MMS, get the user’s phone number, read voice mail, make phone calls without the Dialer dialog
- low-level access to some hardware features and sensors: flashlight, atmospheric pressure sensor
- system access: task management, modifying system settings, logs
See the Pen Grab The GPS Location In Browser JS by Weft Digital (@weft_digital) on CodePen.light
See the Pen html 5 Vibrate Api by Weft Digital (@weft_digital) on CodePen.light
See the Pen Device Orientation API by Weft Digital (@weft_digital) on CodePen.light
See the Pen JS Battery Status API by Weft Digital (@weft_digital) on CodePen.light
See the Pen Compass in HTML5 Demo by Weft Digital (@weft_digital) on CodePen.light