Before we delve any deeper into the topic of progressive web apps, let's highlight the context that “produced” them: the limitations of the web itself (poor internet connection, low performance and so on).
Therefore, a solution was needed so that users (and here we're referring mostly to users from emerging markets, although poor internet connection is a “sore point” for users from other countries, as well) faced with this type of drawback could enjoy some native-ish, app-like experiences, too.
And so, evolving from the “standard” web-hosted apps and “rivaling” native apps in feature-rich user experience, loading speed and (most of all) unmatched accessibility, progressive web apps “were born”!
Now let's get to the bottom of the growing “fascination” for this “new” type of apps, pointing out why they're preferred by developers (front-end developers in particular), by users and by organizations (Google being this web technology's most “notorious” advocate) to the same extent.
But First: What Exactly Are Progressive Native Apps?
And this leads to another another legitimate question: in what way are they different from “conventional” web apps?
“Web browser APIs”, this is the answer! It's this feature alone that makes all the difference! Progressive web apps are “clusters” of multiple modern web technologies, the great majority of them deriving from the web API's itself.
Basically this opens a whole new web era for developers, an era where they can build powerful dynamic web apps using web APIs. Where they can deliver native-ish user experiences without the need of using hybrid frameworks.
“Progressive enhancement” (or “brewing” top performance even from the early stages of development), this is how we can call the whole development process that sets this type of apps apart from web apps and gets them so close to native apps.
Developers get to add new enhancements/features progressively, while users get to enjoy some native app-like experience, irrespective of their internet connection's quality or of the mobile browser that they're using. A win-win situation!
And now, let's point out the key “requirements” for a “regular” web app to “level up” to a progressive one:
- to be responsive: a progressive web app runs on any type of device (any browser)
- to run offline relying on service workers (to be connectivity-independent): one of the main reasons why these apps have gained so much ground so quickly; “poor or no internet connectivity” is the issue that progressive web apps have been created to compensate for after all
- to feature an architecture enabling progressive enhancement (developers should easily add on new features, new functionalities hassle-free)
- to be be easy to install locally, on the user's home screen, on smartphones and tablets
- to be re-engageable: via features such as push notifications
- to be built on HTTP, therefore addressing the security issue
- to be easily accessed via one basic URL
And the list could easily go on and on with features deriving from these very “requirements”:
- they're app-like (with content and functionality playing, each, its separate role)
- they're discoverable (since Google and other search engines can easily track them down identifying them as “apps”)
- they feature dynamic app-like pages with separate URLs, etc.
What's most important for you, as a Drupal site owner and as an organization, is the aspect of ACCESSIBILITY! Being responsive, progressive and connectivity-independent, these new-generation type of apps (the “future of web apps”, as many call them) is a huge leap forward into the future of web.
Once there the user's freed from the chains of performance and other types of dependencies (platform dependency, internet connection dependency...)
And Again: How Precisely Do Progressive Web Apps Benefit Your Own Business?
Is your organization's future projects include seizing business opportunities in the emerging markets (for, after all, they are “responsible” for 70% of the global growth, according to Forbes)? Markets which are known as having the mobile in their DNA while they face, at the same time, poor internet connectivity challenges?
Then progressive web apps come as a sure “recipe” for your business' growth!
As for your direct customers, it's all the new possibilities that this type of apps, built with unmatched accessibility in mind, unlock. Your users will be able to access your PWAs from any device (PWAs put an end to Android's “dictatorship”), from any network access (or none) and still enjoy a native-ish experience.
They no longer need to limit themselves to “super light” type of mobile apps or to access their favorite apps only for short periods of time.
Progressive web apps can be adjusted to these particular customers' context of poor network performance and used devices. An enhancement that will smooth your access through and ensure your business' growth in a 3.9 billion person market.
From our own team of Drupal developers' standpoint: they'll get to focus on configuring your company's web apps for 2G only, thanks to their “connectivity-independency” feature.
Now if we are to point out some business stories of success, we could mention Jumia and Konga. The two companies operating in Africa have both implemented progressive enhancements into their their web apps' development process and they've both succeeded to increase their conversion rater and to reduce data usage.
To Sum Up:
- your users don't need to compromise a rich native app-like experience in order to save their data or due to a poorly performing network
- you'll make your web apps accessible to everyone (increasing visibility for your own brand)
- you'll manage to cut down your bounce rate (no more “annoyed” users unable to access your app or constrained to access it for a shorter period of time)
- you'll be able to more effectively safeguard your data
Service Workers: What Are They and How Can They Improve Your PWA?
First of all we feel like adding that: service workers are indispensable when building progressive web apps! They're the JavaScript-like scripts handling everything data-related: where it comes from, how it should be structured and cached in the background, where it should be pulled to etc.
Each time your users perform an action, it's these service workers that makes the right data requests in the database and transmits it between views. They coordinate all the background processes that go from data requests to content delivery.
And speaking of service workers, we need to stress out that it's the Service Worker API that's the truly indispensable service worker that you should be using for ensuring a connectivity-independent PWA.
It makes the very foundation of your progressive web app!
Start with the Service Worker Api and build on it; take it from there and continue to enhance your app!
For inspiration, we recommend you to visit Service Workers Cookbook, a great source of “enlightening” demos and great examples for you to learn from!
A Few Words About The App Shell That Progressive Web Apps Use
If you're familiar with the native app's architecture, then you surely are familiar with app shells.
They're the pre-established patterns that guarantee the clear separation of the UI from the data and code. It's also the true “culprit” of native apps' high performance, of their undeniable power: the interface remains visible and identical for the user, while different sets of data can load each time.
It can be cached locally, making it easy for it to load with each access of your app, and guaranteeing a dynamic content: data and functionality filling in the views can differ depending on various factors.
And this shell-like structure remains identical on every single page of your app. It's only the data/functionality that vary, creating that sense of dynamics and ensuring the best loading times, too.
And that's it for today! This is our short 2-in-1 presentation and pledge for adopting progressive web apps. What do you think? Are they the future of the interweb or you don't see their potential?
