ID-458 Removed manifest stuff and explained it with example in getting-started

Author: WarwickGoatee

docs/assets/pwa/manifest.json …etting-started/progressive-web-apps.htmldocs/assets/pwa/manifest.json renamed to docs/_includes/getting-started/progressive-web-apps.html docs/assets/pwa/manifest.json renamed to docs/_includes/getting-started/progressive-web-apps.html

@@ -1,3 +1,10 @@
+<h2 id="pwa" class="page-header">Progressive Web Apps</h2>
+<p>We've included icons to help you set up your application as a Progressive Web App (PWA) if you want. You'll find them
+in the images folder with the form <em>pwa-icon-[size]x[size].png</em>.</p>
+
+<p>Here's an example of a PWA manifest.json file you can update and use for your application:</p>
+
+<pre>
 {
   "short_name": "ID7",
   "name": "ID7 - University of Warwick brand",
@@ -22,18 +29,7 @@
   "scope": "/",
   "theme_color": "#A499F4",
   "description": "Standalone app for University of Warwick's ID7 brand",
-  "screenshots": [
-    {
-      "src": "/dist/images/screenshot-540x720.jpg",
-      "type": "image/jpg",
-      "sizes": "540x720",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "/dist/images/screenshot-720x540.jpg",
-      "type": "image/jpg",
-      "sizes": "720x540",
-      "form_factor": "wide"
-    }
-  ]
 }
+</pre>
+
+<p>There's more you can do with PWAs if you're intending for people to actually install your app. See <a href="https://web.dev/learn/pwa?hl=en">web.dev's guidelines</a> for more.</p>

docs/_includes/header-borderless.html

@@ -37,8 +37,6 @@
 <meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
 <meta name="theme-color" content="#204f79">
 
-<link rel="manifest" href="/dist/docs/pwa/manifest.json">
-
 <title>
   {% if page.layout == "home" %}
   {{ page.title }}

docs/_includes/header-wide.html

@@ -33,8 +33,6 @@
 <link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="96x96">
 <link rel="icon" href="/dist/images/favicon-dark-mode-192x192.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="192x192">
 
-<link rel="manifest" href="/dist/docs/pwa/manifest.json">
-
 <meta name="msapplication-TileColor" content="#204f79">
 <meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
 <meta name="theme-color" content="#204f79">

docs/_includes/header.html

@@ -37,8 +37,6 @@
 <meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
 <meta name="theme-color" content="#204f79">
 
-<link rel="manifest" href="/dist/docs/pwa/manifest.json">
-
 <title>
   {% if page.layout == "home" %}
   {{ page.title }}

docs/getting-started/index.html

@@ -12,6 +12,7 @@
     {% include getting-started/template.html %}
     {% include getting-started/security-headers.html %}
     {% include getting-started/browser-and-device-support.html %}
+    {% include getting-started/progressive-web-apps.html %}
   </section>
   <aside class="col-sm-3">
     <div class="id7-docs-sidebar" role="complementary">

webpack.config.babel.js

@@ -154,10 +154,6 @@ const docsConfig = merge([
           ignore: ['*.less', '*.js'],
           to: path.join(paths.DOCS_ASSETS, 'docs/site'),
         },
-        {
-          from: './docs/assets/pwa',
-          to: path.join(paths.DOCS_ASSETS, 'docs/pwa'),
-        },
       ]),
     ],
   },