Progressive Web Applications, Part 1: the New Pack Mule of the Internet
****A mule is the hybrid offspring of a male donkey and a horse. This new species is stronger and better equipped than the species from which it comes. Overall, mules tend to be healthier, more sound, and live longer than horses. They are favored over horses in mountainous terrain because the mule has a reputation for being more surefooted than their equine cousins. Finally, mules do not require expensive grains, eat less and don’t tend to overeat as horses do.
Progressive Web Applications are the new hybrid mules of the Internet!
What Are Progressive Web Applications (PWA)?
With PWAs (again, think hybrid mule), developers take the best of native applications and the best of Web applications, and combine them into a “new” and “better“ user experience. As mobile devices became more popular, the choice has been native or web mobile applications, with the goal being to create the best user experience at an acceptable price.
Native Applications – Designed in a native language for a single operating system, native apps are the most customizable and take advantage of the device’s hardware, (the device’s “native” features) with high performance. However, mobile native applications are expensive to build, test and support as they are OS- and (in many cases) device-specific and are often required to be released through an app store.
Progressive Web Applications – PWAs have been able to take the best of both worlds and combine them into a hybrid application that is fast (with or without a fast network connection), can work across devices, and does not need to be distributed through a store as it is as linkable and shareable as a web page.
How do PWAs Work?
These three components create a browser wrapper for PWAs:
Peanut/Content – This is the core Web HTML page content.
Chocolate/Presentation – This is the middle tier that contains the CSS
To pull the PWA together we need to add in the service worker and the web App manifest.
The Service Worker
To save these resources, the Web page registers the service worker with the browser; then, the web page no longer goes to the web server but instead goes to the service worker for updates. Additionally, the service worker responds to push notifications from the Web Server and maintains cached data to the application.
The Web App Manifest
The Web Application Manifest is a JSON script that makes it possible for the Web application to assign a home screen icon, theme and background color to the app, define a splash screen, and run the web app in full-screen mode as a standalone application.
In the coming weeks, we’ll explore some of the benefits and challenges of using PWAs and some real world examples. Stay tuned!