Skip to main content

Browser cache and cloudflare cache how do we cache at powr

diagram about cache: https://drive.google.com/file/d/1SZLlhODwKUN-YgJYhGOq_n73TNY2eKBo/view?usp=sharing

=================================== Short outline of Yerassyl, Ben and Ily's discussion

Issue: several weeks ago we had a bug which got deployed to prod by kz team. Then it was reverted, both /standalone and /view worked fine. But many users started complaining that our plugin is broken form them. We could not reprodue it.

Reason: we could not reproduce this bug because we were loading plugin from powr and not from end user's site, where it is embeded via iframe and html is cached as a result.

So later we decided to remove browser cache everywher, but turns out we dont need to sacrifice browser cache everywhere, coz we have this issue only for plugins loaded in iframe.

When we set Cache-Control header in controller endpoints browser caches contents and store them depending on ttl, but this endpoint html is not cached for example when user lands on powr.io/unlimited there are 2 things that load

  1. /unlimited html page which contains urls to js/css scripts
  2. static-unlimited.js and static-unlimited.css calls initated from html

/unlimited html page is never cached in browsers because this request always has to reach some server (cloudflare or powr), because it is the 1st request both js and css files will be cached at browser side.

This means that we are safe to cache on browser static pages and any other powr pages that we are not embedding somewhere, we can also cache them on cloudflare. If we cache some html page on cloudflare,then when we deploy new feature we have to clear cloudflare cache for:

  1. html page (if it is cached in cloudflare)
  2. all corresponding js and css pages that are loaded in that html page This way we make sure that for ex: /unlimited html is updated for users so they will also grab new version of js and css files.

On the other hand for endpoints that we embed on some third party sites we need to either remove browser cache or set much smaller ttl.

when user load some site which has our plugin app embedded in it, it will be loaded via iframe, which means contents of that iframe will be cached in browser. currently we cache for 24 hours, next time we deploy new feature, many users with cached version of plugin will still have old version

Based on that discussion it is better to:

  1. keep browser cache for all non-embed pages/endpoints (so we decided to remove second task for static pages)
  2. set small cache ttl for embedded endpoints (we agreed on 5 or 10 mins, first task for views)

Also we need our smart cf cache feature: currently in my POC it works for js and css files, during deploy I compare old and new packs one by one and if they differ clear cache for that particular pack. But, since we cache many html pages on cloudfalre as well, we also have to clear cache for them when any js/css pack included in those html pages is cleared.

Based on that we think we need to create some kind of map: js/css pack --> html page to store dependency on which html to clear for which js/css pack. for ex: if we changed auto_docs-show.js then we need to clear all tuturial pages as well. we think it is feasible, as it is possible to find all headers['Cache-Control'] places and check what js/css files are loaded there and which template is returned. It is going to be a bit manual task probably.

Me and Ily will write some specs for this task and I will deal with it in this sprint.