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
- Registration: The browser tells the service worker where the script lives.
- Installation: The browser installs the worker. This is usually where you cache static assets.
- Activation: The worker starts controlling the page.
Example: Registering a Service Worker
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)
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
- Capable: It can do things native apps can do (Camera, Geolocation, Push Notifications).
- Reliable: It loads instantly and never shows the "Downasaur" (offline) screen, thanks to Service Workers.
- 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.
{
"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