Steve Griffith prof3ssorSt3v3

Cache API

How Do I???

So, for all these examples the assumed set up is a main.js file that imports a cache.js file. All the methods dealing with the cache(s) will be inside the cache.js file and will return a Promise. Here is an example of a function inside the main.js file that calls a function in cache.js and receives a Promise in return. The code in main.js uses a then() to wait for the completion of the code in cache.js.

//main.js

	const names = ['sheldon', 'amy', 'penny', 'leonard', 'raj', 'buffy', 'howard', 'bernadette'];

	const DEMO = {
	cacheref: null,
	cachename: 'gelatenous-cube',
	cacheReady: false, //change to true after files are saved in the cache
	init() {
	//build a bunch of files and save them in the cache
	//then read all the files from the cache
	DEMO.addListeners();

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	p {
	padding: 1rem;

	// structuredClone( ) method
	const log = console.log;
	//objects with primitives
	let obj1 = { prop1: 'abc', prop2: 123 };

	//objects containing objects
	let names = ['fred', 'velma', 'daphne', 'shaggy'];
	let obj2 = { prop3: 'def', prop4: names };

	//objects with non-serializable props

	document.addEventListener('DOMContentLoaded', () => {
	document.body.addEventListener('click', getData);
	});

	function getData(ev) {
	//get some data from the random-data-api
	const type = 'users'; // beers users credit_cards addresses
	const url = new URL(`https://random-data-api.com/api/v2/${type}`);
	let params = new URLSearchParams();
	//size - number of records to return (default is 1)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>RoboHash API</title>
	<style>
	html {
	font-size: 20px;

	const log = console.log;
	//Strong Ref and Reachability - the default state
	let person = { id: 123, name: 'Shaggy' };
	let list = [person];
	person = null; //destroys one reference
	//person list[0]
	// log(list);
	// log(person);

	//Set - unique list of values, any datatype, strong ref

	const APP = {
	currentPage: 'home',
	init() {
	//page has loaded
	},
	addListeners() {
	//add DOM listeners
	},
	navigate(page) {
	//navigate to a new page


	const version = 6;
	const cacheName = `HanShotFirst${version}`;
	const cacheList = [
	'./',
	'./index.html',
	'./css/main.css',
	'./js/app.js',
	'./manifest.json',
	'./img/android-chrome-192x192.png',