CodeFrame does not cache p5 library in service worker or browser cache on Chromium

[stalgiag]

Chromium browsers do not cache the p5 library used for examples. This is a limitation on the use of iframes with a srcdoc attribute on Chromium as documented here. As a result, pages like the arc() reference download the p5 library for each example. This happens regardless of service worker scope, origin, etc as far as I can tell. This does not happen on Firefox or Safari.

Some solution using iframe and srcdoc may exist that I do not see but afaik there are two possible approaches from here:

1. Generate HTML files to serve for the src attribute of the iframe ala _arc_reference_example_1.html. This is similar to what happens on the current p5 sites's example pages.
2. Make the CodeFrame component use p5 instance mode to render the canvas directly into the body without an iframe/document wrapper. This is how the current p5.js site handles reference sketches.

I believe that 2 is cleaner but I am open to alternatives. I think that the equivalent code from the current p5 website is here.

Potentially useful links:

• This wiki which explains p5.js global versus instance mode
• Astro's client directives, to prevent library code from running during static build

[stalgiag]

Mostly fixed but leaving it open as this is still an issue with embeds that asynchronously load their code assets (ie SketchEmbed). These are rare and the impact is small so this can be addressed in the future.