What is the download button on a URL?

Recently at the top of webpages, I've been seeing a lot of these (image below). And I want to know what code it takes to accomplish this same result of being able to download my site or pin it like a app?

Solution

That download button is the "Install Progressive Web Application" (PWA) button. It appears on sites that have the appropriate metadata for Chrome to recognize them as a PWA.

Here's a tutorial: https://tudip.com/blog-post/how-to-turn-a-website-or-web-application-into-pwa-with-example/

Basically, you need a manifest.json in the root of your website, and your index.html needs this in the <head> tag:

<link rel="manifest" href="manifest.json">

The manifest itself should look something like:

{
  "name": "PWA-App", // installation name
  "short_name": "PWA", // app title name
  "start_url": ".",
  "theme_color": "#4287f5",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons":[
    {
      "src":"images/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src":"images/logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Chrome's dev tools have an Application tab which will appear if you've done it correctly.