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
+PLAYGROUND_URL=http://localhost:9999 npx nx run playground-website:build:wasm-wordpress-net
+```
+
+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

@@ -175,7 +175,6 @@ export async function broadcastMessageExpectReply(message: any, scope: string) {
 }
 
 interface ServiceWorkerConfiguration {
-	cacheVersion: string;
 	handleRequest?: (event: FetchEvent) => Promise<Response> | undefined;
 }
 

packages/php-wasm/web-service-worker/tsconfig.lib.json

@@ -5,6 +5,8 @@
 		"declaration": true,
 		"types": ["node"]
 	},
-	"include": ["src/**/*.ts"],
+	"include": [
+		"src/**/*.ts",
+	],
 	"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
 }

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';
 
 export interface Client extends Remote<PHPWorker> {}
 
@@ -65,8 +66,14 @@ export async function registerServiceWorker(scope: string, scriptUrl: string) {
 
 	// 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/service-worker.ts

@@ -2,7 +2,7 @@
 
 declare const self: ServiceWorkerGlobalScope;
 
-import { getURLScope, removeURLScope } from '@php-wasm/scopes';
+import { getURLScope, isURLScoped, removeURLScope } from '@php-wasm/scopes';
 import { applyRewriteRules } from '@php-wasm/universal';
 import {
 	awaitReply,
@@ -15,6 +15,7 @@ import { wordPressRewriteRules } from '@wp-playground/wordpress';
 import { reportServiceWorkerMetrics } from '@php-wasm/logger';
 
 import { buildVersion } from 'virtual:remote-config';
+import { WorkerCache } from './src/lib/worker-caching';
 
 if (!(self as any).document) {
 	// Workaround: vite translates import.meta.url
@@ -27,8 +28,66 @@ if (!(self as any).document) {
 
 reportServiceWorkerMetrics(self);
 
+const cache = new WorkerCache(buildVersion);
+
+/**
+ * For offline mode to work we need to cache all required assets.
+ *
+ * These assets are listed in the `/assets-required-for-offline-mode.json` file
+ * and contain JavaScript, CSS, and other assets required to load the site without
+ * making any network requests.
+ */
+cache.cacheOfflineModeAssets();
+
+/**
+ * Cleanup old cache.
+ *
+ * We cache data based on `buildVersion` which is updated whenever Playground is built.
+ * So when a new version of Playground is deployed, the service worker will remove the old cache and cache the new assets.
+ *
+ * If your build version doesn't change while developing locally check `buildVersionPlugin` for more details on how it's generated.
+ */
+cache.cleanup();
+
+/**
+ * Handle fetch events and respond with cached assets if available.
+ */
+self.addEventListener('fetch', (event) => {
+	const url = new URL(event.request.url);
+
+	/**
+	 * Don't cache requests to the service worker script itself.
+	 */
+	if (url.pathname.startsWith(self.location.pathname)) {
+		return;
+	}
+
+	/**
+	 * Don't cache requests to scoped URLs or if the referrer URL is scoped.
+	 *
+	 * These requests are made to the PHP Worker Thread and are not static assets.
+	 */
+	if (isURLScoped(url)) {
+		return;
+	}
+	let referrerUrl;
+	try {
+		referrerUrl = new URL(event.request.referrer);
+	} catch (e) {
+		// ignore
+	}
+	if (referrerUrl && isURLScoped(referrerUrl)) {
+		return;
+	}
+
+	/**
+	 * Respond with cached assets if available.
+	 * If the asset is not cached, fetch it from the network and cache it.
+	 */
+	event.respondWith(cache.cachedFetch(event.request));
+});
+
 initializeServiceWorker({
-	cacheVersion: buildVersion,
 	handleRequest(event) {
 		const fullUrl = new URL(event.request.url);
 		let scope = getURLScope(fullUrl);

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

@@ -0,0 +1,92 @@
+import { isURLScoped } from '@php-wasm/scopes';
+
+export class WorkerCache {
+	readonly cacheNamePrefix = 'playground-cache';
+
+	private cacheName: string;
+
+	constructor(cacheVersion: string) {
+		this.cacheName = `${this.cacheNamePrefix}-${cacheVersion}`;
+	}
+
+	addCache = async (key: Request, response: Response) => {
+		const clonedResponse = response.clone();
+		const cache = await caches.open(this.cacheName);
+		await cache.put(key, clonedResponse);
+	};
+
+	getCache = async (key: Request) => {
+		const cache = caches.open(this.cacheName);
+		return await cache.then((c) => c.match(key, { ignoreSearch: true }));
+	};
+
+	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;
+		}
+
+		/**
+		 * Scoped URLs are requests made to the PHP Worker Thread.
+		 * These requests are not cached because they are not static assets.
+		 */
+		if (isURLScoped(url)) {
+			return false;
+		}
+
+		/**
+		 * Don't cache PHP files because they are dynamic.
+		 */
+		if (url.pathname.endsWith('.php')) {
+			return false;
+		}
+		return ['playground.wordpress.net', '127.0.0.1', 'localhost'].includes(
+			url.hostname
+		);
+	};
+
+	cleanup = async () => {
+		const keys = await caches.keys();
+		const oldKeys = keys.filter(
+			(key) =>
+				key.startsWith(this.cacheNamePrefix) && key !== this.cacheName
+		);
+		return Promise.all(oldKeys.map((key) => caches.delete(key)));
+	};
+
+	cachedFetch = async (request: Request): Promise<Response> => {
+		const url = new URL(request.url);
+		if (!this.isValidHostname(url)) {
+			return await fetch(request);
+		}
+		const cacheKey = request;
+		const cache = await this.getCache(cacheKey);
+		if (cache) {
+			return cache;
+		}
+		const response = await fetch(request);
+		await this.addCache(cacheKey, response);
+		return response;
+	};
+
+	cacheOfflineModeAssets = async (): Promise<any> => {
+		if (!this.isValidHostname(new URL(location.href))) {
+			return;
+		}
+
+		const cache = await caches.open(this.cacheName);
+
+		// Get the cache manifest and add all the files to the cache
+		const manifestResponse = await fetch(
+			'/assets-required-for-offline-mode.json'
+		);
+		const websiteUrls = await manifestResponse.json();
+		await cache.addAll([...websiteUrls, ...['/']]);
+	};
+}

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

@@ -31,11 +31,11 @@ import {
 	journalFSEvents,
 	replayFSJournal,
 } from '@php-wasm/fs-journal';
-/** @ts-ignore */
+/* @ts-ignore */
 import transportFetch from './playground-mu-plugin/playground-includes/wp_http_fetch.php?raw';
-/** @ts-ignore */
+/* @ts-ignore */
 import transportDummy from './playground-mu-plugin/playground-includes/wp_http_dummy.php?raw';
-/** @ts-ignore */
+/* @ts-ignore */
 import playgroundWebMuPlugin from './playground-mu-plugin/0-playground.php?raw';
 import { PHP, PHPWorker } from '@php-wasm/universal';
 import {

packages/vite-extensions/vite-list-assets-required-for-offline-mode.ts

@@ -15,6 +15,7 @@ const patternsToNotCache = [
 	'/index.d.ts',
 	/\/lib\/.*/, // Remote lib files
 	/\/test-fixtures\/.*/, // Test fixtures
+	'/index.js',
 	/**
 	 * WordPress assets removed from the minified builds, for example:
 	 *