davidventer Resident
The Browser Based viewer works great on iPadOS with Magic Keyboard and Mouse (or any bluetooth keyboard and mouse). Running it in safari however, takes up valuable space when the Safari tab and address bar is still visible. This can be hidden manually, but must be done manually each time. There is a better way to do this. You can add simple code to the zero.secondlife.com site that turns it into a Web App when added to the Home Screen.
The Browser Viewer can currently be saved to the Home Screen (Share -> Add to home screen) but without the Web App code, it just launches in a new Safari Tab with other tabs and the address bar still in the way. Using this code you can set it to launch in it's own dedicated Safari window without the tabs and address bar getting in the way...
  1. Create a Web App Manifest File
You need a manifest.json file. It tells iPadOS how to behave when the site is added to the Home Screen.
Create a file called manifest.json in your site’s root, and put something like this inside:
{
"name": "Your App Name",
"short_name": "App Short",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Important bits:
display: "standalone" makes it open like an app, no Safari UI!
start_url: "/" is your homepage when opening from Home Screen.
icons is what it will show instead of a boring letter.
  1. Link Your Manifest in HTML
In your site's <head>, add this:
<link rel="manifest" href="/manifest.json">
  1. Apple-Specific Touch Icon
Because Apple likes being a little stubborn.. you also need special <link> tags for the app icon:
<link rel="apple-touch-icon" href="/icon-192.png">
  1. Apple-Specific Meta Tags
Still in the <head>, add these spicy little meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Your App Name">