Introduction
Progressive web applications (PWAs) are an approach that involves a blend of numerous technologies to build powerful web applications for smooth and improved user experience.
In 2011, the Financial Times deserted its native apps and built a web app using the best technologies available at the time. Now, their product has grown into a full-fledged PWA.
It has been a while since PWAs were introduced. Many brands and organizations are adapting the progressive web applications. But why, after all this time, would a brand go for a web app when a native app does the job?
Before diving in, let’s look into some of the metrics shared in Google IO.
5 billion devices are connected to the web, making it the biggest platform of computing. Approximately 11.4 million monthly unique visitors go to the top 1000 web properties on the mobile web, and 4 million go to the top 1000 apps. Concluding, native application users are one-fourth of the mobile web users.
However, when it comes to engagement, this number drops sharply.
In native apps, a user spends an average of 188.6 minutes, while only 9.3 minutes on the mobile web. What makes native apps more engaging?
Well, one major leverage that Native applications have is the power of operating systems to send push notifications to their users. Native apps also deliver smooth user experience and load way more quickly than most of the websites in the browser.
These days, users don’t want to install all the apps they might require and want to browse a web app that does the work as smoothly as the native apps.
So, if web applications come with better user experience, offline support, push notifications, and instant loading, they can improve the engagement and encourage users to use the app time and again. This is what exactly progressive web application does.
So what is a Progressive Web Application?
PWAs are an enhancement of existing web technology and user experiences that have the reach of the web.
In 2015, Google Chrome engineer Alex Russell and designer Frances Berriman coined the term “progressive web apps” to term apps that are build using the new features supported by modern browsers, including service workers and web app manifests – enabling users to upgrade web apps to progressive web apps in their native operating system. As per Google’s official introduction, here’s what major characteristics are:
Progressive – Build with progressive enhancement as a core tenet, the PWA should work for every user, regardless of browser.
Responsive – They should smoothly work and fir on any form of device; desktop, tablet, mobile, or any other.
Connectivity Independent – The service workers should allow to on poor quality networks, or offline.
App-like – The PWA should be built with app-style interactions and navigation to help users navigate easily like in mobile apps.
Up-to-date – The PWA should always be up-to-date (possible with the service worker update process).
Secure – They should be served via HTTPS to improve the safety.
Re-engage able – The progressive web apps should be re-engage able through features like push notifications.
Installable – The PWA should allow users to “keep†web apps as per their choice without the need of an app store.
Linkable – The web app should be easily shared via a URL – without requiring complex installation.
Fast – Respond quickly to user interactions.
PWAs work smoothly in any browser but offers “app-like” features such as being install to home screen, push notification depend on browser support, and independent of connectivity to name a few. As of April 2018, those features are supported by the Microsoft Edge, Mozilla Firefox, Google Chrome, and Safari browsers, but more browsers may support the features in the future.
What gives PWAs an edge over native applications?
With PWAs, users can access all information and capabilities of a native app without actually downloading a mobile app.
To conclude, PWAs are apps delivered through the web; unlike native apps that are packaged and deployed through stores.
PWAs are built with technologies such as web app manifests, service workers, push notifications and IndexedDB/local data structure for caching.
As a specific term, to qualify as a PWA, websites can be tested against three baseline criteria: (Source: adactio.com/journal/13884)
- It must run under HTTPS.
- It must include a Web App Manifest.
- It must implement a service worker.
Google has officially introduced Progressive Web App checklist. Let’s learn more about three major technical underpinnings of PWAs in detail.
Served over HTTPS
To be a Progressive Web App, the web application must be served over a secure network. It is really easy to get an SSL certificate with services like LetsEncrypt and Cloudfare. Securing your website demonstrated trust and reliability to your users and avoiding those unauthorized attacks.
Service Workers
Service worker provides a programmatic way to cache app resources and define a custom “offline†page. Service Workers are capable of a lot more. Depending upon the network connection, Service Workers can be used to provide the live copy of a given resource if network is available, or falling back to a previously cached version if the network is not.
Service Workers are a javascript script that listens to events like install and fetches, and perform tasks. Here is a sample serviceworker.js
self.addEventListener('fetch', event => {
//caching for offline viewing
const {request} = event;
const url = new URL(request.url);
if(url.origin === location.origin) {
event.respondWith(cacheData(request));
} else {
event.respondWith(networkFirst(request));
}
});
async function cacheData(request) {
const cachedResponse = await caches.match(request);
return cachedResponse || fetch(request);
}
Web App Manifest
A Web App Manifest is a JSON file with information about your web – describing the resources your web app will need including icons, your app’s displayed name, and a splash screen. In your index.html, linking to the manifest file; browsers will detect the file and load the resources for you.
Progressive Web Apps make use of manifest.json to offer this feature. Here’s a simple manifest.json file.
{
"name": "Demo PWA",
"short_name": "Demo",
"start_url": "/?standalone",
"background_color": "#9F0C3F",
"theme_color": "#fff1e0",
"display": "standalone",
"icons": [{
"src": "/lib/img/icons/xxhdpi.png?v2",
"sizes": "192x192"
}]
}
Examples of Progressive Web Apps
AliExpress, a popular e-commerce site owned by the Alibaba Group.
Flipkart, India’s largest e-commerce site.
Twitter Lite, a default mobile web experience for all users worldwide launched by Twitter in 2017.
BookMyShow, the largest ticketing company in India.
Forbes, a top U.S. business magazine.
OLX, one of the largest online classified ads directory in India.
For Progressively Better Business Online, Think PWA
With a PWA, users can access all capabilities and information without downloading a mobile app. As businesses are shifting to progressive web apps, it is successfully helping them increase conversions, session length, page visits, and better user engagement.
If you want to build a progressive web application, get in touch with our team. We will help you build the best PWA for you and your business.
Source: developers.google.com, smashingmagazine