Impact of Progressive Web Apps to Native Mobile Applications
Problems with Native Apps?
We all have used Android or iOS apps on our smartphones. We use them for all kinds of things. But while installing any Android/iOS apps we go through these problems :
- Is this app worth downloading?
- Do I have enough space?
- My available data is not sufficient
One recent survey shows that people are turning away from Android/iOS apps because not all app experiences are satisfying or worthwhile. Some people simply don’t want any more apps on their phones, some even hesitate to download any app.
If you take a look at the apps installed on your mobile right now there might be at least a dozen apps that you do not use regularly. Sometimes apps only work well when the phone has an active internet connection.
The irony is that most of the apps have a fully responsive website performing the same functions. So why waste your precious disk space and your internet data on your smartphone by installing the native app? The average size of apps that we install from the play store/App Store would range from 30–200MB. Moreover, these app needs to be updated every week! But Progressive Web Apps are within some KBs and are automatically updated.
Progressive Web Apps (PWA):
What is a Progressive Web App?
Progressive Web Apps (PWA) are the next big thing in web development as they bring mobile-app-like experiences to users without requiring them to install an app from the app store/ play store.
Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit to a browser tab, no installation is required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full-screen experience.
Features:
A Progressive Web App is:
- Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
- Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
- App-like – Feels like an app, because the app shell model separates the application functionality from application content.
- Fresh – Always up-to-date thanks to the service worker update process.
- Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
- Discoverable – Is identifiable as an “application” thanks to the W3C manifest and service worker registration scope, allowing search engines to find it.
- Re-engageable – Makes re-engagement easy through features like push notifications.
- Installable – This allows users to add apps they find most useful to their home screen without the hassle of an app store.
- Linkable – Easily share the application via URL, does not require complex installation
You still create a web application (HTML, CSS, JavaScript) that can support adding features such as camera access, service workers for offline support, push notifications, and more. This combines the best of both worlds: You deliver fast, engaging, and reliable experiences whilst still having the reach and accessibility of a web page. This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.
Note: Progressive Web Apps are now supported on the desktop!
Why build a Progressive Web App?
Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.
- Worthy of being on the home screen
- When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.
- Work reliably, no matter the network conditions
- Service workers enabled Konga to send 63% fewer data for initial page loads, and 84% fewer data to complete the first transaction!
- Increased engagement
- Web push notifications helped eXtra Electronics increase engagement by 4X. And those users spend twice as much time on the site.
- Improved conversions
- The ability to deliver an amazing user experience helped AliExpress improve conversions for new users across all browsers by 104% and on iOS by 82%.
Structure of PWA
App Shell
What is the app shell?
The App Shell is not a technology but rather a design concept aimed at loading and rendering the web app container first, and the actual content shortly after, to give the user a nice app-like impression.
This is the equivalent of the Apple HIG (Human Interface Guidelines) suggestion to use a splash screen that resembles the user interface, to give a psychological hint that was found to lower the perception of the app taking a long time to load.
The app’s shell is the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app and is one of the components that ensures reliably good performance. Its first load should be extremely quick and immediately cached. “Cached” means that the shell files are loaded once over the network and then saved to the local device. Every subsequent time that the user opens the app, the shell files are loaded from the local device’s cache, which results in blazing-fast startup times.
App shell architecture separates the core application infrastructure and UI from the data. All of the UI and infrastructure is cached locally using a service worker so that on subsequent loads, the Progressive Web App only needs to retrieve the necessary data, instead of having to load everything.
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.
Service Workers
What is a service worker?
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing. The core feature discussed in this tutorial is the ability to intercept and handle network requests, including programmatically managing a cache of responses.
The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete control over the experience.
Things to note about a service worker:
- It’s a JavaScript Worker, so it can’t access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed.
- A service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.
- It’s terminated when not in use and restarted when it’s next needed, so you cannot rely on the global state within a service worker’s fetch and onmessage handlers. If there is information that you need to persist and reuse across restarts, service workers do have access to the IndexedDB API.
- Service workers make extensive use of promises, so if you’re new to promises, then you should stop reading this and check out Promises, an introduction.
Features provided via service workers should be considered a progressive enhancement and added only if supported by the browser. For example, with service workers you can cache the app shell and data for your app so that it’s available even when the network isn’t. When service workers aren’t supported, the offline code isn’t called, and the user gets a basic experience. Using feature detection to provide progressive enhancement has little overhead and it won’t break in older browsers that don’t support that feature.
Service workers provide the ability to intercept requests made from our Progressive Web App and handle them within the service worker. That means we can determine how we want to handle the request and potentially serve our cached response.
Remember: Service worker functionality is only available on pages that are accessed via HTTPS (http://localhost and equivalents will also work, to facilitate testing).
Web App Manifest
To support adding to the home screen feature, we need to create a manifest file.
“ The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the home screen of a device, providing users with quicker access and a richer experience.“
Add to Home Screen, sometimes referred to as the web app install prompt, makes it easy for users to install your Progressive Web App on their mobile or desktop device. After the user accepts the prompt, your PWA will be added to their launcher, and it will run like any other installed app.
Chrome handles most of the heavy lifting for you:
- On mobile, Chrome will generate a WebAPK, creating an even more integrated experience for your users.
- On the desktop, your app will be installed, and run in an app window.
What are the criteria?
For a user to be able to install your Progressive Web App, it needs to meet the following criteria:
- The web app is not already installed
- Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
- A web app manifest that includes:
- short_name or name
- icons must include a 192px and a 512px sized icons
- start_url
- display must be one of fullscreen, standalone, or minimal-UI
- Served over HTTPS (required for service workers)
- Has registered a service worker with a fetch event handler
When these criteria are met, Chrome will fire a beforeinstallprompt event that you can use to prompt the user to install your Progressive Web App.
Other browsers have different criteria for installation, or to trigger the beforeinstallprompt event. Check their respective sites for full details: Edge, Firefox, Opera, Samsung Internet, and UC Browser.
Note: If the web app manifest includes related_applications and has “prefer_related_applications”: true, the native app install prompt will be shown instead.
Example of a manifest.json file :
Extras:
Some Websites which use PWA: www. olx. in, www.flipkart.com, www.aliexpress.com
Free Online PWA Checker For your site: https://www.pwabuilder.com/
Access the sample PWA provided by google from any of the links from an android or desktop (hosted using a chrome server):
- http://127.0.0.1:8887 (local)
- http://192.168.10.29:8887
- http://169.254.240.245:8887
- http://192.168.2.1:8887
Check out the ‘Add to Home Screen’ facility (Works only in Chrome/ Opera / Samsung Browser etc) from options, to get the PWA app installed on your mobile. (Add to Home Screen prompt only works with HTTPS connection).
Sample PWA files for hosting made using google tutorial: https://drive.google.com/file/d/1KeXa6cH-kxRkYs6MElHtqtOtDqq_701l/view?usp=sharing
