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:
- Serve the page over HTTPS
- At least 1 PNG icon of size at least 144px x 144px
- The following minimal manifest file:
{
"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 512×512; is named MyAppIcon-512×512.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.