---
title: "Minimal PWA"
description: "Every website, regardless of the platform it is initially built on, has the potential to become a PWA. Since PWA’s are built using web technologies like HTML, CSS, and JavaScript,"
date: 2023-02-27
---

Every website, regardless of the platform it is initially built on, has
the potential to become a PWA. Since PWA’s are built using web
technologies like HTML, CSS, and JavaScript, any website can be
converted into a PWA by following this guideline.

Here is a list of the minimum requirements to convert any website into a
PWA:

- **HTTPS**: The website must support HTTPS.
- **Web manifest**: The site must load the web manifest into the
  client’s browser to provide metadata about the PWA.
- **Icon**: An icon is needed to display the application on a
  smartphone’s home screen.
- **Service Worker**: JavaScript code that can process requests to the
  server and return responses if the application is offline.
- **App Shell**: HTML code that installs and starts up the PWA.

## Web Manifest

This is a simple web manifest for embedding a PWA into a smartphone — it
includes just the description, colors, icon, and addresses:

``` json
{
  "background_color": "#000000",
  "description": "Simple PWA",
  "display": "standalone",
  "icons": [
    {"sizes": "180x180", "src": "./img/favicon-180.png", "type": "image/png"},
    {"sizes": "192x192", "src": "./img/favicon-192.png", "type": "image/png"},
    {"sizes": "512x512", "src": "./img/favicon-512.png", "type": "image/png"}
  ],
  "id": "/", "name": "Simple PWA", "scope": "./",
  "short_name": "Simple PWA", "start_url": "./", "theme_color": "#000000"
}
```

## Icon

In a PWA, icons are used to represent the app on a user’s home screen,
taskbar, and app switcher. The following are the minimum requirements
for PWA icons:

- Provide icons in multiple sizes, including `192x192` and `512x512`
  pixels for Android devices and `180x180` pixels for Apple devices.
- Use a PNG or SVG format for the icons.

## Service Worker

For the application to be installed on the phone, the service worker
must provide at least offline access to the application shell. All other
resources are not required to be cached:

``` js
'use strict';
const CACHE_STATIC = 'static-cache-v1';
const FILES_TO_CACHE = ['./', './favicon.ico', './img/favicon-512.png', './index.html', './pwa.json'];

function onActivate(evt) {
  evt.waitUntil(self.clients.claim());
}
function onFetch(evt) {
  async function cacheOrFetch(req) {
    const cache = await self.caches.open(CACHE_STATIC);
    const cached = await cache.match(req);
    return cached ?? await fetch(req);
  }
  evt.respondWith(cacheOrFetch(evt.request));
}
function onInstall(evt) {
  async function cacheStaticFiles() {
    const cache = await caches.open(CACHE_STATIC);
    await Promise.all(FILES_TO_CACHE.map((url) => cache.add(url).catch((reason) => {
      console.log(`'${url}' failed: ${String(reason)}`);
    })));
  }
  evt.waitUntil(cacheStaticFiles());
}
self.addEventListener('activate', onActivate);
self.addEventListener('fetch', onFetch);
self.addEventListener('install', onInstall);
```

## App Shell

The app shell is the main file of your site — typically `index.html`.
This file should instruct the browser where to find the web manifest and
how to install the service worker.

``` html
<link rel="manifest" href="./pwa.json">
<script>
if ('serviceWorker' in navigator) {
  self.addEventListener('load', async () => {
    const container = navigator.serviceWorker;
    if (container.controller === null) await container.register('sw.js');
  });
}
</script>
```

## Conclusion

Almost any website can be converted into a PWA by following the
guidelines described in this post. However, the “*minimal PWA*” only
enables the placement of the website’s icon on the smartphone’s home
screen. To fully utilize the capabilities of modern [Web
API](https://developer.mozilla.org/en-US/docs/Web/API)s, a web
application must be built with offline functionality, client-side data
storage, and computation in mind from the start.

Service Workers and PWA autonomy are one expression of how a browser
sustains application behaviour between runs. The broader model appears
in [Browser as an Operating System for Developing Modern
Applications](/en/books/browser-as-operating-system.html).