HeyPuter
More PWA functions
I've read the manifest documentation, and found some useful things that could be added to Puter's manifest file such as :
- Screenshots that shows up when the PWA gets installed
- Description that shows up when the PWA gets installed
- Shortcuts (that shows on the app icon on the real OS (like windows)) for like opening file explorer from the real os taskbar
Here's an example of an app with a description and screenshots set in his manifest file (image is in french but i will look something like that) :
I got the manifest file from DevTools, and here's a modified version of the manifest file with a description and some of the things i mentionned :
{
"name": "Puter",
"short_name": "Puter",
"display": "standalone",
"start_url": "/",
"description": "A cloud-based operating system",
"shortcuts": [
{
"name": "Open explorer",
"short_name": "Explorer",
"description": "Opens the file explorer",
"url": "TYPE THE EXPLORER OPEN URL HERE",
"icons": [{ "src": "PUT THE SOURCE HERE", "sizes": "PUT THE SIZE HERE" }]
},
{
"name": "PUT SHORTCUT NAME HERE",
"short_name": "PUT THE SHORT NAME HERE",
"description": "PUT A DESCRIPTION HERE",
"url": "PUT AN URL HERE",
"icons": [{ "src": "PUT THE SOURCE HERE", "sizes": "PUT THE SIZE HERE" }]
}
],
"icons": [
{
"src": "/favicons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/favicons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "/favicons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/favicons/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/favicons/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/favicons/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"screenshots": [
{
"src": "PUT SCREENSHOT SOURCE HERE",
"type": "PUT THE TYPE HERE",
"sizes": "PUT THE SIZE HERE",
"form_factor": "PUT THE FORM FACTOR HERE"
},
{
"src": "PUT SCREENSHOT SOURCE HERE",
"type": "PUT THE TYPE HERE",
"sizes": "PUT THE SIZE HERE",
"form_factor": "PUT THE FORM FACTOR HERE"
}
]
}
Some source and things like that are not filled, so they have the correct thing once its inside Puter's source, and some parts may be broken because i didn't tested all the code.
New update :
I've made a more optimised manifest file with the help of PWABuilder, it no longer have the screenshots part, but it can be added later.
New file :
{
"name": "Puter",
"short_name": "Puter",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "/favicons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/favicons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "/favicons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/favicons/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/favicons/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/favicons/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"theme_color": "#000000",
"background_color": "#000000",
"id": "puter",
"description": "A cloud-based operating system, working anywhere at any time.",
"dir": "auto",
"lang": "en",
"orientation": "any",
"scope": "https://puter.com/",
"categories": [
"entertainment",
"games",
"navigation",
"productivity",
"utilities"
]
}
