# Offline support — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-offline-support

> Enable your app to work completely offline by caching content and providing fallback pages.

## Offline-first approach

**Offline support** means serving content from cache when the network is unavailable. Use caching strategies to determine when to serve cached vs. fresh content.

## Implement offline fallback

This fetch handler serves from cache first, then the network, with an offline page fallback.

```javascript
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
      .catch(() => caches.match('/offline.html'))
  );
});
```

Output:

```
App loads from cache when online, falls back to offline page when unavailable.
```

## A common trap

Do not cache everything indefinitely. Cache only critical assets and implement strategies to update stale content.

## Building offline-first applications

Create apps that work seamlessly offline with sync on reconnect.