# Progressive web app

> A website that can be installed and used like an app, even offline.

- Level: Intermediate
- Topics: Software
- URL: https://tidbit.legios.com.ar/progressive-web-app/
- In Spanish: [Aplicación web progresiva](https://tidbit.legios.com.ar/es/progressive-web-app/)

A **progressive web app** (PWA) is a website built so it can behave like an installed app. You visit it in the web browser, tap "Add to home screen" or "Install", and from then on it opens from its own icon, in its own window, without the address bar. Underneath it is still HTML, CSS and JavaScript served from a URL.

Two pieces make that possible. A **web app manifest** is a small JSON file with the app's name, icon and colors, which tells the device how to install it. A **service worker** is a script the browser runs in the background, between the page and the network: it can keep copies of files and data in a cache so the app opens without signal, and it can receive push notifications. PWAs must be served over HTTPS.

The appeal is one codebase for every device, no app store review, and updates that arrive the next time the user opens it. Twitter, Starbucks and Uber have all shipped PWAs, often to reach people with cheap phones or patchy data. The limits are real too: iPhones support PWAs with fewer features than Android, and some hardware access is still easier from a native mobile app.

## An analogy

A food truck that can also park and become a small restaurant. Same kitchen and same menu, but once it settles on your street it has a sign, a door and a pantry that keeps working when the supply truck is late.

## Keep in mind

- A website that can be installed to the home screen and opened in its own window.
- The manifest describes the app; the service worker handles offline caching and notifications.
- Requires HTTPS and updates like a website, without an app store.
- Support varies: iOS offers fewer PWA features than Android and desktop browsers.

## Go deeper

- [Progressive web apps (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
- [Progressive Web Apps (web.dev)](https://web.dev/explore/progressive-web-apps)
- [Progressive web app on Wikipedia](https://en.wikipedia.org/wiki/Progressive_web_app)

## Related terms

- [Website](https://tidbit.legios.com.ar/website/): A set of web pages under one address, stored on a server and opened in a browser.
- [Web browser](https://tidbit.legios.com.ar/web-browser/): The app that fetches web pages from the internet and draws them on your screen.
- [HTML](https://tidbit.legios.com.ar/html/): The text format that describes what is on a web page: headings, paragraphs, links.
- [CSS](https://tidbit.legios.com.ar/css/): The language that decides how a web page looks: colors, fonts, spacing, layout.
- [JavaScript](https://tidbit.legios.com.ar/javascript/): The programming language that runs inside web pages and makes them interactive.
- [URL](https://tidbit.legios.com.ar/url/): The full address of something on the web: protocol, site and path.
- [JSON](https://tidbit.legios.com.ar/json/): The plain-text format programs use to hand each other structured data.
- [Caching](https://tidbit.legios.com.ar/caching/): Keeping a copy of an answer close by so you do not have to work it out again.