Cache Playground assets to enable offline support

README.md

@@ -131,6 +131,26 @@ PHP=7.4 npx @php-wasm/cli -v
 npx @php-wasm/cli phpcbf
 ```
 
+### Test offline support
+
+To test the offline support you need to build the website and run a local server:
+
+```bash
+npm run build:website
+```
+
+Then you can run a local server:
+
+```bash
+php -S localhost:9999 -t dist/packages/playground/wasm-wordpress-net
+```
+
+or using Docker:
+
+```bash
+docker run --rm -p 9999:80 -v $(pwd)/dist/packages/playground/wasm-wordpress-net:/usr/share/nginx/html:ro nginx:alpine
+```
+
 ## How can I contribute?
 
 WordPress Playground is an open-source project and welcomes all contributors from code to design, and from documentation to triage. If the feature you need is missing, you are more than welcome to start a discussion, open an issue, and even propose a Pull Request to implement it.

packages/php-wasm/web-service-worker/src/initialize-service-worker.ts

@@ -3,7 +3,9 @@ declare const self: ServiceWorkerGlobalScope;
 
 import { awaitReply, getNextRequestId } from './messaging';
 import { getURLScope, isURLScoped, setURLScope } from '@php-wasm/scopes';
-
+import { cachedFetch, preCacheResources } from './worker-caching';
+// import { logger } from '@php-wasm/logger';
+const logger = console;
 /**
  * Run this function in the service worker to install the required event
  * handlers.
@@ -13,6 +15,14 @@ import { getURLScope, isURLScoped, setURLScope } from '@php-wasm/scopes';
 export function initializeServiceWorker(config: ServiceWorkerConfiguration) {
 	const { handleRequest = defaultRequestHandler } = config;
 
+	self.addEventListener('install', (event) => {
+		try {
+			event.waitUntil(preCacheResources());
+		} catch (e) {
+			logger.error('Failed to precache resources', e);
+		}
+	});
+
 	/**
 	 * The main method. It captures the requests and loop them back to the
 	 * Worker Thread using the Loopback request
@@ -22,28 +32,28 @@ export function initializeServiceWorker(config: ServiceWorkerConfiguration) {
 
 		// Don't handle requests to the service worker script itself.
 		if (url.pathname.startsWith(self.location.pathname)) {
-			return;
+			// return;
 		}
 
 		// Only handle requests from scoped sites.
 		// So – bale out if the request URL is not scoped and the
 		// referrer URL is not scoped.
-		if (!isURLScoped(url)) {
-			let referrerUrl;
-			try {
-				referrerUrl = new URL(event.request.referrer);
-			} catch (e) {
-				return;
-			}
-			if (!isURLScoped(referrerUrl)) {
-				// Let the browser handle uncoped requests as is.
-				return;
-			}
+		if (
+			!isURLScoped(url) &&
+			!(
+				event.request.referrer &&
+				isURLScoped(new URL(event.request.referrer))
+			)
+		) {
+			// Add caching for non-scoped requests
+			event.respondWith(cachedFetch(event.request));
+			return;
 		}
-		const responsePromise = handleRequest(event);
-		if (responsePromise) {
-			event.respondWith(responsePromise);
+		const response = handleRequest(event);
+		if (response) {
+			event.respondWith(response);
 		}
+		return;
 	});
 }
 

packages/php-wasm/web-service-worker/src/worker-caching.ts

@@ -0,0 +1,86 @@
+// import { logger } from '@php-wasm/logger';
+import { isURLScoped } from '@php-wasm/scopes';
+
+const wpCacheKey = 'playground-cache';
+
+const isCacheFull = async () => {
+	if (navigator.storage && navigator.storage.estimate) {
+		const estimatedStorage = await navigator.storage.estimate();
+		if (estimatedStorage.usage && estimatedStorage.quota) {
+			return estimatedStorage.usage >= estimatedStorage.quota;
+		}
+	}
+	return false;
+};
+
+export const addCache = async (key: string, response: Response) => {
+	if (await isCacheFull()) {
+		console.warn('Cache is full, not caching response');
+		return;
+	}
+	try {
+		const clonedResponse = response.clone();
+		const cache = await caches.open(wpCacheKey);
+		await cache.put(key, clonedResponse);
+	} catch (e) {
+		console.warn('Failed to cache response', e);
+	}
+};
+
+export const getCache = async (key: string) => {
+	const cache = caches.open(wpCacheKey);
+	return await cache.then((c) => c.match(key));
+};
+
+const validHostnames = ['playground.wordpress.net', '127.0.0.1', 'localhost'];
+
+const isValidHostname = (url: URL) => {
+	/**
+	 * The development environment uses Vite which doesn't work offline because it dynamically generates assets.
+	 * Check the README for offline development instructions.
+	 */
+	if (
+		url.href.startsWith('http://127.0.0.1:5400/') ||
+		url.pathname.startsWith('/website-server/')
+	) {
+		return false;
+	}
+	if (isURLScoped(url)) {
+		return false;
+	}
+	return validHostnames.includes(url.hostname);
+};
+
+export const cachedFetch = async (request: Request): Promise<Response> => {
+	const url = new URL(request.url);
+	if (!isValidHostname(url)) {
+		try {
+			return await fetch(request);
+		} catch (e) {
+			console.warn('Failed to fetch', request.url, e);
+			return new Response('Failed to fetch', { status: 500 });
+		}
+	}
+	const cacheKey = url.href;
+	const cache = await getCache(cacheKey);
+	if (cache) {
+		console.log('Cache hit', cacheKey);
+		return cache;
+	} else {
+		console.warn('Cache miss', cacheKey);
+	}
+	const response = await fetch(request);
+	await addCache(cacheKey, response);
+	return response;
+};
+
+const preCachedResources: RequestInfo[] = ['/', '/index.html', '/sw.js'];
+
+export const preCacheResources = async (): Promise<any> => {
+	if (!isValidHostname(new URL(location.href))) {
+		return;
+	}
+	return caches
+		.open(wpCacheKey)
+		.then((cache) => cache.addAll(preCachedResources));
+};

packages/php-wasm/web/src/lib/register-service-worker.ts

@@ -2,6 +2,7 @@ import { PHPWorker } from '@php-wasm/universal';
 import { PhpWasmError } from '@php-wasm/util';
 import { responseTo } from '@php-wasm/web-service-worker';
 import { Remote } from 'comlink';
+import { logger } from '@php-wasm/logger';
 
 /**
  * Run this in the main application to register the service worker or
@@ -43,8 +44,14 @@ export async function registerServiceWorker<Client extends Remote<PHPWorker>>(
 
 	// Check if there's a new service worker available and, if so, enqueue
 	// the update:
-	await registration.update();
-
+	try {
+		await registration.update();
+	} catch (e) {
+		logger.warn(
+			'Failed to update service worker. Check if you are online.',
+			e
+		);
+	}
 	// Proxy the service worker messages to the web worker:
 	navigator.serviceWorker.addEventListener(
 		'message',

packages/playground/remote/src/lib/worker-thread.ts

@@ -34,13 +34,15 @@ import transportFetch from './playground-mu-plugin/playground-includes/wp_http_f
 import transportDummy from './playground-mu-plugin/playground-includes/wp_http_dummy.php?raw';
 /** @ts-ignore */
 import playgroundWebMuPlugin from './playground-mu-plugin/0-playground.php?raw';
-import { PHPWorker } from '@php-wasm/universal';
+import { PHP, PHPWorker } from '@php-wasm/universal';
+import { decodeZip } from '@php-wasm/stream-compression';
 import {
 	bootWordPress,
 	getLoadedWordPressVersion,
 	isSupportedWordPressVersion,
 } from '@wp-playground/wordpress';
 import { logger } from '@php-wasm/logger';
+import { getWordPressVersionFromPhp } from '@wp-playground/wordpress';
 
 const scope = Math.random().toFixed(16);
 
@@ -189,6 +191,47 @@ export class PlaygroundWorkerEndpoint extends PHPWorker {
 	}
 }
 
+async function downloadWordPressAssets(php: PHP) {
+	const wpVersion = await getWordPressVersionFromPhp(php);
+	fetch(`${wordPressSiteUrl}/wp-${wpVersion}/wordpress-static.zip`)
+		.then((response) => response.body)
+		.then(async (body) => {
+			if (!body) {
+				logger.warn('Failed to download WordPress assets');
+				return;
+			}
+			try {
+				const zipStream = decodeZip(body);
+
+				for await (const file of zipStream) {
+					const path = file.name.replace(
+						'wordpress-static',
+						'/wordpress'
+					);
+
+					if (file.type === 'directory' && !php.isDir(path)) {
+						php.mkdir(path);
+					} else if (!php.fileExists(path)) {
+						try {
+							php.writeFile(
+								path,
+								new Uint8Array(await file.arrayBuffer())
+							);
+						} catch (e) {
+							logger.warn(
+								'Failed to write a WordPress asset file',
+								path,
+								e
+							);
+						}
+					}
+				}
+			} catch (e) {
+				logger.warn('Failed to download WordPress assets', e);
+			}
+		});
+}
+
 const apiEndpoint = new PlaygroundWorkerEndpoint(
 	downloadMonitor,
 	scope,
@@ -256,6 +299,7 @@ try {
 	apiEndpoint.__internal_setRequestHandler(requestHandler);
 
 	const primaryPhp = await requestHandler.getPrimaryPhp();
+	downloadWordPressAssets(primaryPhp);
 	await apiEndpoint.setPrimaryPHP(primaryPhp);
 
 	// NOTE: We need to derive the loaded WP version or we might assume WP loaded

packages/playground/website/manifest.json

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

packages/playground/website/manifest.production.json

@@ -2,29 +2,29 @@
 	"theme_color": "#ffffff",
 	"background_color": "#ffffff",
 	"display": "standalone",
-	"scope": "/",
-	"start_url": "/",
+	"scope": "https://playground.wordpress.net/",
+	"start_url": "https://playground.wordpress.net/",
 	"short_name": "WordPress Playground",
 	"description": "WordPress Playground",
 	"name": "WordPress Playground",
 	"icons": [
 		{
-			"src": "/logo-192.png",
+			"src": "https://playground.wordpress.net/logo-192.png",
 			"sizes": "192x192",
 			"type": "image/png"
 		},
 		{
-			"src": "/logo-256.png",
+			"src": "https://playground.wordpress.net/logo-256.png",
 			"sizes": "256x256",
 			"type": "image/png"
 		},
 		{
-			"src": "/logo-384.png",
+			"src": "https://playground.wordpress.net/logo-384.png",
 			"sizes": "384x384",
 			"type": "image/png"
 		},
 		{
-			"src": "/logo-512.png",
+			"src": "https://playground.wordpress.net/logo-512.png",
 			"sizes": "512x512",
 			"type": "image/png"
 		}

packages/playground/wordpress-builds/build/Dockerfile

@@ -44,11 +44,17 @@ RUN rm -rf wordpress-static/wp-content/mu-plugins
 # to request a remote asset or delegate the request for a missing file to PHP.
 RUN find wordpress-static -type f | sed 's#^wordpress-static/##'> wordpress-remote-asset-paths
 
-# Make the remote asset listing available remotely so it can be downloaded 
+# Make the remote asset listing available remotely so it can be downloaded
 # directly in cases where an older minified WordPress build without this file
 # has been saved to browser storage.
 RUN cp wordpress-remote-asset-paths wordpress-static/
 
+# ZIP the static files
+RUN zip -r wordpress-static.zip wordpress-static/
+
+# Move ZIP to the public output directory
+RUN cp wordpress-static.zip wordpress-static/
+
 # Move the static files to the final output directory
 RUN mkdir /root/output/$OUT_FILENAME
 RUN mv wordpress-static/* /root/output/$OUT_FILENAME/
@@ -135,6 +141,6 @@ RUN cd wordpress && \
 # Build the final wp.zip file
 RUN mv wordpress /wordpress && \
     cp wordpress-remote-asset-paths /wordpress/ && \
+    cp wordpress-static.zip /wordpress/ && \
     cd /wordpress && \
     zip /root/output/$OUT_FILENAME.zip -r .
-

packages/playground/wordpress/src/boot.ts

@@ -219,7 +219,7 @@ async function isWordPressInstalled(php: PHP) {
 	return (
 		(
 			await php.run({
-				code: `<?php 
+				code: `<?php
 	require '${php.documentRoot}/wp-load.php';
 	echo is_blog_installed() ? '1' : '0';
 	`,