Advanced Installable Web Apps Topic 5

What is a Web App Manifest?

The Web App Manifest is a JSON file that provides metadata about the web application, enabling it to be installed on the user's device.

Key attributes include:

• name: The name of the app.
• short_name: A shorter name for display.
• start_url: The URL that the app opens when launched.
• display: The preferred display mode (e.g., fullscreen, standalone).
• icons: A list of icons used for the app.

Example Manifest File

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

What is a Service Worker?

A Service Worker is a script that your browser runs in the background, separate from a web page, allowing you to manage caching and background functionality.

Example Service Worker Registration

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(error) {
      console.log('ServiceWorker registration failed: ', error);
    });
  });
}

Handling Caching

Service Workers can intercept network requests and serve cached responses to improve performance.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});