Minimal PWA
Publication date: 2023-02-27Every 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:
{
“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
192x192and512x512pixels for Android devices and180x180pixels 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:
‘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) {
console.log(SW: send 'claim' message to the clients.);
evt.waitUntil(
self.clients.claim()
);
}
function onFetch(evt) {
async function cacheOrFetch(req) {
const cache = await self.caches.open(CACHE_STATIC);
const cachedResponse = await cache.match(req);
return cachedResponse ?? await fetch(req);
}
console.log(SW: fetch '${evt.request}'.);
evt.respondWith(cacheOrFetch(evt.request));
}
function onInstall(evt) {
async function cacheStaticFiles() {
const cacheStat = await caches.open(CACHE_STATIC);
await Promise.all(
FILES_TO_CACHE.map(function (url) {
return cacheStat.add(url).catch(function (reason) {
console.log('${url}' failed: ${String(reason)});
});
})
);
}
console.log(SW: cache app shell on install.);
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.
<!DOCTYPE html>
…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 APIs, 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.