Add PWA support (#1086)

## Motivation for the change, related issues

We want to [make Playground available
offline](#133).
This PR is a first step and adds support for installing Playground as a
PWA. Offline support will be implemented separately.

## Implementation details

The PR adds a `manifest.json` file and loads it on the Playground
website. This allows browsers to install Playground as a PWA

## Testing Instructions (or ideally a Blueprint)

- Checkout this branch
- Open Playground in [a browser that supports PWA
installing](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#browser_support)
- Confirm that you can install Playground as a PWA

packages/playground/website/index.html

@@ -21,6 +21,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link rel="stylesheet" href="/src/styles.css" />
+		<link rel="manifest" href="/manifest.json" />
 		<script
 			async
 			src="https://www.googletagmanager.com/gtag/js?id=G-SVTNFCP8T7"

packages/playground/website/manifest.json

@@ -0,0 +1,32 @@
+{
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone",
+	"scope": "/",
+	"start_url": "/",
+	"short_name": "WordPress Playground",
+	"description": "WordPress Playground",
+	"name": "WordPress Playground",
+	"icons": [
+		{
+			"src": "/website-server/logo-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/website-server/logo-256.png",
+			"sizes": "256x256",
+			"type": "image/png"
+		},
+		{
+			"src": "/website-server/logo-384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		},
+		{
+			"src": "/website-server/logo-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

packages/playground/website/manifest.production.json

@@ -0,0 +1,32 @@
+{
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone",
+	"scope": "/",
+	"start_url": "/",
+	"short_name": "WordPress Playground",
+	"description": "WordPress Playground",
+	"name": "WordPress Playground",
+	"icons": [
+		{
+			"src": "/logo-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/logo-256.png",
+			"sizes": "256x256",
+			"type": "image/png"
+		},
+		{
+			"src": "/logo-384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		},
+		{
+			"src": "/logo-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

packages/playground/website/vite.config.ts

@@ -146,6 +146,23 @@ export default defineConfig(({ command, mode }) => {
 					}
 				},
 			} as Plugin,
+			/**
+			 * Copy the `manifest.json` file to the `dist/` directory.
+			 */
+			{
+				name: 'manifest-plugin-build',
+				apply: 'build',
+				writeBundle({ dir: outputDir }) {
+					const manifestPath = path('./manifest.production.json');
+
+					if (existsSync(manifestPath) && outputDir) {
+						copyFileSync(
+							manifestPath,
+							join(outputDir, 'manifest.json')
+						);
+					}
+				},
+			} as Plugin,
 		],
 
 		// Configuration for building your library.