Progressive Web Apps

The Sweet Middle Ground Between Native Apps and Web Apps

Lawrence Hon
The Wonderful World of Code
3 min readJun 7, 2018

--

Progressive Web Apps are a relatively new idea, however, its development can change how we interact with the web on our phones. At its core, Progressive Web Apps (PWA) are a form of web application that allow for seamless access to the web from a mobile device without downloading a native app from a store (i.e., Google Play store and Apple’s App Store). PWAs bridge the gap between the tailored feel of a native app with the extensiveness of the web. PWA’s allow a user to tap an icon on their screen, much like an app, and be taken to the website on their device’s browser. The experience will be different than if you were to just go to the website using Chrome or Safari. The nature of how PWA’s are developed allow for a faster and smoother user experience.

No Internet? No Problem!

Among the most exciting aspects of PWAs is its ability to work offline. Service Workers, in conjunction with the Cache API, allow for that functionality. In essence, service workers act like a middle person interacting with a web application, a browser and the network. Features like push notification and background sync utilize service workers when there is no internet connection. Service workers run separately from the application they are associated with which means even when an application is not active, service workers can still update information. This allows a user to view a previously visited site without internet.

Web Manifest

The utilization of a web manifest allows for PWAs to work across all platforms and the web app will feel like a native app rather than a website. A web manifest is JSON text file that contains information about the web app such as the name, description, CSS characteristics, icon picture size etc. This file lets developers develop the PWA for all platforms.

Native Characteristics

  • Tailored user experience for your platform
  • Push notifications

Web App Characteristics

  • Vastness of the web
  • No download necessary
  • No update necessary

Examples

  • Twitter Lite
  • Flipkart
  • AliExpress
  • The Weather Channel
  • Google Photos

Why Should We Care?

  • Small download size (you’re only downloading an icon that links to the app)
  • Can be used with non existent or very slow/limited data coverage
  • Accessibility across all platforms regardless of platform (i.e., browser, OS)
  • Faster load times

--

--