More PWA functions

[Zac0511]

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.

[Zac0511]

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"
  ]
}

[jelveh]

Thanks for the suggestion! I just pushed a commit implementing these. ✌️