Are PWA's the Future of Web Dev?
Whether you heard “PWA” in discussions with colleagues and wondered just what a progressive web app is, or you are a seasoned developer curious as to why a growing number of well-known brands like Starbucks, Twitter, Instagram, Pinterest, & Uber have implemented PWA’s in production, you’ve come to the right place. This article aims to demystify the growing trend towards progressive application architectures and what advantages they may provide for your project or company. Let’s dive in.
What problem does the PWA solve?
Before Ryan Dahl’s NodeJs, frontend and backend engineers occupied two different “worlds”. They didn’t speak the same language. NodeJs solved that by allowing engineers to write full stack applications in Javascript, making it far easier to bring an app to market without the need for as many engineers or as many moving pieces. Not only did it make the development experience more coherent, it also freed up time and resources that were previously “lost in translation”. By embedding the V8 engine outside the browser, JS developers could now write fully functioning backend logic themselves. Fast forwarding to today, modern teams face a similar problem in the event the company requires both mobile native and web experiences; development resources are tied up juggling multiple repos with completely different technologies, requiring diverse expertise and increasing time to market exponentially. In a nutshell, developing across different stacks for the browser and mobile native apps is hard, it requires diverse expertise and elbow grease.
In parallel, when envisioning a new project and outlining the tech stack in broad strokes, one of the most important considerations at the outset is the type of device you expect your user to consume your application on. The answer tends to drive the technical roadmap of the product, either pushing developers towards native mobile application technologies like Swift and Objective-C, or driving the team towards their web stack of choice (mainly MEAN, MERN, or JAMStack these days). This is due to the fact that until recently, only mobile native technologies gave you access to device level functionality that was traditionally inaccessible to the web. Until now…
What is a PWA?
A progressive web app is essentially a collection of technical implementations that allow developers to get native-like functionality from the web, unifying the stack and eliminating the need for the separation between web and mobile development. PWA’s have many of the sought-after capabilities of native apps, such as system notifications, resource caching, and access to the microphone and camera, all from the web. At a high level, this is done through…
Service workers
Service workers are programs that get “left behind” when a user closes the browser. What this means is that the Javascript in the service worker sits decoupled from the browser’s execution context, operating on what’s called a different “thread”. In practice, this allows PWA’s to display system level notifications, intercept requests, interface with web push API’s and a whole host of other capabilities previously inaccessible to a traditional web app. Moreover, the user can add the web app to their home screen just like any mobile app downloaded from the app store and will not see the surrounding browser UI. For all intents and purposes, the user will experience the application as if it were native.
Advantages
Unified Stack
Using a PWA has a lot of built-in advantages, the most obvious of which is that your team operates with one stack, with one repo to troubleshoot and debug. This alone is worth the effort to switch with respect to time, energy, and headaches saved. Saving yourself the hassle of implementing enterprise grade CI/CD pipelines, testing suites, and cloud configuration for multiple repos is life-changing.
Less Friction
There are two types of friction that the PWA solves. The first is the App Store, which puts unnecessary clicks and actions between a user deciding to buy and having your product in their hands. With a PWA, there is no need to visit the App Store, users may add your product to their home screen directly from the website, bypassing the App Store completely. The second is the lengthy and largely arbitrary process of application reviews and approvals by the powers that be. Rigorous application standards and tyrannical guidelines imposed by Apple, Google etc. become a thing of the past. No more sharing a large percentage of your profits simply for the privilege of selling your own product. You are free!
Offline support, performance, and the meaning of “Progressive”
The work “progressive” is used for a reason. PWA’s are meant to be gradually implemented over time in keeping with a gradual transition from a traditional website or web app. There is nothing forcing a wholesale conversion into a fully-fledged mobile experience. In the case where a traditional web app or website is all that’s needed, a service worker implementation can do wonders to your first-contentful-paint (FCP) time and other critical aspects of both conversion and the user experience. Content for blogs and other styles of content delivery can be stored for offline use, and large resources that traditionally increase load times such as videos and images can be cached locally for subsequent visits. In short, these are changes that can be made slowly over time without interrupting the service that is currently online.
Disadvantages
Limited device level access
While support for native-like functionality from the browser grows by the day, there are still operations and functionality that are only accessible to native applications. While most any traditional web app or website can certainly benefit from the addition of a service worker and simple caching strategy, there most certainly are use cases where a native application is a necessary evil. One prime example is the complete inability to use Bluetooth, which is necessary for indoor geolocation among other things. Another is the limitations imposed on 3D UI design and some dependence on internet connection for data.
Parting thoughts
Like any new technology, there are always associated tradeoffs. I hope that this article proves useful in understanding how to properly contextualize the use of PWA architectures in your future projects. If I missed something or failed to highlight a key point, please reach out with what you’ve got!
Additional reading
If you're interested in this article, check out some awesome reference material below!
Related resources: