In this age of rapidly evolving mobile technology, we come across new innovations on a regular basis. If you are a technology enthusiast then you might have heard of progressive web apps. The term was first tossed by Google in 2013 and since then it has gained considerable attention from developers and media communities. Now Apple, with iOS 11.3, has also joined the game and there an even more hype around it. While still in its infancy, progressive web apps present a potentially dramatic change in the current app development landscape.

As pioneers in mobile app development, we believe in making the best use of innovative technologies. But before you go ahead to make a decision, it is important to understand the technology you are banking into. This blog is focused towards demystifying progressive web apps and exploring its potential use in business.

Interested in latest technologies?

Checkout our resources section and grab your free pick:

What are Progressive Web Apps?

Progressive web apps represent a new way of developing applications for mobile where developers ditch the complete hustle of coding native applications for separate platforms. Instead, they create a web application that looks, feels and functions like an app when used on mobile.

With advanced caching, it is even possible to download the web app and use some of its features offline. These apps function effectively on the Chrome browser (Android) and Safari browser (Apple) although other third-party browsers are working to support this technology. Some of the popular brands using progressive web apps are Forbes, Twitter, OLA etc.

For an app to be considered a progressive web application it needs to fulfill the following prerequisites:

• Progressive - They must work on every platform irrespective of the underlying operating system or the browser.
• Responsive - They layout and design should automatically adjust based on the screen size and resolution of the device used.
• Connectivity independent - If not complete then at least some part of the application should function even without the availability of internet connection.
• App-like - The app-shell model should be used to provide app-style navigation and interactions.
• Fresh - The app should automatically update from the server side without the need for user interference.
• Safe - Encryption via HTTPS is must to prevent snooping and ensure the authenticity of the content.
• Discoverable - It should be identifiable as an “application”. Thanks to W3C manifests and service worker registration scope for allowing them to be indexed by search engines.
• Re-engageable - Ability to engage the user with push-notifications is important to make it effective.
• Installable - The user should be facilitated with an option to have the app available from app drawer without any need for play store.
• Linkable - Sharing the application should be as simple as sharing the URL.

Why Choose Progressive Web Apps over Traditional App Development?

Progressive web apps offer a neat way to engage users and get them to use your application. By breaking the barriers like download, you gain access to a larger user group and thus increase the size of your audience. Since it is an easy and fast way to get mobile ready, it proves to a sustainable solution for multinational companies and SMBs alike. Moreover search engines especially Google prefer sites that offer superior mobile experience. By optimizing your website into a progressive web app you are able to gain a significant advantage over your competitor in the search results.

Contrast between PWA on Apple and Android:

Although, Android and iOS have similar capabilities in progressive web apps yet there are some noticeable differences that might influence your decision on developing a PWA.

What PWAs can do on Android and not on iOS

• You can store over 50 Mb on Android devices.
• Your files won’t be deleted except in case of storage pressure.
• Bluetooth access is permitted for BLE devices
• Speech Recognition
• Ability to access native share dialog using Web Share
• Background Sync and Web Push Notifications
• Web App Banner to invite the user to install the app
• Ability to customize the splash screen and orientations to some extent.
• Only one instance of a PWA is permitted with WebAPK and Chrome.
• In Android data usage report is available under settings, for iOS it appears directly in Safari.

What PWAs can do on iOS and not on Android

• A User can alter the icon’s name before installation
• PWAs can be configured to allow corporate users to receive app shortcuts from the company.

What goes into Making a PWA work?

The principal components needed for developing a PWA are as follows

1. Web App Manifest

This manifest is a simple JSON file which allows the developer to define how the app appears to the user, how they could launch the app and which components of the app display they could interact with to launch it.

Using the manifest, the web app can be given a more “native” presence on the user’s homescreen. It can be fine-grained to help launch the app in full screen, control which orientations to support and also define the color scheme used for the app on Android.

The manifest sample in the Web Starter Kit is a great place to get started. You can also use Manifest generators (link 1, link 2, link 3)

2. App Shell

The app shell consists of minimum HTML, CSS and Javascript that the web app would need to work. It works as a code bundle in which the UI is provided on the device and content loaded dynamically using API calls. When a progressive web app is accessed, the app shell is stored as a base in the device or browser’s cache. The core elements can then be loaded dynamically giving the user an offline experience.

This way many of the PWA functions can be used without an internet connection or a slow connection.

3. Service Workers

A service worker is a script which runs in the background separate from your web pages. It has a short life span and is intended to respond to events, make network requests for the pages it serves. The service worker is awake only when it receives an event and runs it.

Service workers can also use the Cache API to cache resources and give the user a good offline experience. It can also be used for instant loading on repeat visits. The application shell can be cached so it works offline while the content is loaded using Javascript.

These service worker samples can help you get a quick start. Google also maintains a workbox (a collection of libraries) to make service worker setup easier.

PWA vs Native vs Hybrid apps

The development cost for PWAs is significantly lower than Hybrid or Native apps - because they function on all platforms and no separate versions are needed for different end devices. But they do have their disadvantages

Support for fewer browsers: 

As of now, only Opera, Chrome and Samsung mobile browsers support loading PWAs. These browsers make up half the mobile browser market and leave much more to be desired

Lack of some native functionality: 

In some devices, some of the features would not work because PWAs after all load in browsers. For instance, getting notifications to work on iOS with PWAs can be problematic

Limited hardware access: 

Apps dealing with cameras, fingerprint scanning, GPS have known to be glitchy. The best solution would always depend on your target platforms and the functionality you want in your apps.

Want to get your progressive web app developed? With over 10 years of experience in the mobile industry we have developed deep expertise in working on innovative technologies. Get in touch today for a consultation or project.