Progressive Web Applications or PWAs are web applications that are built using common technologies including HTML, CSS and Javascript. They are served over the web like regular web applications but are intended for cross platform use, as long as it is accessed using a standards compliant browser.
What does this mean?
This means that you will be able to access and use this web app not only on your desktop browser but also on your mobile device’s browser. Even further, you’ll be able to add a shortcut to your home screen, mimicking a native application. PWAs are able to deliver a user experience that is almost indistinguishable from a native mobile app.
Characteristics of a PWA:
- Progressive — Available to any user, regardless of browser
- Responsive — Fits any size screen
- Faster after initial loading — Takes advantage of caching to prevent re-downloading assets
- Works offline — Service workers allow offline or low connectivity use
- App-like — Feels like a native app with app-style interactions and navigation
- Fresh — Always up to date due to service worker update process
- Safe — Always served via HTTPS to prevent tampering and snooping
- Discoverable — Can be optimized to be found by search engines (SEO)
- Re-engageable — Ability to use push notifications to maintain engagement
- Installable — Provides home screen icon without going through an app store
- Linkable — Can be shared via a URL
Technical Requirements
In order to be a PWA, there are three core technical requirements. A web application must have a web manifest file, be served using HTTPS, and must register at least one service worker.
A web manifest file is a centralized file for metadata. It is a JSON text file that allows a PWA to be downloaded and dictates how a web app is presented to the user. The manifest contains information such the app’s name, author, icon(s), version, description, and list of all necessary resources.
A PWA must be served over a secure network. Many core PWA technologies, such as service workers and geolocation, require HTTPS in order to work. HTTPS prevents intruders from tampering with or passively listening on communications between your web app and users.
Service workers are scripts that run in a background thread separate from the main execution thread. They provide event driven functionality that can control the page that it is associated with, intercept and modify navigation and resource requests, and cache resources for offline use. Think of them as a worker that listens to events in the background of your app. When it is triggered by a specific event, it can perform a set of actions. For example, upon installing, a service worker can cache assets to your local storage. Then if you make a request for these assets, the service worker can pick up on the event and serve the resources from the cache instead of making a network request, allowing for offline functionality.
Pros vs Cons
Final Thoughts
Progressive web applications have the potential to be efficient apps that can rival the native app user experience. However functionality is limited compared to native apps when it comes to accessing local hardware. I hope this article has shed some light on PWAs.
