A PWA (progressive web application) requires
- Must be hosted on a secure HTTPS server
- Localhost can be used for developement
- A HTML start page.
- A javascript service worker.
- A manifest.json file.
- At least one icon.
1. Web Application's Install and Start Page HTML
The HTML of the application page where the application is to be installed from needs a link tag to the manifest file and register a service worker. These can be two seperate pages and at the minimum one.
The PWA technically requires nothing else from the application page. It is normal for the service worker and the manifest to be in the root directory but not a requirement, (although it would keep things simpler). The name of the html page should be something like start.html, (or application-name.html), For the purposes of navigation, (and cacheing), but not a requirement.
A service worker can be used on a website without a creating a web application, without a manifest file -- One use case for a service worker is to receive push notifications, which can be done to a website. But without a valid Manifest file it can not be installed as a application.
2. Service Worker
The service worker provides the "man in the middle" functionality for the application to work without an internet connection. Because of this functionality it will only work from an HTTPS or Localhost. It requires the existance of three event handlers; These functions however only need to exist for a PWA to be installable, but a lazy-service-worker.js will only work online and does not provide files from cache or create files when needed.
When registered the browser will request the manifest file, which is required for a web application to be installed. The OS will cache the icon, and set the name, (or names as a short name is also available), using the manifest file. The service worker is also cached by the OS -- the start_URL needs to be cached using the service worker, if the program is to work offline.
3. The min required Manifest File
The Manifest is a json file and must have a start_url, name, display option, and at least one icon. After the browser reads and valdates the manifest and retreves the icon/icons it will:
- fire an event, (beforeinstallprompt), in the browser window "1. Web Application's Install and Start Page HTML," If the application has not been installed. This event will pass the function that needs to be called to install the application from within the browser.
- On validation it will show as installable using an icon in the search bar and menu item entry, if the application has not been installed.
Installable from a install banner
The javascript on the page needs to listen for the "beforeinstallprompt" to install itself from the web page instead of the browser menu.