Clear CDN Cache button + option to clear CDN cache via "Clear Cache" toolbar button

[raamdev]

There should be a "Clear CDN Cache" button inside the Static CDN Filters panel that allows a site owner to clear the CDN cache.

Along with that, there should be a new option inside the "Clearing the Cache" panel that allows you to specify that you'd like to clear the CDN cache whenever you click the "Clear Cache" button.

By default, you'd have to go into Static CDN Filters and click the "Clear CDN Cache" button to clear your CDN cache, but for site owners (like myself) who rarely click "Clear Cache" but who want to know that when they click that button, everything gets cleared, having an option to do that would be nice.

---

Related: #486

[isaumya]

👍 for this.

[jaswrks]

👍

[lkraav]

Mmmhm. So while this feature is in development, we need to empty the CDN cache manually or use custom cache-busting version strings with wp_enqueue_whatnot, correct?

[lkraav]

Current help text in the CDN configuration panel says "Or, if you ask ZenCache to invalidate the CDN cache (e.g. a manual clearing of the CDN cache); the internal counter is bumped then too." Hence the confusion in #521.

[raamdev]

Current help text in the CDN configuration panel says "Or, if you ask ZenCache to invalidate the CDN cache (e.g. a manual clearing of the CDN cache); the internal counter is bumped then too." Hence the confusion in #521.

@lkraav You're quite correct. That is misleading, as the Clear Cache button does not currently invalidate the CDN cache. Thanks for pointing out that text!

So while this feature is in development, we need to empty the CDN cache manually or use custom cache-busting version strings with wp_enqueue_whatnot, correct?

The easiest way to invalidate the CDN cache right now would be to simply change the iv attribute to iva, ivb, ivc, ivd, etc. Each time you change the name of the iv variable, you will essentially be invalidating the previous CDN cache.

[jaswrks]

Next Actions (Step 1)

Create wipeCdnCache() and clearCdnCache() Methods

Create a new file in this directory named WcpCdnUtils.php

<?php
/*[pro strip-from="lite"]*/
namespace WebSharks\ZenCache\Pro;
/*
 * Wipes out entire CDN cache.
 *
 * @since 15xxxx Implementing CDN cache wiping.
 *
 * @param bool $manually TRUE if the wiping is done manually by the site owner.
 *
 * @throws \Exception If a wipe failure occurs.
 *
 * @return boolean True if the CDN cache is wiped.
 */
$self->wipeCdnCache = function ($manually = false) use ($self) {
    if (!$self->options['cdn_enable']) {
        return false; // Nothing to do.
    }
    $self->updateOptions(array('cdn_invalidation_counter' => ++$self->options['cdn_invalidation_counter']));

    return true;
};

/*
 * Clears the CDN cache.
 *
 * @since 15xxxx Implementing CDN cache clearing.
 *
 * @param bool $manually TRUE if the clearing is done manually by the site owner.
 *
 * @throws \Exception If a clear failure occurs.
 *
 * @return boolean True if the CDN cache is cleared.
 */
$self->clearCdnCache = function ($manually = false) use ($self) {
    return $self->wipeCdnCache($manually);
};
/*[/pro]*/

[kristineds]

@jaswsinc @raamdev Submitting PR for step 1: wpsharks/comet-cache-pro#134

[jaswrks]

Great! Before we move to the next step here we need Raam to merge the existing PRs that are pending. I'll come back to this next week at some point and outline the next step.

[jaswrks]

Next Actions (Step 2)

• Pull the latest 000000-dev branch.

  $ cd ~/projects/websharks/zencache-pro
  $ git checkout 000000-dev
  $ git pull

• Start a new feature branch based on the dev branch.

  $ git checkout -b feature/488-step-2

• Right above this line, add a new option.

  'cache_clear_cdn_enable' => '1', // `0|1`.

• Right above this line, add this new option to the array of pro-only option keys.

  'cache_clear_cdn_enable',

• Submit Pull Request

[jaswrks]

Next Actions (Step 3)

• Pull the latest 000000-dev branch.

  $ cd ~/projects/websharks/zencache-pro
  $ git checkout 000000-dev
  $ git pull

• Start a new feature branch based on the dev branch.

  $ git checkout -b feature/488-step-3

• Right after this line, add a new block.

  /*[pro strip-from="lite"]*/
  'ajaxWipeCdnCache',
  'ajaxClearCdnCache',
  /*[/pro]*/

