offline reference is broken, langs not defined and blobs not loading

[takyano]

Actual Behaviour

Reference examples are not loading in offline reference

Errors in Edge 91.0.864.48 (64-bit) DevTools:

Uncaught ReferenceError: langs is not defined at window.onload init.js:53

Not allowed to load local resource: blob:null/de33675c-0930-4938-8c37-1d3dce8f93fc index.html#/p5.Color/toString:1

Uncaught (in promise) DOMException: The user aborted a request.

Similar errors in Chrome 91.0.4472.101 (64-bit).

Firefox 89.0(64-bit) shows the langs not defined error, but still loads the page

Expected Behaviour

The examples in offline reference pages should load

Steps to reproduce it

download and unzip the offline reference
open index.html
select a reference link

Screenshots of the issue

Would you like to work on the issue?

This is multiple issues:

1. langs is not defined by the time init.js runs
2. local resources aren't allowed to be loaded in a local webpage

text/plain: Restrictions on File Urls

This should be assigned to someone with a deeper understanding of the rendering process for the offline reference.

[limzykenneth]

I'll have a look at this.

[limzykenneth]

Ok here's what I found. The langs not found error is not related to the problem at all and in this case can be ignored (we haven't implemented translated offline documentation yet so it's doing nothing anyway).

The problem is the error Not allowed to load local resource: blob:null/2d797ac6-f714-4ae8-a6e6-10bf0a1d6fa9 and others like it, which I tracked down to being spawned by p5.sound when it is trying to create web workers using blobs. Chrome doesn't seem to like that when running without a server. I think the code to create web workers like this doesn't come from the source code of p5.sound itself but maybe some other dependencies but I'm not familiar enough with p5.sound to say for sure.

I'm not sure how solvable this is. If p5.sound can avoid this blob worker creation then this won't be a problem but I imagine that probably isn't realistic. Removing p5.sound from the offline reference also has a bunch of problems of its own. Maybe we need to rethink offline reference entirely.

A bit of relevant unminified code for reference plucked from p5.sound itself

var t = new Blob(["var timeoutTime = " + (1e3 * this._updateInterval).toFixed(1) + ";self.onmessage = function(msg){\ttimeoutTime = parseInt(msg.data);};function tick(){\tsetTimeout(tick, timeoutTime);\tself.postMessage('tick');}tick();"]),
  e = URL.createObjectURL(t),
  n = new Worker(e);
return n.addEventListener("message", function() {
  this.emit("tick")