Add caching directives to phetio htaccess files

[mattpen]

phet-io-dev.colorado.edu is now being routed through Cloudflare's caching service. We'd like to add caching to phet-io to minimize disruptions from CU downtime. I tried adding the caching directives to the root .htaccess file, and cloudflare started caching everything which means that most authenticated resources will be cached regardless of authentication status.

I think the easiest way to fi this will be to update writePhetioHtaccess.js so that it adds the caching directives anywhere authentication is not required.

Another option would be investigating whether Cloudflare offers edge side authentication services, so these files could both be authenticated and cached.

@zepumph - what do you think? Would you be able to support me with this change?

[zepumph]

Caching directives seems very reasonable to me, couldn't we just put that at the top level somehow and exclude password protected resources?

[mattpen]

@zepumph - I'm not sure how we would do that. Can you elaborate?

[zepumph]

@mattpen and I discussed in person, and he is definitely write about editing each individual htaccess files. Thanks!

[mattpen]

@zepumph - I think I found a solution that works for the sims. Let's discuss the best way to propogate this to all the "latest" sims.

[zepumph]

Is there a timeline on this? I'm happy to kick off an MR for all latest phet-io sims.

[mattpen]

@zepumph - This would be good to have in place before we switch over phet-io.colorado.edu as well. Could you get this done this week?

[kathy-phet]

Cool - and nice use of priority top label!

[zepumph]

Currently kicking off redeploys. Here is the list of sims I'm using (from the "active" phet-io MR list)

Older sims with an en.html main file instead of an all will not get caching currently, but I don't know that that is mission critical. I'll double check during phet-io meeting today.

``` balloons-and-static-electricity 1.3-phetio beers-law-lab 1.7 build-an-atom 1.5-phetio calculus-grapher 1.0 capacitor-lab-basics 1.6 center-and-variability 1.0 charges-and-fields 1.0-phetio circuit-construction-kit-dc 1.3 circuit-construction-kit-dc-virtual-lab 1.3 color-vision 1.2-phetio concentration 1.5-phetio concentration 1.7 density 1.1 energy-forms-and-changes 1.4 energy-skate-park-basics 1.3-phetio faradays-law 1.3-phetio forces-and-motion-basics 2.2-phetio forces-and-motion-basics 2.3-phetio friction 1.6 geometric-optics 1.3 geometric-optics-basics 1.3 graphing-quadratics 1.2 graphing-quadratics 1.3 gravity-and-orbits 1.5 gravity-and-orbits 1.6 gravity-force-lab 2.2 greenhouse-effect 1.0 john-travoltage 1.4-phetio molarity 1.4 molecule-polarity 1.2 molecule-polarity 1.3 molecule-shapes 1.6 molecule-shapes-basics 1.6 molecules-and-light 1.3-phetio natural-selection 1.2 natural-selection 1.3 natural-selection 1.4 natural-selection 1.5 ph-scale 1.5 ph-scale 1.6 ph-scale-basics 1.5 ph-scale-basics 1.6 resistance-in-a-wire 1.3-phetio states-of-matter 1.2 states-of-matter-basics 1.2

[zepumph]

• [x] @mattpen and I discussed and we only want the caching directives for production deploy, and also to update the regex to have the sim name in it.

[zepumph]

Older sims with an en.html main file instead of an all will not get caching currently, but I don't know that that is mission critical. I'll double check during phet-io meeting today.

I discussed with @kathy-phet and we feel ok about leaving out the older simulation deploys (just en and on instance proxies). We just want to make sure they are still available (even if not cached).

• [x] Create a list of all the en html files that aren't getting cached so @kathy-phet can be clear to clients about this feature.

[zepumph]

Here is the active phet-io releases that generate an en sim file instead of an all and so will not be cached on cloudflare:

https://phet-io.colorado.edu/sims/john-travoltage/1.4.26-phetio/john-travoltage_en-phetio.html
https://phet-io.colorado.edu/sims/charges-and-fields/1.0.30-phetio/charges-and-fields_en-phetio.html
https://phet-io.colorado.edu/sims/molecules-and-light/1.3.22-phetio/molecules-and-light_en-phetio.html
https://phet-io.colorado.edu/sims/resistance-in-a-wire/1.3.22-phetio/resistance-in-a-wire_en-phetio.html
https://phet-io.colorado.edu/sims/balloons-and-static-electricity/1.3.25-phetio/balloons-and-static-electricity_en-phetio.html
https://phet-io.colorado.edu/sims/energy-skate-park-basics/1.3.24-phetio/energy-skate-park-basics_en-phetio.html
https://phet-io.colorado.edu/sims/forces-and-motion-basics/2.2.6-phetio/forces-and-motion-basics_en-phetio.html
https://phet-io.colorado.edu/sims/forces-and-motion-basics/2.3.2-phetio/forces-and-motion-basics_en-phetio.html
https://phet-io.colorado.edu/sims/build-an-atom/1.5.29-phetio/build-an-atom_en-phetio.html
https://phet-io.colorado.edu/sims/color-vision/1.2.26-phetio/color-vision_en-phetio.html
https://phet-io.colorado.edu/sims/concentration/1.5.24-phetio/concentration_en-phetio.html
https://phet-io.colorado.edu/sims/faradays-law/1.3.27-phetio/faradays-law_en-phetio.html

I used this script to make it happen:

```js ////////////////////// // List all _en sims. ( async () => { const simPhetioMetadata = require( '../perennial/js/common/simPhetioMetadata' ); const SimVersion = require( '../perennial/js/common/SimVersion' ); const execute = require( '../perennial/js/common/execute' ); const allSimsData = await simPhetioMetadata( { active: true } ); for ( const simObject of allSimsData ) { const simVersion = new SimVersion( simObject.versionMajor, simObject.versionMinor, simObject.versionMaintenance ); const name = simObject.name; const version = simVersion.toString(); const url = `https://phet-io.colorado.edu/sims/${name}/${version}/${name}_en-phetio.html`; const url2 = `https://phet-io.colorado.edu/sims/${name}/${version}-phetio/${name}_en-phetio.html`; if ( !( await execute( 'curl', [ '-I', url ] ) ).includes( '404 Not Found' ) ) { console.log( url ); } if ( !( await execute( 'curl', [ '-I', url2 ] ) ).includes( '404 Not Found' ) ) { console.log( url2 ); } } } )(); /////////////////// ```

