Basic Manifest File Layout

As technology develops, the line between website and app gets blurrier which each passing year. Progressive Web Apps or PWA’s are an attempt to bridge the gap between app and website. Google promotes PWAs so heavily that when you run a google lighthouse audit (formerly google page speed) on your website you’ll receive negative score for not having PWA compatibility.

For any aspiring web designer, religiously following google’s best practices is the best way to jump start your SEO. From the chrome console (press F12) you navigate to ‘Audits’ and run a test of your website. Getting this score as high as possible is key to building any modern website.

You can learn more about PWA’s here: https://developers.google.com/web/fundamentals/web-app-manifest

In order to have a valid PWA you need a manifest.json file in the root of your website.

#an example of a valid manifest.json file for use with this website
{
  "name": "David Lionheart",
  "short_name": "Lionheart",
  "lang": "en-CA",
  "start_url": "https://davidlionheart.com",
  "display": "minimal-ui",
  "theme_color": "#01407f",
  "icons": [
    {
      "src": "https://davidlionheart.com/wp-content/uploads/2018/01/homescreen_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://davidlionheart.com/wp-content/uploads/2018/01/homescreen_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "https://davidlionheart.com/wp-content/uploads/2018/01/homescreen_48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
        "src": "https://davidlionheart.com/wp-content/uploads/2017/01/david_lionheart_favicon_600.png",
        "sizes": "600x600",
        "type": "image/png"
    }
  ],
  "background_color": "#0266cb",
  "orientation": "portrait"
}