Problems with Native Apps?
We all have used Android or iOS apps on our smartphones. We use them for all kinds of thing. But while installing any Android/iOS apps we go through these problems :
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 phone, 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 works good 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 play store/app stores would range from 30–200MB. Moreover, these app needs to updated every week! But Progressive Web Apps are within some KBs and are automatically updated.
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 in a browser tab, no install 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.
A Progressive Web App is:
Note: Progressive Web Apps are now supported on the desktop!
Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.
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) suggestions 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.
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.
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:
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 own 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).
To support add to homescreen 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 homescreen 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:
What are the criteria?
In order for a user to be able to install your Progressive Web App, it needs to meet the following criteria:
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.
Free Online PWA Checker For your site : https://www.pwabuilder.com/
Access the sample PWA provided by google from any of the link from an android or desktop (hosted using chrome server):
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