When it comes to creating a successful Progressive Web App (PWA), several key factors come into play. In this article, we'll dive into what makes a good PWA and how you can create an exceptional user experience.
Core Features of a Good PWA
A PWA is built with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. To get started, follow the core and optimal checklists and recommendations to guide you.
Performance Matters
Speed plays a critical role in the success of your PWA. In fact, as page load times increase from one second to ten seconds, the probability of a user bouncing increases by 123%. Performance doesn't stop with the load event; it affects your entire experience, in both how your app behaves and how users perceive it.
To optimize for user-centric performance metrics, focus on optimizing your PWA for fast load times. You can use Lighthouse's performance audits based on Core Web Vitals to get real-world performance data for your web app.
Browser Agnosticism
PWAs are web apps first, which means they need to work across browsers. To achieve this, identify the core features of your app and make those features available using the simplest possible technology. Enhance the experience where possible by adding CSS and JavaScript.
Use feature detection to deliver a usable experience for the widest possible range of potential users, including those using browsers and devices that don't exist yet. You can find more information on this topic in Jeremy Keith's Resilient Web Design.
Responsive Design
Users expect your PWA to work seamlessly across various screen sizes. To achieve this, ensure that all content is available at any viewport size. The tasks users want to complete and the content they want to access don't change with viewport size; you can rearrange your content for different viewport sizes and it should all be there, one way or another.
For more information on responsive design, refer to resources such as Ethan Marcotte's original article, a collection of important concepts related to it, and books galore.
Offline Capabilities
When users are offline, keeping them in your PWA provides a more seamless experience than dropping back to the default browser offline page. To provide a custom offline experience, precache a custom offline page during a service worker's install event. Read Create an offline fallback page to learn how to implement it yourself.
Installability
Installing a PWA lets it look, feel, and behave like all other installed apps. It's launched from the same place users launch their other apps. To make your PWA installable, follow best practices for creating a seamless user experience that rivals native apps.
By incorporating these core features into your PWA development, you'll be well on your way to creating an exceptional user experience that will keep your users engaged and coming back for more.