Installable Web Apps - Topic 22

Installable Web Apps are advanced Progressive Web Apps (PWAs) that provide users with a native app-like experience directly through the web. This lesson focuses on the fundamentals of creating an installable web app, emphasizing the requirements and best practices for deployment.

What is a PWA?

A Progressive Web App is a type of application software delivered through the web, built using common web technologies like HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant browser.

Installation Manifest

The web app manifest is a JSON file that provides metadata about the application (name, icons, start URL, etc.) and is essential for making the web app installable.

1. Create a Manifest File

{
    "name": "My App",
    "short_name": "App",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon/192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icon/512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

2. Link the Manifest in HTML

<link rel="manifest" href="/manifest.json">

3. Register a Service Worker

Service workers act as a proxy between your web app and the network, enabling offline capabilities and caching strategies.

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

4. Add Offline Functionality

In your service worker script, include caching strategies to allow your app to function offline.

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/icon/192x192.png',
                '/icon/512x512.png',
            ]);
        })
    );
});

5. Test the Installation

Test your app in Chrome or Firefox, ensuring the manifest and service worker are registered correctly.

• Ensure your app is served over HTTPS.
• Keep the manifest file updated with accurate information.
• Optimize loading times to enhance user experience.
• Use responsive design to ensure compatibility with various devices.
• Regularly test your app across different browsers.