• Right after this line, add the following new methods.

  /*[pro strip-from="lite"]*/
  /**
  * Action handler.
  *
  * @since 15xxxx Adding CDN cache wipe handler.
  *
  * @param mixed Input action argument(s).
  */
  protected function ajaxWipeCdnCache($args)
  {
      if (!is_multisite() || !current_user_can($this->plugin->network_cap)) {
          return; // Nothing to do.
      }
      if (empty($_REQUEST['_wpnonce']) || !wp_verify_nonce($_REQUEST['_wpnonce'])) {
          return; // Unauthenticated POST data.
      }
      $this->plugin->wipeCdnCache(true);
  
      $response = sprintf(__('<p>CDN cache successfully wiped.</p>', SLUG_TD), esc_html(NAME));
      $response .= sprintf(__('<p>The CDN cache invalidation counter is now: <code>%1$s</code></p>', SLUG_TD), esc_html($this->plugin->options['cdn_invalidation_counter']));
  
      exit($response); // JavaScript will take it from here.
  }
  /*[/pro]*/
  
  /*[pro strip-from="lite"]*/
  /**
  * Action handler.
  *
  * @since 15xxxx Adding CDN cache clear handler.
  *
  * @param mixed Input action argument(s).
  */
  protected function ajaxClearCdnCache($args)
  {
      if (!$this->plugin->currentUserCanClearCache()) {
          return; // Not allowed to clear.
      }
      if (empty($_REQUEST['_wpnonce']) || !wp_verify_nonce($_REQUEST['_wpnonce'])) {
          return; // Unauthenticated POST data.
      }
      $this->plugin->clearCdnCache(true);
  
      $response = sprintf(__('<p>CDN cache successfully cleared.</p>', SLUG_TD), esc_html(NAME));
      $response .= sprintf(__('<p>The CDN cache invalidation counter is now: <code>%1$s</code></p>', SLUG_TD), esc_html($this->plugin->options['cdn_invalidation_counter']));
  
      exit($response); // JavaScript will take it from here.
  }
  /*[/pro]*/

[jaswrks]

Beautiful! :-)

[jaswrks]

Next Actions (Step 4)

• Pull the latest 000000-dev branch.

  $ cd ~/projects/websharks/zencache-pro
  $ git checkout 000000-dev
  $ git pull

• Start a new feature branch based on the dev branch.

  $ git checkout -b feature/488-step-4

• After this line add the following:

  echo '  <hr />'."\n";
  echo '  <h3>'.__('Clear the CDN Cache Too?', SLUG_TD).'</h3>'."\n";
  echo '  <p>'.sprintf(__('If you clear the cache manually, do you want %1$s to automatically bump the CDN invalidation counter too? i.e., automatically increment the <code>?%2$s=[counter]</code> in all static CDN URLs?', SLUG_TD), esc_html(NAME), esc_html($this->plugin->options['cdn_invalidation_var'])).'</p>'."\n";
  echo '  <p><select name="'.esc_attr(GLOBAL_NS).'[saveOptions][cache_clear_cdn_enable]" class="-no-if-enabled">'."\n";
  echo '      <option value="0"'.selected($this->plugin->options['cache_clear_cdn_enable'], '0', false).'>'.__('No, I don\'t use Static CDN Filters; or, I don\'t want the CDN cache cleared.', SLUG_TD).'</option>'."\n";
  echo '      <option value="1"'.selected($this->plugin->options['cache_clear_cdn_enable'], '1', false).'>'.__('Yes, if Static CDN Filters are enabled, also clear the CDN cache.', SLUG_TD).'</option>'."\n";
  echo '  </select></p>'."\n";

• After this line add the following:

  echo '              <p class="info" style="display:block;">'.sprintf(__('<strong>Tip:</strong> You can also tell %1$s to automatically bump the CDN Invalidation Counter whenever you clear the cache manually. See: <strong>%1$s → Manual Cache Clearing → Clear the CDN Cache Too?</strong>', SLUG_TD), esc_html(NAME)).'</p>'."\n";

• Submit Pull Request

[jaswrks]

Next Actions (Part 4 Continuation)

• Use the same branch: feature/488-step-4

  $ cd ~/projects/websharks/zencache-pro
  $ git checkout feature/488-step-4 # Use the same branch; i.e., step 4.
  $ git pull # Make sure that you are up-to-date with the remote copy.

• Replace this line with the following:

  echo '   <button type="button" class="plugin-menu-page-clear-cdn-cache" style="float:right; margin:0 0 1em 1em;" title="'.esc_attr(__('Clear CDN Cache (Bump CDN Invalidation Counter)', SLUG_TD)).'">'.
       '      '.__('Clear CDN Cache', SLUG_TD).' <img src="'.esc_attr($this->plugin->url('/src/client-s/images/clear.png')).'" style="width:16px; height:16px;" /></button>'."\n";

---

• Update Existing Pull Request

  $ git status # Quick review. You should be on branch: feature/488-step-4
  $ git add --all && git commit -m 'UI markup for CDN wipe/clear functionality. See: websharks/zencache#488'
  $ git push # Push changes to this branch; i.e., update existing PR.

[jaswrks]

On deck: Final Step 5

JavaScript for <button type="button" class="plugin-menu-page-clear-cdn-cache" onclick event.

[jaswrks]

Next Actions (Final Step 5)

• New feature branch for step 5; based on 000000-dev.

  $ cd ~/projects/websharks/zencache-pro
  $ git checkout 000000-dev # Start from the dev branch.
  $ git pull # Make sure your local copy is up-to-date with the remote.
  $ git checkout -b feature/488-step-5 # New feature branch.

