Progressive Web Apps (PWA), its got electrolytes!
The definitive guide to understanding Progressive Web Apps
What is a Progressive Web App?
Progressive web apps(PWA) are web apps that leverage the new technology capabilities built in modern web browsers(eg. Chrome), and together with best practice design patterns in app architecture and UX/UI, deliver a refined native-app like experience to users of the web apps on mobile devices.
“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” — Progressive Web Apps
So are progressive web apps just better designed web apps, or are they the something new and different altogether!?
Progressive Web apps can be thought of as the next generation of web apps! Advances in browser technology, HTML5, Javascript have enabled modern web browsers like Chrome to introduce new technology features within their browsers frameworks. Since mobile device browsing accounts for a growing audience base, these advances in browser features can be leveraged to build web apps that are optimized for the mobile device experience.
Progressive web apps(PWA) are web apps that leverage advances in browser technology, with the objective of enhancing the web app performance specifically on mobile devices, thereby delivering a superior more native-like user experience to mobile users.
“Progressive Web Apps are web apps, built using a collection of modern web technologies, good design concepts, and new Web APIs that work in tandem to provide an app-like experience on the mobile web.”
—What are Progressive Web Apps?
Why do i need a Progressive Web App?
As mentioned earlier, PWAs leverage the capabilities of modern web browsers to provide mobile users of web apps, a better user experience. Thus, compared to traditional web apps running on mobile devices, Progressive Web Apps when run on mobile devices have faster app load times, enhanced app performance even in low network latency, offline browsing capabilities, the ability to save the web app as an icon on the mobile device, and many other features that users have come to expect from native apps. Web apps built using the PWA approach, in general provide a more sophisticated native-like experience for users on mobile devices.
PWAs are web apps, only better!
PWAs also provide the ability to incorporate a host of other native like features including push notifications, etc. that can now be built into web apps.
While Progressive Web Apps leverage several browser features that optimize it for mobile devices, PWAs should not be thought of as limited to mobile web apps. The concepts of building web apps as a PWA can be equally applied to web apps that are built for desktop consumption, thereby enhancing the performance of the web app on the desktop.
Many notable web apps with large user bases are using the PWA approach to building their next version web apps. In May 2017 Twitter launched mobile.twitter.com as a PWA built with React and Node.js.
Frameworks and Support for PWAs
PWAs are supported by most modern web browsers, most notably Google Chrome, Firefox, Edge, Opera and IE10+, all of which have support for Service Workers built in them. Apple has been slow in incorporating the PWA features into its Safari browser. However in Aug 2017, Apple’s Webkit showed signs of the first bits of development on service workers, the key underlying technology for Progressive Web Apps.
React.js now supports PWA by default, which means that web apps created using React can employ service workers with an offline-first caching strategy.
Vue.js also offers a direct out of the box PWA template using “vue init pwa”.
Angular 5, released in Nov 2017 is intended to make it easier to build PWAs .
While it is too early to tell if Apple’s Webkit will support the full list of features that are part of the definition of Progressive Web Apps, including web notifications and installable apps to iOS and Mac, the implementation of the Service Workers technology is a major step in the direction of Progressive Web Apps for Apple.
Matt Asay thinks that Apple has many reasons to say no to PWAs, but they won’t allow Android to offer a better web experience.
Jason Grigsby writes, “Despite the fact that iOS doesn’t support the full feature set of Progressive Web Apps, early evidence indicates that Progressive Web Apps perform better on iOS than the sites they replace.”
What, Exactly, Makes Something A Progressive Web App?
Google has released a guideline checklist of what a web app must implement for it to be classified as a Progressive Web App. Google has divided its checklist into a Baseline PWA Checklist and an Exemplary PWA Checklist, which they summarize as follows,
Baseline PWA Checklist (by Google)
- Site is served over HTTPS
- Pages are responsive on tablets & mobile devices
- All app URLs load while offline
- Metadata provided for Add to Home screen
- First load fast even on 3G
- Site works cross-browser
- Page transitions don’t feel like they block on the network
- Each page has a URL
According to Google, these features within a web app are the criteria for a PWA Baseline Appyness.
The Exemplary PWA Checklist (by Google), further details out how the PWA should handle User Experience, Caching, Performance, Push Notifications, Indexing and Social, and some additional features.
The detailed Exemplary PWA google checklist can be found here.
Google provides a tool called Lighthouse, an open-source, automated tool that audits web apps for progressive web app features, performance, accessibility, and more. It evaluates web apps with the Google PWA checklist criteria, and provides testing tools to improve the quality of web apps.
Some developers view the Google checklist with some incredulity, and argue that it simply a collection of best practice guidelines to build high quality traditional web apps. To them the qualitative elements of the Google guidelines might as well be describing well designed traditional web apps.
So what then are the implementation distinguishing features of a Progressive Web App!?
Core tenets of a Progressive Web App
Progressive Web Apps leverage the following technology features in modern web browsers, to achieve closer parity with native apps.
- Background worker functionality with Service Workers.
- Faster load time using the App Shell design practice.
- App Manifest and home screen install support.
Service Workers
Service Workers are the technology that power the offline functionality, push notifications, background content updating, content caching, and a whole lot more within Progressive Web Apps.
Service Workers are a Javascript file, tuning the background, that act as a scriptable middleware network proxy allowing to programmatically manage the web/HTTP requests. They lie between the network and device to supply the content, and can be programmed to use cache mechanisms efficiently thereby allowing error-free behavior during offline periods.
The Service worker technology is at the core of Progressive web apps paradigm, as it allows for the implementation of several of the Baseline PWA checklist features mention by Google, including app performance during low network latency.
App Shell
The App Shell model is a design concept whereby the UI shell of the app is kept separate from the content inside it. On the initial load of a mobile web app the basic shell of the web app UI is loaded as quickly as possible, and the content for the app is loaded after. This approach improves the user’s perception of the performance and usability of the app.
With the App Shell model, the App UI shell and the content are intentionally cached separately. The App Shell leverages the Service Workers technology for the caching mechanisms.
Manifest file and Home Screen install support
Web app manifests provide the ability to save a site bookmark to a device’s home screen. The web app manifest is a simple JSON file that allows the developer to control how the web app appears within mobile device environments.
A web app manifest file typically has
- a short name(used on the home screen)
- a 192x192 png icon
- a start URL or a cached resource that loads on app start
More resources:
Getting Started with Progressive Web Apps — by Addy Osami (Google Engineer)
A Real World Progressive Web App
Let us examine a web app listed by google as an Exemplary PWA on its website https://m.aliexpress.com/ , and compare it with a well designed non PWA web app like www.medium.com.
Open the aliexpress.com site, then open the Chrome Inspect Panel, and go to the Application tab, you will see the following,
Aliexpress.com
The corresponding Application tab for the medium.com site, shows the following,
Medium.com
Clearly the aliexpress.com site implements the manifest file, along with the associated high resolution brand icons. Additionally the aliexpress site leverages other modern Web API features like Service workers and caching.
Thus, even though both are web apps, aliexpress leverages new features in modern browsers to provide a superior and refined mobile experience. While medium.com is a well designed web app and provides awesome user experience, the web app does not leverage the modern browser features.
Concluding Remarks
“Progressive Web Apps are equal parts new Web APIs, good design patterns, and marketing fluff.” — What are Progressive Web Apps?
Progressive Web apps are the new way of architecting web apps, and leverage new technology enhancements in browsers, but in the end PWA are web apps!
The debate between native apps and web apps has raged ever since the first Apple first launches its native apps.
The choice for developers has been, going the native way and learning a platform specific technology that provided packaged resources, direct access to hardware, leading to better app performance and user experience (the native experience); versus, using the most widely known technology stack, the web, but with compromises on performance and tradeoffs when leverage device capabilities (the web apps).
Progressive Web Apps intends to change that!
While in the past the mobile web app experience has been somewhat of a poor man’s compromise, in the last few years, continued enhancements in HTML5, CSS3, and JavaScript, combined with significantly more powerful web browsers, along with powerful device processors, now provide the means to remedy that.
The next generation of web apps, the Progressive Web Apps(PWA) will continue to democratize the web and lead the way!
Other resources:
The Ultimate Guide to Progressive Web Applications
Found this post useful? Hit the 👏 button below to show how much you liked it! :)
Follow me on Medium for the latest updates and posts!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
