Added docs for installing the WordPress plugin

examples/edge-cache-html/WordPress Plugin/README.md

@@ -0,0 +1,39 @@
+# WordPress Page Cache Plugin
+Integrates with the [Edge Cache HTML worker](..) script to cache WordPress pages on the edge:
+
+* Caches HTML on the Cloudflare edge for visitors that aren't logged-in (logged-in users bypass the cache).
+* Automatically invalidates the cache when content is changed (including changes to the themes).
+
+The plugin requires no configuration once installed and activated. As long as the plugin is active and the Worker is running for the domain the edge-caching support is enabled.
+
+# Plugin Installation
+
+The plugin is not (yet) available in the WordPress plugin directory and must be uploaded manually by an administrator.
+
+Log into the WordPress dashboard for the site, go to the "Plugins" section and click on the "Add New" button:
+
+![Add Plugin](docs/wp-plugin-add-button.png)
+
+From the gallery page click the "Upload Plugin" button to manually upload the plugin:
+
+![Upload Plugin](docs/wp-plugin-upload-button.png)
+
+From the upload page select the "Choose File" button and select the [plugin zip file](https://github.com/cloudflare/worker-examples/raw/master/examples/edge-cache-html/WordPress%20Plugin/cloudflare-page-cache.zip) downloaded from this repository:
+
+![Select Plugin Zip File](docs/wp-plugin-upload-select.png)
+
+Select the "Install Now" button to upload and install the plugin:
+
+![Install Plugin](docs/wp-plugin-install-now.png)
+
+After the plugin has been uploaded and installed it will still need to be activated. Click the "Activate Plugin" button from the install page.
+
+![Activate Plugin](docs/wp-plugin-activate.png)
+
+Once activated the plugin will be listed in the plugins page with a "Deactivate" link below it. At this point the plugin is installed and working.
+
+![Activated](docs/wp-plugin-installed.png)
+
+# Updating Plugin
+
+To update the plugin after it has been installed and activated you first need to deactivate and delete the installed plugin from the plugins page and go through the installation steps again.

examples/edge-cache-html/WordPress Plugin/cloudflare-page-cache/cloudflare-page-cache.php

@@ -1,9 +1,9 @@
 <?php
 /*
 Plugin Name:  Cloudflare Page Cache
-Plugin URI:   https://github.com/cloudflare/worker-examples
-Description:  Cache HTML pages on the Cloudflare CDN
-Version:      20181212
+Plugin URI:   https://github.com/cloudflare/worker-examples/tree/master/examples/edge-cache-html
+Description:  Cache HTML pages on the Cloudflare CDN when used with the page cache Worker.
+Version:      1.0
 Author:       Patrick Meenan
 Author URI:   https://www.webpagetest.org/
 License:      MIT

examples/edge-cache-html/WordPress Plugin/cloudflare-page-cache/readme.txt

@@ -3,20 +3,20 @@ Contributors: patrickmeenan
 Tags: cache,performance,speed,cloudflare
 Requires at least: 3.3.1
 Tested up to: 5.0
-Requires PHP: 5.3
+Requires PHP: 5.2.4
 Stable tag: trunk
 License: MIT
 License URI: https://opensource.org/licenses/MIT
 
 Adds support for caching pages on Cloudflare and automatic purging when content changes.
 
 == Description ==
-Integrates with the \"Edge Cache HTML\" Cloudflare Worker to edge-cache the generated HTML for anonymous users (not logged-in) resulting in huge performance gains, particularly on slower hosting.
+Integrates with the \"[Edge Cache HTML](https://github.com/cloudflare/worker-examples/tree/master/examples/edge-cache-html)\" Cloudflare Worker to edge-cache the generated HTML for anonymous users (not logged-in) resulting in huge performance gains, particularly on slower hosting.
 
 == Installation ==
 # FROM YOUR WORDPRESS DASHBOARD
 1. Visit “Plugins” → Add New
-1. Search for Cloudflare Page Cache
+1. Search for \"Cloudflare Page Cache\"
 1. Activate Cloudflare Page Cache from your Plugins page.
 
 # FROM WORDPRESS.ORG

examples/edge-cache-html/edge-cache-html.js

@@ -1,5 +1,14 @@
-// IMPORTANT: A Key/Value Namespace must be bound to this worker script
-// using the variable name EDGE_CACHE.
+// IMPORTANT: Either A Key/Value Namespace must be bound to this worker script
+// using the variable name EDGE_CACHE. or the API parameters below should be
+// configured. KV is recommended if possible since it can purge just the HTML
+// instead of the full cache.
+
+// API settings if KV isn't being used
+const CLOUDFLARE_API = {
+  email: "", // From https://dash.cloudflare.com/profile
+  key: "",   // Global API Key from https://dash.cloudflare.com/profile
+  zone: ""   // "Zone ID" from the API section of the dashboard overview page https://dash.cloudflare.com/
+};
 
 /**
  * Main worker entry point. 
@@ -11,7 +20,13 @@ addEventListener("fetch", event => {
   // Only process requests if KV store is set up and there is no
   // HTML edge cache in front of this worker (only the outermost cache
   // should handle HTML caching in case there are varying levels of support).
-  if (typeof EDGE_CACHE !== 'undefined' && upstreamCache === null) {
+  let configured = false;
+  if (typeof EDGE_CACHE !== 'undefined') {
+    configured = true;
+  } else if (CLOUDFLARE_API.email.length && CLOUDFLARE_API.key.length && CLOUDFLARE_API.zone.length) {
+    configured = true;
+  }
+  if ( configured && upstreamCache === null) {
     event.passThroughOnException();
     event.respondWith(processRequest(request, event));
   }
@@ -136,14 +151,27 @@ async function getCachedResponse(request) {
 }
 
 /**
- * Asynchronously purge the HTML cache (bump the cache version).
+ * Asynchronously purge the HTML cache.
  * @param {Int} cacheVer - Current cache version (if retrieved)
  * @param {Event} event - Original event
  */
 async function purgeCache(cacheVer, event) {
-  cacheVer = await GetCurrentCacheVersion(cacheVer);
-  cacheVer++;
-  event.waitUntil(EDGE_CACHE.put('html_cache_version', cacheVer.toString()));
+  if (typeof EDGE_CACHE !== 'undefined') {
+    // Purge the KV cache by bumping the version number
+    cacheVer = await GetCurrentCacheVersion(cacheVer);
+    cacheVer++;
+    event.waitUntil(EDGE_CACHE.put('html_cache_version', cacheVer.toString()));
+  } else {
+    // Purge everything using the API
+    const url = "https://api.cloudflare.com/client/v4/zones/" + CLOUDFLARE_API.zone + "/purge_cache";
+    event.waitUntil(fetch(url,{
+      method: 'POST',
+      headers: {'X-Auth-Email': CLOUDFLARE_API.email,
+                'X-Auth-Key': CLOUDFLARE_API.key,
+                'Content-Type': 'application/json'},
+      body: JSON.stringify({purge_everything: true})
+    }));
+  }
 }
 
 /**
@@ -237,14 +265,18 @@ function getResponseOptions(response) {
  */
 async function GetCurrentCacheVersion(cacheVer) {
   if (cacheVer === null) {
-    cacheVer = await EDGE_CACHE.get('html_cache_version');
-    if (cacheVer === null) {
-      // Uninitialized - first time through, initialize KV with a value
-      // Blocking but should only happen immediately after worker activation.
-      cacheVer = 0;
-      await EDGE_CACHE.put('html_cache_version', cacheVer.toString());
+    if (typeof EDGE_CACHE !== 'undefined') {
+      cacheVer = await EDGE_CACHE.get('html_cache_version');
+      if (cacheVer === null) {
+        // Uninitialized - first time through, initialize KV with a value
+        // Blocking but should only happen immediately after worker activation.
+        cacheVer = 0;
+        await EDGE_CACHE.put('html_cache_version', cacheVer.toString());
+      } else {
+        cacheVer = parseInt(cacheVer);
+      }
     } else {
-      cacheVer = parseInt(cacheVer);
+      cacheVer = -1;
     }
   }
   return cacheVer;