I have a web page that I would like to display on mobile (potentially also desktop) in fullscreen or standalone without any browser controls - like address bar and back/refresh/etc buttons.
What is the minimum needed to be done to turn it into a PWA(Progressive Web App) so when I "Add to Home screen" on a mobile device it will create an icon that when clicked it will open the page in fullscreen or standalone - without any browser controls. No need to do any caching and No need to be online to use the page.
Would it also work on a desktop/laptop OS as a Chrome App?
You need 3 things:
{
"name": "MyApp",
"start_url": "./",
"icons": [
{
"sizes": "512x512",
"src": "./MyAppIcon-512x512.png",
"type": "image/png"
}
],
"//display": "standalone",
"display": "fullscreen"
}
Note - (1.) You can also serve it via HTTP from localhost. Technically requirement (1.) is for the page to be served from a trusted source which is either HTTPS over the net or HTTP/HTTPS on localhost
Note - (2. & 3.) In the example manifest we assume that the PNG Icon is 512x512; is named MyAppIcon-512x512.png and is located in the same directory with manifest.json and index.html - otherwise you should change the paths appropriately - relative to manifest.json's location or use absolute paths.
Note - Of course you should also have a
<link rel="manifest" href="manifest.json">
in the head of your index.html
As of Aug 2024 this will work as a fullscreen/standalone App on both iOS and Android and as a Chrome App on any desktop OS where Crome/Chromium based browsers run. On iOS fullscreen seems to be the same as standalone - i.e., it always shows the status bar.
Also as a general debugging strategy you should check Chrome > Dev Tools > Application > Manifest and fix all Errors in the Instalabilty section until the install button shows up when doing "Add to Home screen" on mobile or at the right end of the address bar of Chrome Desktop.