What is a PWA and How to build one?
Introduction
PWA or Progressive Web App have been in conversation for the past few years but only recently most companies have started switching to it. Why? Because PWAs are better than the mobile web and offer a much faster, reliable and engaging experience. If implemented well, they offer an integrated/immersive mobile experience — of course with some limitations.
PWAs are not the replacement for native apps — that’s not possible. Native app experience will always be better than PWAs, at least for most cases where the native features are used extensively. PWAs are certainly better than mobile web implementations. So for most companies who are investing in mobile web — the question is why not PWAs?
PWA Case Studies & Benefits
Let’s review some of the PWA implementations before we move forward
- This 2017 PWA Performance Case Study from Pinterest clearly puts in PWAs in the list of to-dos for companies with a mobile web presence
2. Nikkei 2018 case study also showcases significant gains
You can check out more PWA case studies at PWAStats or at Web Showcase.
PWAs enable app-like experience on the web for users. User can work offline, see cached content and receive notifications. In contrast to store based apps, PWAs do not require any installation. Users can browse to the website and pin it on their home screen. PWAs also allows engineering teams to push new features and UX without the need for the users to update apps.
PWA Definition
As defined on Google Developer site, Progressive Web Apps are user experiences that have the reach of the web, and are:
- Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging — Feel like a natural app on the device, with an immersive user experience
You can review the official checklist of what it takes to be a PWA here. This is the basis of PWA audit by Google’s open-source tool Lighthouse.
PWA Components
A PWA will consist of the following components
- Manifest — It defines how the application is displayed to the user and how it gets launched. All metadata related to the app is also defined here — starting URL, full and short name, link icons, splash screen and so on.
- Service Workers — Service workers enable offline work mode, background syncs and push notifications. Caching and storage APIs available to service works allow pre-caching of content. As defined on Google developer, a service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Service workers provide these features
(a) Intercept HTTP/HTTPS requests — this allows the serving of data from the cache, local data store or network
(b) Hooks into the underlying operating system thereby enabling a response to events from OS- as a result, push notifications can be handled too.
(c) Background event handling thereby allowing offline work.
3. Application Shell Architecture — Core design elements that allows the application to run without connection form the shell. This allows the separation of static and dynamic content. If the application shell has been cached by the service worker, then on repeat visits the app shell allows you to get meaningful pixels on the screen really fast without the network. Application Shell is not mandatory but is the recommended way to build PWAs.Here the Google Developer guidelines for application shell
The app shell should:
- Load fast
- Use as little data as possible
- Use static assets from a local cache
- Separate content from navigation
- Retrieve and display page-specific content (HTML, JSON, etc.)
- Optionally, cache dynamic content
Most PWAs are built using an Application Shell Architecture. For building the app shell, a mix of SSR (Server side rendering) and CSR (Client-side rendering) can be used. Another approach of building a PWA will be to use Streams API (experimental as of now).
PWA Pros
In addition to increasing user engagement and overall user experience, some more pros of PWAs include easy updates, better indexing and searchability (as compared to native apps), universal access, offline-first approach resulting in data savings for end-users.
How to build a PWA?
If your app does not leverage core native features like camera, sensors — it’s better to stick to a PWA. It saves development and maintenance cost without impacting the user experience. PWA can be created using any Javascript framework — Angular, React, Vue, Svelte, ReactPWA or Preact.
There are many tools available to build PWAs. Workbox, for instance, is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build PWAs. Tools like PWA builder provide a score out of 100 for PWA readiness on three aspects — manifest, service workers and security. It can be used to generate a boilerplate manifest, script tags for service workers and some more files to build a PWA. There is also a 35 min guideline document from Google to help developers in migrating existing sites to PWA.
If you offer a complex mobile web experience or your mobile web experience consists of a number of features, you can break up the functionality in multiple micro-apps.
Application shell can have core functionality common to all apps, common library can have code for repeatable use cases or components that can be used across micro-apps.
Many open-source projects are also available for those who are want to start with PWA. Here are some open-source projects/articles related to building PWAs for reference
About the Author
Arpit is a seasoned technologist with vast experience in leading large cross-functional and cross-geography teams. Arpit also consults clients on competitive market analysis, defining MVPs, product ideation, product monetisation and go live strategies.
Arpit believes we should all contribute back to society. He has set his goals for social work in five broad areas. You can read more about the same in his blog post “Do Good, Together” on Tumblr. Arpit is interested in working with people who want to contribute towards the same goals.
You can follow Arpit on Linkedin and Twitter
ABC. Always be clappin’.
