Understanding Progressive Web Apps
Last updated
Last updated
Progressive Web App (PWA) is a term used to denote web apps that uses the latest web technologies. Progressive web apps are technically regular web pages that can appear to the user like traditional applications or (native) mobile applications. This new application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.
In other words, progressive web apps are user experiences that have the reach of the web, and are:
Reliable
When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.
Fast
53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.
Engaging
Progressive Web Apps are installable and live on the user's home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications. The Web App Manifest allows you to control how your app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.
Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.
Progressive Web Apps are available at an URL, just like any other webpage. Through WordPress Mobile Pack you have two options:
Make it available directly at "https://www.yourdomain.com" When mobile users land on yourdomain.com, instead of the responsive desktop theme they will see the PWA.
Have a dedicated sub-domain name, like "https://app.yourdomain.com" When mobile users land on yourdomain.com, they will be presented with a nonintrusive smart-app-banner inviting them to checkout the PWA available at your dedicated sub-domain name. They have the option to ignore the message and continue browsing the responsive desktop theme. However, if they choose to use the PWA, next time they're accessing yourdomain.com they'll be automatically redirected to the PWA (https://app.yourdomain.com\.
Progressive Web Apps are single-page applications available at an URL, just like any other webpage. For all the reasons described above, the main benefit of a progressive web application is that it offers the same app-like experience within a browser. In other words, there's no longer the obligation/requirement to submit the application to App Stores for your mobile users to download/install.
However, you do have the option, if that's really what you want, to package the PWA into a hybrid application using PhoneGap and submit it to Google Play and Apple Store.
✓ Worthy of being on the home screen
✓ Increased engagement
When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.
Web push notifications helped eXtra Electronics increase engagement by 4X. And those users spend twice as much time on the site.
✓ Work reliably, no matter the network conditions
✓ Improved conversions
Service workers enabled Konga to send 63% less data for initial page loads, and 84% less data to complete the first transaction!
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%.