Progressive Web Apps (PWAs) have revolutionized the way we interact with online content. By installing them on our devices and using them as traditional websites in web browsers, PWAs need to adapt to different environments and user expectations. In this article, we'll explore best practices to ensure your PWA is exceptional.

Adapt to All Browsers

One of the most critical aspects of PWA development is ensuring compatibility across various browsers and operating systems. To achieve this, you should test your app thoroughly to identify potential issues. Feature detection allows you to deliver a usable experience to the broadest audience by catering to a wide range of users.

Feature detection also enables Progressive Enhancement, a design philosophy that focuses on delivering a great experience to as many users as possible. By making the core functionalities of your app work universally first and then enhancing the experience for supporting devices, you can ensure seamless interactions.

For instance, handling form submissions with the HTML

element ensures that the form works on all browsers, including those that don't support JavaScript. You can then progressively enhance the form by adding client-side validation and JavaScript-based submission handling for a better experience on compatible devices.

Adapt to All Devices

In addition to testing across various browsers, it's essential to test your PWA across different devices. Responsive design is crucial to ensure that your app is accessible on any screen size. By rearranging content at different viewport sizes, you can prioritize important data and actions.

Ensure that users can interact with your application no matter how they access your content. Support keyboard and mouse, as well as touch or stylus input methods. Make sure all your application features can be accessed through any input method. Additionally, use semantic HTML elements rather than recreating your own buttons or form elements, as these support all user input methods right out of the box.

Provide an Offline Experience

Users of installed apps expect them to always work, even when connected to a slow or unreliable network or when their device is completely offline. To provide an app-like experience, you should provide a custom offline page that informs users they are offline instead of showing the generic browser error page.

You can create a custom offline page by using a service worker to intercept network requests and respond with the custom offline page when the user is offline. This ensures a consistent experience across browsers and devices, keeping users engaged with your app.

Offline operation also plays a crucial role in providing an app-like experience. Your PWA should function when the user is offline, allowing them to continue using some or all of your app's functionality without interruption.

Support Deep Links

Deep links are hyperlinks that point to specific pages within your app's domain. By making different sections of your app available via unique URLs, you can allow users to bookmark, navigate directly to, and share specific content within your app. This feature also enables search engines to index your app's content and make it discoverable through web searches.

Make it Fast

Users have high expectations for installed apps in terms of speed and responsiveness. The longer it takes for your app to respond, the more users will abandon it. There are tools, APIs, and best practices that help measure and improve performance. To learn more about optimizing your PWA's speed, see web performance.

Make it Accessible

Accessibility is crucial to ensure everyone can use your app, regardless of an individual's abilities or the device they use to access your app. Accessibility ensures that as many people can use your app as possible. It also often leads to a better user experience for everyone, not just those with permanent or temporary disabilities.

Provide an App-Like Experience

To provide an app-like experience, integrate your PWA with the operating system in some way. For example, you can:

  • Use the Notifications API to send notifications to the user's device
  • Handle files with the file_handlers web app manifest member
  • Display badges on the app icon
  • Enable data sharing between apps

Many of the web app manifest members can be used to customize the way your app is displayed on the user's device and integrate more deeply within the operating system.