One can create an application that will look like a native application, will be able to use device's hardware like camera and accelerometers, receive push notifications, have a launcher icon, work in offline, store local data, etc.
While native apps are written to run on mobile devices, PWAs are written to run inside a web browser. Native apps are developed with the programming languages of each platform (Objective-C and Swift for iOS and Java for Android), whereas, PWA uses HTML, CSS, and JavaScript.
However, a PWA can be listed in many app stores today as an optional distribution channel, including Google Play Store (for Android and ChromeOS), Microsoft Store (for Windows 10 and 11), and Apple AppStore (for iOS, iPadOS, and macOS).
TL;DR - As of Feb 2017, Progressive Web Apps are a sufficiently powerful platform that Twitter has moved all of their mobile web traffic to a React PWA.
As of August 2016, Progressive Web Apps actually offer more hardware access than commonly thought. Here's a screenshot of whatwebcando.today from my Chrome 52 stable on Android:
These features are being implemented or already work in some browsers:
Another important point to note is that the Origin Trials Framework (implemented in Chrome) enables manufacturers to expose and test hardware (or software) capabilities without having to go through the standardization process. For example, a phone maker could expose an API for reading the values of a pressure sensor, refine it, then submit it for consideration to the W3C.
Besides hardware access, there are also software features traditionally employed by native apps that are now available to web apps.
hardware-accelerated 2D/3D graphics via HTML5 Canvas or WebGL - check some of the HTML5 Canvas demos, WebGL sites or the three.js library. A 2014 benchmark of the Unity cross-platform game engine compared native vs. WebGL rendering performance, and concluded that
"The most important takeaway is, while there are still areas where WebGL is significantly slower than native code, overall you can get expect very decent performance already, and this can only get better in the future."
The gap has indeed been closing.
These features cover a lot of use cases, and many popular native apps nowadays could be rewritten as PWAs. Take Slack, for example. Its open source alternative, Rocket.Chat, is building a PWA version. For more PWA demos, see https://pwa.rocks.
Final note: PWAs run, with the same codebase, on the desktop as well as most mobile devices. On desktop environments (ChromeOS, and later Mac and Windows), they're launched in the same way as other apps, and run in a regular app window (no browser tab).
The main advantage for native applications is that they can access all native APIs a platform could offer (contacts, camera flash, SMS, telephony, network, bluetooth, sensors, raw sockets...) while a progressive web application can not (yet) as they are constrained by the Standard Web capabilities.
The goal for progressive web applications is to expand these capabilities to cover the most critical cases. In this mood, take a look at Progressive Web Apps: Escaping Tabs Without Loosing Our Soul where you can find a list of what a progressive web application should offer:
- Responsive: to fit any form factor
- Connectivity independent: Progressively-enhanced with Service Workers to let them work offline
- App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
- Fresh: Transparently always up-to-date thanks to the Service Worker update process
- Safe: Served via TLS (a Service Worker requirement) to prevent snooping
- Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
- Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
- Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
- Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
From these points, linkable was one of the first characteristics imported by native applications from the Open Web in the form of mobile deep linking.
But special mention deserve the combo fresh + installable as it represents one of the main advantages of the Web as a platform over the native alternatives. Here installable means that it appears in your home screen. It does not mean you require to pass downloading and installation stages. You open a URL or discover a service while browsing and it's done: it appears in your home screen.
Fresh refers to how a regular web works, offering an instant load and seamless updates. You are not asked for installing an update from the web of YouTube, it is deployed and you consumes it the next time you visit it.
I'm not talking about the benefits of the remaining points because you were asking for the differences and, for instance, re-engagement is something native applications already have via push services and notifications and now web applications have caught up.
Other related and key question is about which platform is more suitable for your needs. If you are not accessing special hardware capabilities, the Web should be enough and choosing the web you are free from the marketplaces, proprietary ecosystems and by the way, you can ensure certain grade of ubiquity and interoperability.
As final notes, I recommend you to browse www.flipkart.com from a mobile with Chrome. It's pretty awesome: no bugs, smooth navigation, app-like feeling. Go offline and it will continue working. A truly real world example of that post. Add the app to home screen and next time you open it, the experience is even better.
You can take a look at Firefox OS as well as an example of bringing more platform APIs to the Standard Web (with more or less success).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With