Progress Web App

HomeScreenIcon

# meta tag for apple
<link href="https://placehold.it/152"
  sizes="152x152"
  rel="apple-touch-icon">
  
# square dimension for home screen icons for the diff devices

size  device
57    iPhone1, 2
72    ipad1,2
114   iphone 4(retina)
120   iphone 6, 7, SE
144   ipad 3(Retina)
152   ipad air, air2, mini
167   iPad pro
180   iphone 6+, 7+
128   Android regular
192   andriod high res
  
# Home Screen Icons
https://github.com/cubiq/add-to-homescreen

addToHomeScreen({
  addID: 'pwa fundamentals', // local storage name (no need to change)
  message: 'add to home?', // the message can be custom
  modal: false, // block UI until the message is closed
  mandatory: false // can't proceed if you don't add to home screen
})

manifest

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


# Manifest.json

{
  "name": "Frontend Masters",  // app name
  "icons": [
    { /* 192 square recommended for 'add to home screen' */
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    { /* 512 square recommended for 'startup screen' */
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],                 // various sizes of icon
  "theme_color": "#2d89ef"     // Title bar styling
  "background_color": "#2d89ef" // used for startup screen
  "display": "standalone"      // launch as an app
}

# Display options

* fullscreen: all available display area is used
* standalone: look and feel like a standalone app
* minimal-ui: line browser UI. doesn't have own window
* browser: conventional web app in a browser

Metadata

# Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">

width: positive integer or 'device-width'
initial-scale: positive number between 1.0 to 10.0
maximum-scale: positive number between 1.0 to 10.0
minimum-scale: positive number between 1.0 to 10.0
user-scalable: yes or no

# Fullscreen (apple specific)

* launch without the address bar and browser UI
<meta name="apple-mobile-web-app-capable" content="yes">

* black status bar
<meta name="apple-mobile-web-app-status-bar-style" content="black">

* home screen title
<meta name="apple-mobile-web-app-title" content="Frontend Master">

schema.org Metadata

<script type="application/Ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Product",
    "image": "dell-30in-lcd.jpg",
    "name": "Dell Ultrasharp 30\" LCD Monitor",
    "offers": {
      "@type": "Offer",
      "price": "$1495"
    }
  }
</script>