Offline support

packages/php-wasm/web-service-worker/project.json

@@ -13,14 +13,10 @@
 			}
 		},
 		"build:bundle": {
-			"executor": "@nx/js:tsc",
+			"executor": "@nx/vite:build",
 			"outputs": ["{options.outputPath}"],
 			"options": {
-				"outputPath": "dist/packages/php-wasm/web-service-worker",
-				"main": "packages/php-wasm/web-service-worker/src/index.ts",
-				"tsConfig": "packages/php-wasm/web-service-worker/tsconfig.lib.json",
-				"assets": ["packages/php-wasm/web-service-worker/*.md"],
-				"updateBuildableProjectDepsInPackageJson": true
+				"outputPath": "dist/packages/php-wasm/web-service-worker"
 			}
 		},
 		"lint": {

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

@@ -0,0 +1,69 @@
+import { logger } from '@php-wasm/logger';
+
+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()) {
+		logger.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) {
+		logger.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) => {
+	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) {
+			logger.warn('Failed to fetch', request.url, e);
+			return new Response('Failed to fetch', { status: 500 });
+		}
+	}
+	const cacheKey = url.pathname;
+	const cache = await getCache(cacheKey);
+	if (cache) {
+		return cache;
+	}
+	const response = await fetch(request);
+	await addCache(cacheKey, response);
+	return response;
+};
+
+const precachedResources: RequestInfo[] = [
+	'/website-server/',
+	'/website-server/index.html',
+];
+
+export const precacheResources = async (): Promise<any> => {
+	return caches
+		.open(wpCacheKey)
+		.then((cache) => cache.addAll(precachedResources));
+};

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

@@ -3,6 +3,8 @@ declare const self: ServiceWorkerGlobalScope;
 
 import { awaitReply, getNextRequestId } from './messaging';
 import { getURLScope, isURLScoped, setURLScope } from '@php-wasm/scopes';
+import { cachedFetch, precacheResources } from './fetch-caching';
+import { logger } from '@php-wasm/logger';
 
 /**
  * Run this function in the service worker to install the required event
@@ -13,6 +15,15 @@ import { getURLScope, isURLScoped, setURLScope } from '@php-wasm/scopes';
 export function initializeServiceWorker(config: ServiceWorkerConfiguration) {
 	const { handleRequest = defaultRequestHandler } = config;
 
+	self.addEventListener('install', (event) => {
+		try {
+			const precachePromise = precacheResources();
+			event.waitUntil(precachePromise);
+		} 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 +33,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/vite.config.ts

@@ -21,6 +21,20 @@ export default defineConfig({
 		}),
 	],
 
+	build: {
+		lib: {
+			// Could also be a dictionary or array of multiple entry points.
+			entry: 'src/index.ts',
+			name: 'php-wasm-web-service-worker',
+			fileName: 'index',
+			formats: ['es'],
+		},
+		rollupOptions: {
+			// External packages that should not be bundled into your library.
+			external: [],
+		},
+	},
+
 	test: {
 		globals: true,
 		cache: {

packages/playground/remote/src/test/fetch-caching.spec.ts

@@ -0,0 +1,68 @@
+import { areCacheKeysForSameFile, isValidFile } from '../lib/fetch-caching';
+
+describe('Valid files', () => {
+	it('Should return true for valid files', () => {
+		expect(isValidFile('/index.html')).toBe(false);
+		expect(isValidFile('/')).toBe(false);
+
+		expect(isValidFile('/assets/wp-6.4.zip')).toBe(true);
+		expect(isValidFile('/assets/wp-6.4.1.zip')).toBe(true);
+		expect(isValidFile('/assets/wp-6.4.1-cache_key.zip')).toBe(true);
+		expect(
+			isValidFile('https://playground.wordpress.net/assets/wp-6.4.zip')
+		).toBe(true);
+
+		expect(isValidFile('/assets/php_8_0.wasm')).toBe(true);
+		expect(isValidFile('/assets/php_8_0_0.wasm')).toBe(true);
+		expect(isValidFile('/assets/php_8_0_0-cache_key.wasm')).toBe(true);
+		expect(
+			isValidFile('https://playground.wordpress.net/assets/php_8_0.wasm')
+		).toBe(true);
+
+		expect(isValidFile('/assets/sqlite-database-integration.zip')).toBe(
+			true
+		);
+		expect(
+			isValidFile('/assets/sqlite-database-integration-cache_key.zip')
+		).toBe(true);
+		expect(
+			isValidFile(
+				'https://playground.wordpress.net/assets/sqlite-database-integration.zip'
+			)
+		).toBe(true);
+	});
+
+	it('Shoud return true if the cache keys are for the same file', () => {
+		expect(
+			areCacheKeysForSameFile(
+				'/assets/wp-6.4.zip',
+				'/assets/wp-6.4-cache_key.zip'
+			)
+		).toBe(true);
+		expect(
+			areCacheKeysForSameFile(
+				'/assets/php_8_0-old_key.wasm',
+				'/assets/php_8_0-cache_key.wasm'
+			)
+		).toBe(true);
+		expect(
+			areCacheKeysForSameFile(
+				'/assets/sqlite-database-integration.zip',
+				'/assets/sqlite-database-integration-cache_key.zip'
+			)
+		).toBe(true);
+
+		expect(
+			areCacheKeysForSameFile(
+				'/assets/wp-6.4.zip',
+				'/assets/wp-6.4.1-cache_key.zip'
+			)
+		).toBe(false);
+		expect(
+			areCacheKeysForSameFile(
+				'/assets/wp-6.4.zip',
+				'/assets/php_8_0.wasm'
+			)
+		).toBe(false);
+	});
+});

packages/playground/website/manifest.json

@@ -3,7 +3,7 @@
 	"background_color": "#ffffff",
 	"display": "standalone",
 	"scope": "/",
-	"start_url": "/",
+	"start_url": "/website-server/",
 	"short_name": "WordPress Playground",
 	"description": "WordPress Playground",
 	"name": "WordPress Playground",