How to Install Web Apps Like Native Apps Using A2HS

A2HS (Add to Home Screen) allows users to access web apps via home screen icons without entering a browser address, serving as an alternative to lower the barrier to installation when native app development resources are limited.

Three Key Conditions for A2HS Implementation

To enable A2HS, the service must be delivered over HTTPS, and a web app manifest (manifest.webmanifest) file and a service worker (sw.js) must be registered. The manifest file defines the app name, icons (minimum 192x192, 512x512 recommended), display mode (such as fullscreen), etc., in JSON format. The service worker intercepts network requests to serve cached data, but for A2HS itself, a 'shell' worker containing only an empty fetch event handler is sufficient. By specifying the manifest link in the HTML head and registering the worker via script, an install button appears in browsers like Chrome.

Custom UI and Safari Support

Developers can use the beforeinstallprompt event to create custom-designed install buttons, such as modals, and installation begins by calling the prompt method on the event object. However, iOS Safari currently does not support the beforeinstallprompt event, making custom UI impossible. On iOS, users must select 'Add to Home Screen' via the share button at the bottom of Safari.