Introduction to Progressive Web Apps (PWAs)

Image of the author

David Cojocaru @cojocaru-david

Illustration of progressive web apps

Progressive Web Apps (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Benefits of PWAs

There are several benefits to using PWAs:

  1. Reliability: PWAs can load and run even in uncertain network conditions or offline. This is possible due to the use of service workers, a type of web worker.

  2. Speed: PWAs are fast. They respond quickly to user interactions with smooth animations and no janky scrolling.

  3. Engagement: PWAs feel like a natural app on the device, with an immersive user experience. This new level of quality allows PWAs to earn a place on the user’s home screen.

Transforming a Standard Web Application into a PWA

Transforming a standard web application into a PWA involves the following steps:

  1. Service Workers: Implement service workers in your app. Service workers enable your app to load instantly, regardless of the network state.

  2. Web App Manifest: Add a web app manifest to your site. The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop.

  3. HTTPS: Serve your app over HTTPS. To ensure the security of your app, PWAs require that the server uses a secure protocol.

  4. Application Shell Architecture: Adopt the application shell architecture. This design concept separates the core application infrastructure and UI from the data. Your app will load quickly on the user’s device and update the content in a reliable way.

  5. Responsive Design: Ensure your app fits any form factor: desktop, mobile, tablet, or whatever comes next.

  6. App-Like Interactions: Make your app feel like a native app on the device, with an immersive user experience.

  7. Push Notifications: Use push notifications to re-engage with your users.

Conclusion

PWAs are a new type of web application that combines the best of web and mobile applications. They are reliable, fast, and engaging. They are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.