Progressive Web Apps (PWAs) in Astro

Learn how we can turn our Astro project into a PWA.

We'll cover the following

PWAsIt stands for progressive web apps. are a way to turn existing web applications into feeling and behaving like native mobile apps. Because creating a PWA from an already existing site requires only minor configuration, there should be no reason not to turn our project into a PWA.

What is a PWA?

PWAs are existing sites or web apps that use modern web development techniques to make them behave and feel like native mobile applications. They’re often described with three words that characterize them: they’re reliable, fast, and engaging.

  • Reliable: They’re reliable because they work in uncertain network conditions or even without an internet connection. This is achieved through the use of service workers, enabling web apps to load instantly with the help of caching.

  • Fast: Load time alone won’t make our users stay if the performance of the site is not optimal. PWAs are known for being fast, whether it comes to user interaction, animation, or just smooth scrolling.

  • Engaging: They feel like native applications on mobile devices. They’re installable through the browser without the need for an app store. Once available on the user’s home screen, they can be opened in full screen to create an immersive experience. Through the use of web push notifications, we can also reengage with users.

PWAs can grow our audience and increase the conversion rate by doing the following:

  • Making our site available on the home screen of users.

  • Increasing engagement through the use of web push notifications.

  • Working reliably regardless of network conditions, even in offline situations.

Requirements for a PWA

The steps to turn a project into a PWA are universally the same, regardless of the tech stack. This means you can follow the steps below even if your application uses a completely different setup. First, to make a project into a PWA, we need to register a service worker. Service workers help us serve our site even when the user is offline. They can do this by caching static resources that can be served from our device rather than refetching them from the server each time we visit the site.

Note: To register a service worker, our site needs to be served over HTTPS.

Our site will also need to have a web app manifest file that meets the following criteria:

  • It has a name property.

  • It has a short_name property.

  • It has a start_url property.

  • It has a display property, where the value is one of standalone, fullscreen, minimal-ui, or browser.

  • It specifies an icon that is at least 144 px by 144 px in dimensions.

The site also needs to be responsive to make it eligible for the PWA features. Once we meet these criteria, browsers will automatically prompt users to add the site as an app to their home screen.

Get hands-on with 1400+ tech skills courses.