Offline mode #8

See previous work on cabin.html and deeper discussion on GDPR.

Partly solved via dependecies/ from 7632ad51e6

See the https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/minimum branch that can be tested live at https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/branch_minimum.html .

See documentation on https://twitter.com/utopiah/status/1598333807941271553 :

scrcpy for mirroring, including wirelessly
modified AFrame for assets like hands models and fonts 4813372f3f
same for some components, e.g <a-troika-text> https://github.com/lojjic/aframe-troika-text
npm run dev with NAF default adapter https://github.com/networked-aframe/networked-aframe

Process :

open the browser console with its network tab
disable cache
reload page
pause and copy the HAR (Http ARchive) trace
in the console tab save the trace as the har variable
parse it, cf example below, to find requests not on the current domain
iterate until all requests necessary for the required featured are on the current domain
iterate then with the right subdirectory, i.e relative links instead of absolute
iterate in VR as some content might be pulled only then, e.g 3D models for hand tracking

outsideDomainURLs = har.log.entries
.filter( i => i.request.headers[0].value != window.location.hostname)
.map( r => r.request.url )

outsideSubdirectory = har.log.entries
.filter( i => i.request.headers[0].value == window.location.hostname && i.request.url.indexOf(window.location.pathname) < 0)
.map( r => r.request.url )

failedURLs = har.log.entries
.filter( i => i.response.status != 200)
.map( r => r.request.url )

console.log("\noutsideDomainURLs:", outsideDomainURLs, "\noutsideSubdirectory:", outsideSubdirectory, "\nfailedURLs:", failedURLs)

Can also take the occasion to make other requests optional with fallbacks.

Note that beside have local copies libraries might need to have a CDN or content URL updated accordingly, even forced in their bundled code if no such option is available. Overall it would be a good habit to document such dependencies beyond code.

To best check in VR use remote debugging from the browser to have logs again, modify then refresh.

Optionally consider the large files

largestFiles = har.log.entries
.sort( (a,b) => b.response.bodySize-a.response.bodySize )
.map( r => { return {size:r.response.bodySize/1000000+"Mb",url:r.request.url}} )
.slice(0,5)

Consider gltf-transform optimize with --compress none https://gltf-transform.donmccurdy.com/cli.html as Draco helps but isn't required.

Should also consider a function or component template, or at least documented as good practice, insuring new features can reliably used offline with minimum setup.

Example for shiki and <a-console> 841980a10c showing how convenient it can be.

See also https://github.com/lojjic/aframe-troika-text/issues/72 setting defaultFontURL directly in hosted version and downloading the font in ../content/.

Getting relative file list from parent directory

har.log.entries
.map(r=>r.request.url.replace("https://fabien.benetou.fr/pub/home/future_of_text_demo/",""))
.join("\n")

Should still add files loaded later, e.g hand and controller models in AFrame.

This can then be grabbed via tar -cvf offline.tar -T filestopack but will miss some like engine/leftHand.glb and engine/leftHand.glb but also controllers (which are rarely used, if ever packed).

A deploy/build/packaged script should automate some steps, including replacing hardcoded values on some dependencies when CDN options are not available.

cd engine
curl https://aframe.io/releases/1.4.1/aframe.min.js | sed "s|https://cdn.aframe.io/controllers/oculus-hands/v4/||g" > dependencies/aframe.offline.min.js
wget https://cdn.aframe.io/controllers/oculus-hands/v4/left.glb -O left.glb 
wget https://cdn.aframe.io/controllers/oculus-hands/v4/right.glb -O right.glb
cd ..
tar -cvf offline.tar -T filestopack

meanwhile on the client it can be updated via

wget https://fabien.benetou.fr/pub/home/future_of_text_demo/offline.tar -O offline.tar && tar -xvf offline.tar