Post-Cache

I’ve opened an issue for this: https://github.com/xwp/pwa-wp/issues/213

In the immediate term you can also do something like this:

add_action(
	'wp_front_service_worker',
	function( WP_Service_Worker_Scripts $scripts ) {
		$post_cacher = function() {
			return '
				wp.serviceWorker.routing.registerRoute(
					new RegExp(\'/api/.*\\.json\'),
					() => { /*...*/ },
					"POST"
				);
			';
		};

		$scripts->register(
			'my-api-post-cache',
			[ 'src' => $post_cacher ]
		);
	}
);

• This reply was modified 5 years, 3 months ago by Weston Ruter.

@ckranebitter Please test this PR: https://github.com/xwp/pwa-wp/pull/214

Hi Weston,

thanks for the update.
Sorry that I’m such a noobie here.
I added following code to my php API

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->caching_routes()->register(
		'https://www.[mysite]/admin-ajax.php',
		[
			'strategy'  => WP_Service_Worker_Caching_Routes::STRATEGY_NETWORK_FIRST,
			'cacheName' => 'TEST ',
			'plugins'   => [
				'expiration' => [
					'maxAgeSeconds' => 60 * 60 * 24,
				],
			],
			'method'   => 'POST',
		]
	);
} );

But the Site still wants to post using admin-ajax.php.
I run Cloudflare and WPRocket.

Am I still doing something wrong?

Thanks.
Best.
Christoph.

Hi,

also tried:

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->caching_routes()->register(
		'.*\.html',
		[
			'strategy'  => WP_Service_Worker_Caching_Routes::STRATEGY_NETWORK_FIRST,
			'cacheName' => 'TEST ',
			'plugins'   => [
				'expiration' => [
					'maxAgeSeconds' => 60 * 60 * 24,
				],
			],
			'method'   => 'POST',
		]
	);
} ); 

as my response is text/html
but the request does not get cached.
The GET-Request done on admin-ajax.php .work seamlessly.
Although the are done with a query string.

The 'https://www.[mysite]/admin-ajax.php' needs to be a valid regular expression for the URL. Try: '.*/admin-ajax\.php'

I pasted your Regex.
But this still has no effect on my POST-Request-Cache.
As said, the GET-Request on the same resource seem to work.
The only difference I can make out is, that they have a querystring attached in the url. They look like this:

https://www.XYZ/wp-admin/admin-ajax.php?action=Essential_Grid_Front_request_ajax&client_action=load_post_content&token=51ae258ba3&postid=2534&settings={%22titl%22:%22Polarisierte%20Diagramme%22,%22lbTitle%22:%22off%22,%22lbTag%22:%22h2%22,%22lbImg%22:%22off%22,%22lbMin%22:%2240%%22,%22lbMax%22:%22300px%22,%22margin%22:%2250|0|0|0%22,%22padding%22:%2225|5|30|5%22,%22overflow%22:%22auto%22,%22ispost%22:1,%22gridid%22:1}&esgbox=true

I would expect the same behaviour for POST-Request.
Do you have any hints?

Thanks.
Best.
C.

Humm. Maybe try '.*wp-admin/admin-ajax\.php(\?.*)?' to explicitly match against the query params. It should not matter, however.

Try also enabling WP_DEBUG as that will allow Workbox to log out what is going on in your console.

• This reply was modified 5 years, 3 months ago by Weston Ruter.

With this, it looks like a route can be found:

add_action(
	'wp_front_service_worker',
	function( WP_Service_Worker_Scripts $scripts ) {
		$post_cacher = function() {
			return '
				wp.serviceWorker.routing.registerRoute(
					new RegExp(\'/cv/.*\\.php\'),
					workbox.strategies.networkFirst(),
					"POST"
				);
			';
		};

		$scripts->register(
			'my-api-post-cache',
			[ 'src' => $post_cacher ]
		);
	}
);

I enabled WP_DEBUG.
When making the POST-request everything looks fine (Statucode: 200).
But when workbox tries to cache the POST-request it says this is not possible.
Here is the detailed log:

logger.mjs:44 workbox Router is responding to: /cv/wp-admin/admin-ajax.php
Found a route to handle this request: RegExpRoute?{handler: NetworkFirst, match: ?, method: “POST”}
logger.mjs:44 workbox Network request for ‘/cv/wp-admin/admin-ajax.php’ returned a response with status ‘200’.
logger.mjs:44 workbox Using NetworkFirst to respond to ‘/cv/wp-admin/admin-ajax.php’

Uncaught (in promise) attempt-to-cache-non-get-request: Unable to cache ‘/cv/wp-admin/admin-ajax.php’ because it is a ‘POST’ request and only ‘GET’ requests can be cached.
at Object.putWrapper [as put] (https://www.xyz.com/cv/wp-content/plugins/pwa/wp-includes/js/workbox/workbox-core.dev.js:735:15)
at NetworkFirst._getNetworkPromise (https://www.xyz.com/cv/wp-content/plugins/pwa/wp-includes/js/workbox/workbox-strategies.dev.js:659:56)
WorkboxError @ WorkboxError.mjs:33
putWrapper @ cacheWrapper.mjs:46
_getNetworkPromise @ NetworkFirst.mjs:255

So basically POST-Requests can just be registered as routes but not be cached?
I don’t get it…

Maybe you can interpret this message a bit?

Thanks in advance.
Best.
C.

That makes sense actually.

A POST request is not “idempotent”, meaning it mutates something and it cannot be repeated without side effects. Thus it makes sense that Workbox would actually not allow them to be cached. This is actually a browser-level restriction in the Cache API per https://stackoverflow.com/a/52209236/93579

Allowing the route to be registered means the service worker can do other things with the request, but just not cache it.

I get it.

But my plugin uses a POST-Request to fetch data.
It does not mutate something server-side.
I guess the authors of my used plugin [Essential Grid] decided to use a POST-Request because of authentication or something.

Nevertheless.
I managed to implement a workaround, storing my POST-Responses in IndexedDB.

Thanks for your help.
I think your plugin works great – It helped me a lot.

Best.
C.

Yeah, this is just going off of how HTTP itself was designed. While a POST request can be used to purely GET data, it’s somewhat of an anti-pattern. So that’s why the Cache API doesn’t support caching POST requests. AFAIK, browsers never cache POST requests either, nor do CDNs.

Glad you found a workaround.