# Service Workers and PWA

**Progressive Web Apps (PWA)** are web applications that use modern web capabilities to deliver an app-like experience to users. The core technology that powers the most critical features of a PWA (like offline support) is the **Service Worker**.

## 1. Service Workers

A Service Worker is a script that your browser runs in the background, separate from a web page. It opens the door to features that don't need a web page or user interaction.

### Key Features
*   **Network Interception:** It acts as a network proxy. It can intercept network requests made by the page and decide whether to serve a cached response or go to the network.
*   **Offline Support:** By caching assets, it allows the site to load even without an internet connection.
*   **Push Notifications:** It can receive push messages from a server even when the tab is closed.
*   **Background Sync:** It can defer actions until the user has stable connectivity.

### Lifecycle
1.  **Registration:** The browser tells the service worker where the script lives.
2.  **Installation:** The browser installs the worker. This is usually where you cache static assets.
3.  **Activation:** The worker starts controlling the page.

### Example: Registering a Service Worker

```javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful');
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
```

### Example: Intercepting Requests (`sw.js`)

```javascript
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // Return cached response if found, else fetch from network
      return response || fetch(event.request);
    })
  );
});
```

## 2. Progressive Web Apps (PWA)

A PWA is not a specific technology, but a set of best practices and APIs that make a web app feel like a native app.

### Three Pillars of PWA
1.  **Capable:** It can do things native apps can do (Camera, Geolocation, Push Notifications).
2.  **Reliable:** It loads instantly and never shows the "Downasaur" (offline) screen, thanks to Service Workers.
3.  **Installable:** It can be installed on the home screen and run in a standalone window.

### The Web App Manifest
To be installable, a PWA needs a `manifest.json` file. This JSON file tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop.

```json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/ajax-fetch]]
[[programming/javascript/vanilla/web-storage]]