• After this line add the following:

  /*![pro strip-from='lite']*/
  plugin.clearCdnCacheViaAjax = function (event) {
    plugin.preventDefault(event);
  
    var $this = $(this),
      postVars = {
        _wpnonce: plugin.vars._wpnonce
      }; // HTTP post vars.
    postVars[plugin.namespace] = {
      ajaxClearCdnCache: '1'
    };
    $this.attr('disabled', 'disabled'); // Processing state.
  
    $.post(plugin.vars.ajaxURL, postVars, function (response) {
      alert($(response.replace(/\<\/p\>\<p\>/gi, '</p> <p>')).text());
      $this.removeAttr('disabled');
    });
  };
  /*[/pro]*/

• Replace this line with the following:

  /*![pro strip-from='lite']*/
  $('textarea[name$="\[cdn_hosts\]"]', plugin.$menuPage).on('input propertychange', plugin.handleCdnHostsChange);
  $('.plugin-menu-page-clear-cdn-cache', plugin.$menuPage).on('click', plugin.clearCdnCacheViaAjax);
  /*[/pro]*/

• Submit Pull Request

[kristineds]

@raamdev @jaswsinc Submitting Pull Requests for:

Step 4: wpsharks/comet-cache-pro/pull/140
Step 4 (continuation): wpsharks/comet-cache-pro@0330a50
Step 5: wpsharks/comet-cache-pro/pull/141

I added notes on each PR to indicate that it is part of a larger picture

[jaswrks]

@kristineds Excellent! That should just about do it. You can go ahead and label all of your open PRs for this issue as "ready to merge" and send Raam a note to let him know it's time for these to be reviewed, merged, and tested by us all.

[kristineds]

@raamdev All PRs (Step 1 - 5) submitted for this issue are ready to be reviewed, merged, and tested by all of us. i.e. All work have been completed.

Pull Request Summary:
Step 1: wpsharks/comet-cache-pro#134
Step 2: wpsharks/comet-cache-pro#138
Step 3: wpsharks/comet-cache-pro#139
Step 4: wpsharks/comet-cache-pro#140
Step 5: wpsharks/comet-cache-pro#141

[raamdev]

@kristineds Woohoo! Nice work! Thanks. :-) I'l start reviewing those PRs now.

[raamdev]

@jaswsinc I'm testing this new feature and I noticed that while there's a new option under "Manual Cache Clearing", there's no corresponding option under "Automatic Cache Clearing". I also tested automatic cache clearing with the "Clear CDN Cache Too?" set to Yes inside Manual Cache Clearing, and it appears that the CDN Cache does not get cleared when an automatic cache clearing event occurs (for example when you change a setting in WordPress General Settings).

Do you agree that there should be another option inside Automatic Cache Clearing for this?

[jaswrks]

Do you agree that there should be another option inside Automatic Cache Clearing for this?

I'm not against there being an option for this, no. However, it would be my opinion that the CDN cache should not be cleared automatically unless there is a definitive reason for doing so. When the CDN cache is cleared, it forces your visitors to download a whole new set of resources; e.g., JS/CSS/images, etc. So unless the file system is changing, or a site owner chooses to do this manually, I think it's not a good idea.

Currently, the only time ZenCache will clear the CDN Cache automatically is when you update a theme, plugin, or WordPress itself; i.e., when we know the file system is changing in some way.

[raamdev]

it would be my opinion that the CDN cache should not be cleared automatically unless there is a definitive reason for doing so

I agree. And in that case, the "Clear the CDN Cache Too?" setting inside Manual Cache Clearing should default to "No", not "Yes", as it does now.

Currently, the only time ZenCache will clear the CDN Cache automatically is when you update a theme, plugin, or WordPress itself; i.e., when we know the file system is changing in some way.

Or when you click the "Clear Cache" button. As noted above, the current default (tested with 000000-dev branch as of today, see this line) is to clear the CDN cache whenever clearing the cache.

[jaswrks]

I agree. And in that case, the "Clear the CDN Cache Too?" setting inside Manual Cache Clearing should default to "No", not "Yes", as it does now.

I agree. I'm not sure why I defaulted that to being enabled. Referencing this line.

[raamdev]

I agree. I'm not sure why I defaulted that to being enabled. Referencing this line.

This has been updated. The default for the "Clear the CDN Cache Too?" option is now disabled: wpsharks/comet-cache-pro@3df5d48

[raamdev]

Next Pro Release Changelog:

• New Feature! It's now possible to manually clear the CDN Cache when Static CDN Filters are enabled. Inside the Static CDN Filters options panel there's a new "Clear CDN Cache" button and there's also a new option ("Clear the CDN Cache Too?") inside Dashboard → ZenCache → Plugin Options → Manual Cache Clearing that allows you to specify whether or not you'd like the CDN Cache to be cleared whenever the "Clear Cache" button is clicked (either from the Admin Bar or from inside the Plugin Options). Props @kristineds @jaswsinc. See Issue #488.

[jaswrks]

Cool. TY.

[raamdev]

ZenCache Pro v151002 has been released and includes changes from this GitHub Issue.

See the ZenCache Pro v151002 release announcement for further details.

---

This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#488).