Script Distribution and Cache

Today I'll work on figuring out the script distribution.

Distribution

First, I need to decide how to distribute it. There seem to be two valid approaches:

1. CDN
2. Npm Package

I'll go with CDN for now. It seems to cover more use cases and is easier to set up and maintain. There seems to be an easier of doing it with jsDelivr, but I'm really wary of using multiple third party "free" solutions, as I've had bad experiences in the past. I also don't like the url scheme and I would rather host it on my own domain.

I'm going to provide the users with a simple snippet:

  <script 
    defer 
    src="https://cdn.barelytics.io/script.js"
    data-url="/event"
    data-id="the-user-id">
  <script>

The two parameters are the client id and the url. Making the url configurable allows the clients to set up a proxy to avoid adblockers. The fallback is the barelytics api.

The repo where I keep it is going to be public and I'm going to build and publish a minified version. For now, I'll publish only a single version (the latest) and disable caching. The script is very small so it'll be irrelevant. I can always go back to this and improve it.

I've published the script in a public repo and set up a pipeline that will publish it. Now to set up the caching.

Caching

I will configure Cloudflare to ignore the nginx settings completely and keep the latest version cached for 1 minute. This should guard me from spikes while keeping the near instant releases.

roko@roko-pc:~$ curl -I https://cdn.barelytics.io/script.min.js
...
cache-control: public, max-age=14400
age: 45
cf-cache-status: HIT
...

The cache now lives on Cloudflare for 59 seconds (HIT). A second later:

roko@roko-pc:~$ curl -I https://cdn.barelytics.io/script.min.js
...
cache-control: public, max-age=14400
cf-cache-status: REVALIDATED
...

But this still doesn't solve the issue of browsers caching the file. The max-age is being set by Cloudflare. I can resolve this by setting the TTL on nginx

add_header Cache-Control "public, max-age=60";

...and configuring Cloudflare to respect it.

And if I check again..

roko@roko-pc:~$ curl -I https://cdn.barelytics.io/script.min.js
...
cache-control: public, max-age=60
age: 3
cf-cache-status: HIT
...

Tada! Took a little bit of time, but I now understand and can fine tune my caching as requirements change.

I've deployed the new script and it seems to be working fine. Next time I'll set up the proxy on the landing page and add it there too.

Some next steps:

• Distribution

  • Identification inside scripts (eventually, not necessary yet)

• Design and Branding

  • So the app doesn't look like shit and I can start marketing

• Landing Page

  • To start testing goals
  • To start marketing