Support » Plugin: PWA » Post-Cache

  • Resolved ckranebitter

    (@ckranebitter)


    Hi,

    I’m not sure if this has already been asked – At least I searched for the coined terms but didn’t find any.
    My data is fetched via POST.
    The Response is always stable.
    Is there any way I can cache a POST-Request with this plugin?
    something like

    workbox.routing.registerRoute(
    new RegExp(‘/api/.*\\.json’),
    handlerCb,
    ‘POST’
    );

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Weston Ruter

    (@westonruter)

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

    Plugin Author Weston Ruter

    (@westonruter)

    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 4 years, 6 months ago by Weston Ruter.
    Plugin Author Weston Ruter

    (@westonruter)

    Thread Starter ckranebitter

    (@ckranebitter)

    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.

    Thread Starter ckranebitter

    (@ckranebitter)

    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.

    Plugin Author Weston Ruter

    (@westonruter)

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

    Thread Starter ckranebitter

    (@ckranebitter)

    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.

    Plugin Author Weston Ruter

    (@westonruter)

    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 4 years, 6 months ago by Weston Ruter.
    Thread Starter ckranebitter

    (@ckranebitter)

    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.

    Plugin Author Weston Ruter

    (@westonruter)

    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.

    Thread Starter ckranebitter

    (@ckranebitter)

    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.

    Plugin Author Weston Ruter

    (@westonruter)

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Post-Cache’ is closed to new replies.