[zepumph]

The redeploys are done, you can test to see that they are working by going to a file like

https://phet-io.colorado.edu/sims/beers-law-lab/1.7/beers-law-lab_all_phet-io.html?phetioStandalone

and in the dev tools network tab, seeing a response header like:

Cache-Control: max-age=86400, public, stale-while-revalidate=5184000, stale-if-error=5184000

script that did the redeploys: Note that FAMB 2.2-phetio failed, but I ended up ignoring it because it fell into the en.html category mentioned above that we won't support with caching.

```js const x = [ [ 'balloons-and-static-electricity', '1.3-phetio' ], [ 'beers-law-lab', '1.7' ], [ 'build-an-atom', '1.5-phetio' ], [ 'calculus-grapher', '1.0' ], [ 'capacitor-lab-basics', '1.6' ], [ 'center-and-variability', '1.0' ], [ 'charges-and-fields', '1.0-phetio' ], [ 'circuit-construction-kit-dc', '1.3' ], [ 'circuit-construction-kit-dc-virtual-lab', '1.3' ], [ 'color-vision', '1.2-phetio' ], [ 'concentration', '1.5-phetio' ], [ 'concentration', '1.7' ], [ 'density', '1.1' ], [ 'energy-forms-and-changes', '1.4' ], [ 'energy-skate-park-basics', '1.3-phetio' ], [ 'faradays-law', '1.3-phetio' ], [ 'forces-and-motion-basics', '2.2-phetio' ], // FAILURE [ 'forces-and-motion-basics', '2.3-phetio' ], [ 'friction', '1.6' ], [ 'geometric-optics', '1.3' ], [ 'geometric-optics-basics', '1.3' ], [ 'graphing-quadratics', '1.2' ], [ 'graphing-quadratics', '1.3' ], [ 'gravity-and-orbits', '1.5' ], [ 'gravity-and-orbits', '1.6' ], [ 'gravity-force-lab', '2.2' ], [ 'greenhouse-effect', '1.0' ], [ 'john-travoltage', '1.4-phetio' ], [ 'molarity', '1.4' ], [ 'molecule-polarity', '1.2' ], [ 'molecule-polarity', '1.3' ], [ 'molecule-shapes', '1.6' ], [ 'molecule-shapes-basics', '1.6' ], [ 'molecules-and-light', '1.3-phetio' ], [ 'natural-selection', '1.2' ], [ 'natural-selection', '1.3' ], [ 'natural-selection', '1.4' ], [ 'natural-selection', '1.5' ], [ 'ph-scale', '1.5' ], [ 'ph-scale', '1.6' ], [ 'ph-scale-basics', '1.5' ], [ 'ph-scale-basics', '1.6' ], [ 'resistance-in-a-wire', '1.3-phetio' ], [ 'states-of-matter', '1.2' ], [ 'states-of-matter-basics', '1.2' ] ]; ///////////////////////////// // Redeploy all versions // const production = require( '../perennial/js/grunt/production' ); ( async () => { for ( const simVersion of x ) { console.log( simVersion ); await production( simVersion[ 0 ], simVersion[ 1 ], [ 'phet-io' ], true, true ); } } )(); ////////////////////////////// ```

@mattpen, now that https://github.com/phetsims/perennial/commit/f96d2dc8110becaca8b55ce26d953602e2215196 is complete. I think all that is left is to restart the build server and confirm no caching headers on phet-dev.

[mattpen]

I pulled the latest changes and restarted the build-server on phet-server2.

@zepumph - it looks like bumper on phet-dev has caching, is this expected? Do we need to do another MR to remove it?

$ curl -Is 'https://phet-dev.colorado.edu/html/bumper/19.9.0/phet-io/bumper_all_phet-io.html?postMessageOnError&phetioStandalone' | grep -i cache
Cache-Control: max-age=86400, public, stale-while-revalidate=5184000, stale-if-error=5184000

[zepumph]

Sorry if this is stupid and obvious, but you also redeployed bumper right?

[mattpen]

OK, redeployed bumper and phet-dev is looking good now.