Storage

• Storage object of the Web Storage API provides access to the session storage or local storage for a particular domain. This allows you to read, add, modify, and delete stored data items
• localStorage - stores data with no expiration date
• sessionStorage - stores data for one session (data is lost when the browser tab is closed)
• properties / methods
  • key(n) - name of the nth key in the storage
  • length - number of data items stored in the Storage object
  • getItem(keyname) - value of the specified key name
  • setItem(keyname, value) - adds that key to the storage, or update that key's value if it already exists
  • removeItem(keyname) - removes that key from the storage
  • clear() - empty all key out of the storage
• you can get ans set values with dot notation (sessionStorage.test1) or accessing key (sessionStorage["test1"])
• cookieStore ...

    var local_storage = document.getElementById("local_storage");
    var session_storage = document.getElementById("session_storage");
    var session_storage = document.getElementById("session_storage");

    function storageClickCounter() {
      if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
          localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
          localStorage.clickcount = 1;
        }
        if (sessionStorage.clickcount) {
          sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        } else {
          sessionStorage.clickcount = 1;
        }
        local_storage.innerHTML = "localStorage: " + localStorage.clickcount;
        session_storage.innerHTML = "sessionStorage: " + sessionStorage.clickcount;
      } else {
        local_storage.innerHTML = "Sorry, your browser does not support web storage...";
      }
    }

    function storageClickCounterReset() {
      if(typeof(Storage) !== "undefined") {
        localStorage.clickcount = 0;
        sessionStorage.clickcount = 0;
        local_storage.innerHTML = "localStorage have no clicks registered";
        session_storage.innerHTML = "sessionStorage have no clicks registered";
      } else {
        local_storage.innerHTML = "Sorry, your browser does not support web storage...";
      }
    }

    ;(function () {
      if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
          local_storage.innerHTML = "localStorage: " + localStorage.clickcount;
        } else {
          local_storage.innerHTML = "localStorage have no clicks registered";
        }
        if (sessionStorage.clickcount) {
          session_storage.innerHTML = "sessionStorage: " + sessionStorage.clickcount;
        } else {
          session_storage.innerHTML = "sessionStorage have no clicks registered";
        }
      } else {
        local_storage.innerHTML = "Sorry, your browser does not support web storage...";
      }
    })();
  

IndexedDB

• low-level API for client-side storage of significant amounts of structured data, including files/blobs
• transactional database system (like an SQL-based RDBMS), JS-based object-oriented database (unlike fixed-column tables in RDBMSes), lets you store and retrieve objects that are indexed with a key; any objects supported by the structured clone algorithm can be stored, you need to specify the database schema, open a connection to your database, and then retrieve and update data within a series of transactions
• concepts
  • stores key-value pairs - values can be complex structured objects, and keys can be properties of those objects or binary
  • transactional database model - indexes, tables, cursors,... are tied to a particular transaction
  • mostly asynchronous - you request something, and wait for result
  • uses a lot of requests
  • uses DOM events to notify you when results are available
  • object-oriented - object store for a type of data
  • does not use Structured Query Language (SQL) - uses queries on an index that produces a cursor, which you use to iterate across the result set
  • adheres to a same-origin policy
• definitions
  • database - repository of information, comprising one or more object stores, must have the following: name, version
  • durable - in a readwrite transaction IDBTransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk
  • object store - mechanism by which data is stored in the database, holds key-value pairs records, sorted according to the keys in an ascending order, can optionally have a key generator and a key path (in-line keys, or out-of-line keys when tithout)
  • version - initially is equal to 1, changes by opening database with a greater version than the current one, this will start a versionchange transaction and fire an upgradeneeded event, the only place where the schema of the database can be updated is inside the handler of that event
  • database connection - operation created by opening a database, database can have multiple connections at the same time
  • transaction - an atomic set of data-access and data-modification operations on a particular database, can be aborted (rolls back the changes made), everything in IndexedDB always happens in the context of a transaction, representing interactions with data in the database, all objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction, you cannot execute commands, access data, or open anything outside of a transaction
  • request - operation by which reading and writing on a database is done, represents one read or write operation
  • index - persistent, key-value, specialized, object store for looking up records in another object store, called the referenced object store, records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted, each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store, when the object store changes, all indexes that refer to the object store are automatically updated, alternatively, you can also look up records in an object store using the key
  • key - data value by which stored values are organized and retrieved in the object store, object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it (unique), types: string, date, float, a binary blob, and array (from an empty value to infinity, and an array within an array)
  • key generator - mechanism for producing new keys in an ordered sequence OR application must provide keys for records being stored, generators are not shared between stores
  • in-line key - stored as part of the stored value, found using a key path, can be generated using a generator then be stored in the value using the key path or it can also be used as a key
  • out-of-line key - stored separately from the value being stored
  • key path - defines where the browser should extract the key from in the object store or index, can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those, cannot include spaces
  • value - blob, files, boolean, number, string, date, object, array, regexp, undefined, and null, when an object or array is stored, the properties and values in that object or array can also be anything that is a valid value
  • scope - set of object stores and indexes to which a transaction applies, scopes of read-only transactions can overlap and execute at the same time, scopes of writing transactions cannot overlap, several transactions with the same scope at the same time just queue up and execute one after another
  • cursor - mechanism for iterating over multiple records with a key range, has a source that indicates which index or object store it is iterating, has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys
  • key range - continuous interval over some data type used for keys
• limits
  • internationalized sorting is not supported
  • not designed to take care of synchronizing with a server-side database
  • does not have an equivalent of the LIKE operator in SQL
  • database is wiped when: user requests(!), end of the private session, disk or quota limit, data is corrupt, incompatible change is made to the feature
• errors
  • ReadOnlyError
  • TransactionInactiveError
  • InvalidStateError - IDBObjectStore has been deleted or removed
  • DataCloneError - data being stored could not be cloned by the internal structured cloning algorithm
  • ConstraintError - duplicate name
  • InvalidAccessError - data being stored could not be cloned by the internal structured cloning algorithm
  • InvalidStateError - the cursor was created using IDBIndex.openKeyCursor, is currently being iterated, or has iterated past its end
  • DataError
    • object store uses in-line keys or has a key generator, and a key parameter was provided
    • object store uses out-of-line keys and has no key generator, and no key parameter was provided
    • object store uses in-line keys but no key generator, and the object store's key path does not yield a valid key
    • key parameter was provided but does not contain a valid key

    var idb_result = document.getElementById("idb_result"),
        db,
        db_name = document.getElementById("db_name"),
        db_store = document.getElementById("db_store"),
        obj_key = document.getElementById("obj_key");
    var rnd_str = () => {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (var i = 0; i < 3; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      return text;
    };
    var rnd_int = () => (Math.floor(Math.random() * 1000) + 1);

    function initDB() {
      idb_result.innerHTML = '';
      window.indexedDB =  window.indexedDB ||
                          window.mozIndexedDB ||
                          window.webkitIndexedDB ||
                          window.msIndexedDB;
      // you may need references to some window.IDB* objects:
      window.IDBTransaction = window.IDBTransaction ||
                              window.webkitIDBTransaction ||
                              window.msIDBTransaction;
      window.IDBKeyRange =  window.IDBKeyRange ||
                            window.webkitIDBKeyRange ||
                            window.msIDBKeyRange;
      if(!window.indexedDB) {
        idb_result.innerHTML += 'Unable to init IndexDB objects !!!';
      }

      // open database
      var DBOpenRequest = window.indexedDB.open(db_name.value); // .open(db_name, 3)
      DBOpenRequest.onblocked = function() {
        idb_result.innerHTML += 'Database is open somewhere else (onblocked)';
      };
      DBOpenRequest.onerror = function(event) {
        idb_result.innerHTML += 'Error loading database (onerror)';
      };
      DBOpenRequest.onsuccess = (event) => {
        db = DBOpenRequest.result; // save connection
        db.onerror = function(event) {
          idb_result.innerHTML += 'Database error: '+event.target.errorCode+'';
        };
        idb_result.innerHTML += 'Database ['+db.name+'] [v.'+db.version+'] initialised, stores: ';
        for (store of db.objectStoreNames) {
          idb_result.innerHTML += '['+store+'] ';
        }
        idb_result.innerHTML += '';
      };

      // create or update db
      DBOpenRequest.onupgradeneeded = (event) => {
        var db = DBOpenRequest.result;
        db.onerror = function(event) {
          idb_result.innerHTML += 'Error loading database (onerror)';
        };
        db.onabort = function() {
          idb_result.innerHTML += 'Error loading database (onabort)';
        };
        db.onversionchange = function(event) {
          idb_result.innerHTML += 'Database change has occurred (onversionchange)';

          if (event.newVersion == 2) {
            db.deleteObjectStore(db_store.value); // only inside upgrade and versionchange event
          }

        };
        db.onclose = function(event) {
          idb_result.innerHTML += 'Database [' + db.name + '] has (unexpectedly?) closed (onclose)';
        };

        // database doesnt exist yet, the value of oldVersion is 0
        if (event.oldVersion < 1) {
          // Create an objectStore for this database
          var objectStore = db.createObjectStore(db_store.value, { keyPath: "title" });
          // define what data items the objectStore will contain
          objectStore.createIndex("title", "title", { unique: false });
          objectStore.createIndex("listeners", "listeners", { unique: false });

          var initial_albums = [
            {
              title:"any_title",
              listeners:5345
            }
          ];
          initial_albums.forEach(function(customer) {
            objectStore.add(customer);
          });
        }

        // // MIGRATIONS, consecutive schema update
        // if (event.oldVersion < 2) {
        //   // version 2 introduces a new index of books by year.
        //   var bookStore = DBOpenRequest.transaction.objectStore("books");
        //   var yearIndex = bookStore.createIndex("by_year", "year");
        //   var del_index = objectStore.deleteIndex("contact");
        //   // ... version 3 introduces a new object store for magazines with two indexes.
        //   var magazines = db.createObjectStore("magazines");
        //   var publisherIndex = magazines.createIndex("by_publisher", "publisher");
        //   var frequencyIndex = magazines.createIndex("by_frequency", "frequency");
        //   // ... version 4
        //   db.createObjectStore("names", { autoIncrement : true });
        //   // ... version 5
        //   db.deleteObjectStore("names"); // only inside upgrade and versionchange event
        // }

      };
    }
    function get_transaction (t_mode = "readwrite") {
      if(!db) return;
      // transaction = db.transaction(db.objectStoreNames); // all stores
      // specific store
      // opens an object store that we can then manipulate the data inside of
      // var objectStore = db.transaction('toDoList').objectStore('toDoList');
      var transaction = db.transaction([db_store.value], t_mode);
      // report on the success of opening the transaction
      transaction.oncomplete = function(event) {
        idb_result.innerHTML += 'Transaction completed';
      };
      transaction.onerror = function(event) {
        idb_result.innerHTML += 'Transaction not opened due to error: '+transaction.error+'';
      };
      return transaction;
    }
    function closeDB() {
      if(!db) return;
      idb_result.innerHTML = '';
      var db_close = db.close();
      db=undefined;
      idb_result.innerHTML += '['+db_name.value+'] database closed';
    }
    function clearStore() {
      if(!db) return;
      idb_result.innerHTML = '';
      var store_clear = get_transaction().objectStore(db_store.value).clear();
      store_clear.onsuccess = function(event) {
        idb_result.innerHTML += '['+db_store.value+'] store cleared successfully';
      };
      store_clear.onsuccess = function(event) {
        idb_result.innerHTML += 'Error clearing ['+db_store.value+'] store';
      };
    }
    function deleteDB() {
      idb_result.innerHTML = '';
      closeDB();
      var db_del = window.indexedDB.deleteDatabase(db_name.value);
      db_del.onerror = function(event) {
        idb_result.innerHTML += 'Error deleting ['+db_name.value+'] database';
      };
      db_del.onsuccess = function(event) {
        idb_result.innerHTML += 'Database ['+db_name.value+'] deleted successfully';
      };
    }
    function deleteStore() {
      idb_result.innerHTML = '';
      // call higher version to delete inside version change event
      window.indexedDB.open(db_name.value, 2);
    }
    function addData() {
      if(!db) return;
      idb_result.innerHTML = '';
      var objectStore = get_transaction().objectStore(db_store.value);
      var data_obj = {
        title:rnd_str(),
        listeners:rnd_int()
        // ,blob: xhr.response
      };
      var objectStore_request = objectStore.add(data_obj);
      objectStore_request.onsuccess = function(event) {
        // report the success of the request (this does not mean the item
        // has been stored successfully in the DB - for that you need transaction.onsuccess)
        idb_result.innerHTML += 'Data added: ';
        for (x in data_obj) {
          idb_result.innerHTML += x+': '+data_obj[x]+' ';
        }
        idb_result.innerHTML += '';
      };
    }
    function getByKey() {
      if(!db) return;
      idb_result.innerHTML = '';
      get_transaction()
      .objectStore(db_store.value)
      .get(obj_key.value)
      .onsuccess = function(event) {
        if(!event.target.result) {
          idb_result.innerHTML += 'Nothing found !';
          return;
        }
        idb_result.innerHTML += 'Data by key: ';
        for (x in event.target.result) {
          idb_result.innerHTML += x+': '+event.target.result[x]+' ';
        }
        idb_result.innerHTML += '';
      };
    }
    function deleteByKey() {
      if(!db) return;
      idb_result.innerHTML = '';
      get_transaction()
      .objectStore(db_store.value)
      .delete(obj_key.value)
      .onsuccess = function(event) {
        idb_result.innerHTML += 'Item with key '+obj_key.value+' deleted';
      };
    }
    function updateByKey() {
      if(!db) return;
      idb_result.innerHTML = '';
      var objectStore = get_transaction().objectStore(db_store.value);
      objectStore
      .get(obj_key.value)
      .onsuccess = function(event) {
        var data = event.target.result;
        data.listeners = data.listeners + 1000
        objectStore.put(data).onsuccess = function() {
          idb_result.innerHTML += 'Added 1000 listeners to '+data.title+'';
        };
      };
    }
    function countItems() {
      if(!db) return;
      idb_result.innerHTML = '';
      get_transaction()
      .objectStore(db_store.value)
      .count()
      .onsuccess = function(event) {
        idb_result.innerHTML += event.target.result+' items';
      }
    }
    function dataViaCursor(in_range = false) {
      if(!db) return;
      idb_result.innerHTML = '';
      if(in_range) {
        var keyRangeValue = IDBKeyRange.bound("A", "T", true, true);
        console.log([
          keyRangeValue.includes('W'), // if in range
          keyRangeValue.lower,
          keyRangeValue.upper,
          keyRangeValue.lowerOpen,
          keyRangeValue.upperOpen
        ]);
      }

      // // only "Donna"
      // IDBKeyRange.only("Donna");
      // // anything past "Bill", including "Bill"
      // IDBKeyRange.lowerBound("Bill");
      // // anything past "Bill", but don't include "Bill"
      // IDBKeyRange.lowerBound("Bill", true);
      // // anything up to, but not including, "Donna"
      // IDBKeyRange.upperBound("Donna", true);
      // // anything between "Bill" and "Donna", but not including "Donna"
      // IDBKeyRange.bound("Bill", "Donna", false, true);

      var objectStore = get_transaction().objectStore(db_store.value);

      if(in_range) {
        // in range in reverse order
        var osc = objectStore.openCursor(keyRangeValue,'prev');
      }
      else {
        // objectStore.openCursor(null,'prev');
        // nextunique, prevunique
        var osc = objectStore.openCursor();
      }

      osc.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {

          for (x in cursor.value) {
            idb_result.innerHTML += x+': '+cursor.value[x]+' ';
          }
          idb_result.innerHTML += '';

          // // Abort the transaction we just did
          // objectStore.transaction.abort();return;

          console.log([
            cursor.key,
            cursor.value,
            cursor.primaryKey,
            cursor.source,
            cursor.direction
          ]);

          cursor.continue();
          // cursor.advance(2);
        } else {
          idb_result.innerHTML += 'All entries displayed';
        }
      };

      console.log([
        // transaction.db,
        // transaction.mode,
        // transaction.objectStoreNames,
        objectStore.indexNames,
        objectStore.keyPath,
        objectStore.name, // available to rename
        objectStore.transaction,
        objectStore.autoIncrement
      ]);

      // var request = objectStore.openKeyCursor();
      // request.onsuccess = function(event) {
      //   var cursor = event.target.result;
      //   if(cursor) {
      //     // cursor.key contains the key of the current record being iterated through
      //     // note that there is no cursor.value, unlike for openCursor
      //     // this is where you'd do something with the result
      //     cursor.continue();
      //   } else {
      //     // no more results
      //   }
      // };

      // let today = new Date();
      // let yesterday = new Date(today);
      // yesterday.setDate(today.getDate() - 1);
      // let request = store.getKey(IDBKeyRange(yesterday, today));
      // request.onsuccess = (event) => {
      //   let when = event.target.result;
      //   alert("The 1st activity in last 24 hours was occurred at " + when);
      // };
    }
    function dataViaIndex() {
      if(!db) return;
      idb_result.innerHTML = '';
      var transaction = get_transaction('readonly');
      var objectStore = transaction.objectStore(db_store.value);
      var myIndex = objectStore.index('title');

      console.log([
        myIndex.isAutoLocale,
        myIndex.locale,
        myIndex.name,
        myIndex.objectStore,
        myIndex.keyPath,
        myIndex.multiEntry,
        myIndex.unique
      ]);

      myIndex.count().onsuccess = function(event) {
        idb_result.innerHTML += event.target.result+' items';
      }
      myIndex.getAllKeys().onsuccess = function(event) {
        idb_result.innerHTML += 'all keys: '+event.target.result+'';
      }
      // myIndex.myIndex.get('Bungle')
      // myIndex.getKey('Bungle')
      // myIndex.getAll()

      // let count = 0;
      // let unreadList = [];
      myIndex.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {

          // modify item while iterating
          if (cursor.value.title === 'AAA') {
            // // update
            // const updateData = cursor.value;
            // updateData.year = 2050;
            // const request = cursor.update(updateData).onsuccess = function() {};
            // // delete
            // var request = cursor.delete().onsuccess = function() {};
          };

          // let lastPrimaryKey = getLastIteratedArticleId();
          // if (lastPrimaryKey > cursor.primaryKey) {
          //   cursor.continuePrimaryKey("javascript", lastPrimaryKey);
          //   return;
          // }
          // // update lastIteratedArticleId
          // setLastIteratedArticleId(cursor.primaryKey);
          // // preload 5 articles into the unread list;
          // unreadList.push(cursor.value);
          // if (++count < 5) {
          //   cursor.continue();
          // }

          for (x in cursor.value) {
            idb_result.innerHTML += x+': '+cursor.value[x]+' ';
          }
          idb_result.innerHTML += '';

          cursor.continue();
        } else {
          idb_result.innerHTML += 'All entries displayed';
        }
      };
    }
  

interfaces

• IDBEnvironment - provides access to IndexedDB functionality, implemented by the window and worker objects, isn't part of the 2.0 specification
• indexedDB - IDBFactory object to access capabilities, methods :
  • open(name[,version]) - request opening a connection to a database (or create if not exists), returns an IDBOpenDBRequest object immediately, and performs the open operation asynchronously, may trigger success, error, upgradeneeded, blocked or versionchange events
  • deleteDatabase(name) - requests the deletion of a database, returns an IDBOpenDBRequest object immediately, and performs the deletion operation asynchronously, when called, any other open connections to this particular database will get a versionchange event
  • cmp(first,second) - compares two values as keys to determine equality and ordering for IndexedDB operations, such as storing and iterating
• IDBOpenDBRequest - provides access to the results of requests to open or delete databases (performed using IDBFactory.open and IDBFactory.deleteDatabase), using specific event handler attributes, properties (also inherits from IDBRequest and EventTarget):
  • onblocked - when the upgradeneeded event should be triggered because of a version change but the database is still in use (i.e. not closed) somewhere, even after the versionchange event was sent
  • onupgradeneeded - when a database of a bigger version number than the existing stored database is loaded
• IDBDatabase - represents a connection to a database, the only way to get a transaction on the database
  • properties
  • name - name of the connected databas
  • version - 64-bit integer that contains the version of the connected database, is an empty string when a database is first created
  • objectStoreNames - list of the names of the object stores currently in the connected database
  • events
  • onabort - when access of the database is aborted
  • onclose - when the close event occurs; this happens when the database is unexpectedly closed, such as during application shutdown
  • onerror - when access to the database fails
  • onversionchange - when a database structure change (IDBOpenDBRequest.onupgradeneeded event or IDBFactory.deleteDatabase() was requested elsewhere (most probably in another window/tab on the same computer), is different from the version change transaction (see IDBVersionChangeEvent), but it is related
  • methods
  • close() - returns immediately and closes the connection to a database in a separate thread, connection is not actually closed until all transactions created using this connection are complete, no new transactions can be created for this connection once this method is called, transaction() throw an exception if a closing operation is pending
  • createObjectStore(name[,{ keyPath:, autoIncrement:false|true]) - creates and returns a new object store or index, can be called only within a versionchange transaction
  • deleteObjectStore(name) - destroys the object store with the given name in the connected database, along with any indexes that reference it, can be called only within a versionchange transaction
  • transaction( storeName|[sN,sN,...] [,readonly|readwrite|readwriteflush] ) - immediately returns a transaction object (IDBTransaction) containing the IDBTransaction.objectStore method, which you can use to access your object store, runs in a separate thread, dont open a readwrite transaction unless you actually need to write into the database
• IDBTransaction - provides a static, asynchronous transaction on a database using event handler attributes, transactions are started when the transaction is created, not when the first request is placed
  • properties
  • db - associated database connection
  • error - type of error that occured when there is an unsuccessful transaction, is null if the transaction is not finished, finished and successfully committed or was aborted with IDBTransaction.abort function
  • mode - mode for isolating access to data in the object stores that are in the scope of the transaction: readonly, readwrite, versionchange
  • objectStoreNames - names of IDBObjectStore objects
  • events
  • onabort - transaction is aborted: bad requests(duplicate data,...), abort(), failure to write to disk, quota exceeded,...
  • oncomplete - transaction completes successfully
  • onerror - transaction fails to complete
  • methods
  • abort() - rolls back all the changes to objects in the database associated with this transaction, if this transaction has been aborted or completed, then this method throws an error event
  • objectStore(storeName) - IDBObjectStore object representing an object store that is part of the scope of this transaction
• IDBRequest - handles database requests and provides access to results, each reading and writing operation on a database is done using a request
  • properties (inherits from EventTarget)
  • error - unsuccessful request, what went wrong: NoError, AbortError, ConstraintError, QuotaExceededError, UnknownError, VersionError
  • result - result of the request, if the the request failed and the result is not available, an InvalidStateError exception is thrown
  • source - source of the request, such as an IDBIndex or an IDBObjectStore, if no source exists (such as when calling IDBFactory.open), it returns null
  • readyState - state of the request: pending|done, every request starts in the pending state, state changes to done when the request completes successfully or when an error occurs
  • transaction - transaction for the request, can be null for certain requests, for example those returned from IDBFactory.open unless an upgrade is needed (just connected to a database), and IDBTransaction (in versionchange mode) when version upgrade is needed when opening a database
  • events
  • onerror - error
  • onsuccess - success
  • methods (inherits from EventTarget)
• IDBObjectStore - represents an object store in a database, records within an object store are sorted according to their keys, this sorting enables fast insertion, look-up, and ordered retrieval
  • properties
  • indexNames - list of the names of indexes on objects in this object store
  • keyPath - key path of this object store, if is null, the application must provide a key for each modification operation
  • name - name of this object store
  • transaction - IDBTransaction object to which this object store belongs
  • autoIncrement - value of the auto increment flag for this object store
  • methods
  • add(value[,key]) - returns IDBRequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store, this is for adding new records to an object store
  • put(item[,PK_to_update]) - returns an IDBRequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store, this is for updating existing records in an object store when the transaction's mode is readwrite
  • get(key_or_IDBKeyRange) - returns an IDBRequest object, and, in a separate thread, returns the store object store selected by the specified key, this is for retrieving specific records from an object store
  • getAll([key_or_IDBKeyRange,count]) - returns an IDBRequest object retrieves all objects in the object store matching the specified parameter or all objects in the store if no parameters are given
  • delete(key_or_IDBKeyRange) - returns an IDBRequest object, and, in a separate thread, deletes the store object selected by the specified key, this is for deleting individual records out of an object store
  • clear() - creates and immediately returns an IDBRequest object, and clears this object store in a separate thread, this is for deleting all current records out of an object store
  • count([key_or_IDBKeyRange]) - returns an IDBRequest object, and, in a separate thread, returns the total number of records that match the provided key or IDBKeyRange, if no arguments are provided, it returns the total number of records in the store
  • index(name) - opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor
  • createIndex(indexName[, keyPath, {unique:false|true, multiEntry:true|false, locale:auto|locale_string}]) - creates a new index during a version upgrade, returning a new IDBIndex object in the connected database
  • deleteIndex(indexName) - destroys the specified index in the connected database, used during a version upgrade
  • getKey(key_or_IDBKeyRange) - returns an IDBRequest object, and, in a separate thread retrieves and returns the record key for the object in the object stored matching the specified parameter
  • getAllKeys([key_or_IDBKeyRange,count]) - returns an IDBRequest object retrieves record keys for all objects in the object store matching the specified parameter or all objects in the store if no parameters are given
  • openCursor([key_or_IDBKeyRange,next|nextunique|prev|prevunique]) - returns an IDBRequest object, and, in a separate thread, returns a new IDBCursorWithValue object, used for iterating through an object store by primary key with a curso
  • openKeyCursor([key_or_IDBKeyRange,next|nextunique|prev|prevunique]) - returns an IDBRequest object, and, in a separate thread, returns a new IDBCursor, used for iterating through an object store with a key
• IDBIndex - also allows access to a subset of data in an IndexedDB database, but uses an index to retrieve the record(s) rather than the primary key, sometimes faster than using IDBObjectStore
  • properties
  • isAutoLocale - whether the index had a locale value of auto specified upon its creation (see createIndex() optionalParameters)
  • locale - locale of the index (for example en-US, or pl) if it had a locale value specified upon its creation (see createIndex() optionalParameters)
  • name - name of this index
  • objectStore - name of the object store referenced by this index
  • keyPath - key path of this index, if null, this index is not auto-populated
  • multiEntry - affects how the index behaves when the result of evaluating the index's key path yields an array, if true, there is one record in the index for each item in an array of keys, if false, then there is one record for each key that is an array
  • unique - true, if this index does not allow duplicate values for a key
  • methods (inherits from EventTarget)
  • count([key_or_IDBKeyRange]) - returns an IDBRequest object, and in a separate thread, returns the number of records within a key range
  • get(key_or_IDBKeyRange) - returns an IDBRequest object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is an IDBKeyRange
  • getKey(key_or_IDBKeyRange) - returns an IDBRequest object, and, in a separate thread, finds either the given key or the primary key, if key is an IDBKeyRange
  • getAll([key_or_IDBKeyRange,count]) - returns an IDBRequest object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if key is an IDBKeyRange
  • getAllKeys([key_or_IDBKeyRange,count]) - returns an IDBRequest object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if key is an IDBKeyRange
  • openCursor([key_or_IDBKeyRange,next|nextunique|prev|prevunique]) - returns an IDBRequest object, and, in a separate thread, creates a cursor over the specified key range
  • openKeyCursor([key_or_IDBKeyRange,next|nextunique|prev|prevunique]) - returns an IDBRequest object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index
• IDBCursor - iterates over object stores and indexes, has a source that indicates which index or object store it is iterating over, has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys, cursor enables an application to asynchronously process all the records in the cursor's range, you can have an unlimited number of cursors at the same time, you always get the same IDBCursor object representing a given cursor, operations are performed on the underlying index or object store
  • properties
  • source - IDBObjectStore or IDBIndex that the cursor is iterating, never returns null or throws an exception, even if the cursor is currently being iterated, has iterated past its end, or its transaction is not active
  • direction - direction of traversal of the cursor: next, nextunique, prev, prevunique
  • key - key for the record at the cursor's position, undefined - if the cursor is outside its range
  • value - value for the record at the cursor position
  • primaryKey - current effective primary key. If the cursor is currently being iterated or has iterated outside its range, this is set to undefined
  • methods
  • advance() - sets the number times a cursor should move its position forward
  • continue() - advances the cursor to the next position along its direction, to the item whose key matches the optional key parameter
  • continuePrimaryKey(key,primaryKey) - sets the cursor to the given index key and primary key given as arguments
  • delete() - returns IDBRequest object, and, in a separate thread, deletes the record at the cursor's position, without changing the cursor's position, can be used to delete specific records
  • update(value) - returns IDBRequest object, and, in a separate thread, updates the value at the current position of the cursor in the object store, can be used to update specific records
• IDBCursorWithValue - iterates over object stores and indexes and returns the cursors current value, same as the IDBCursor, except that it includes the value property
  • properties (inherits from IDBCursor)
  • value - value of the current cursor, whatever that is
  • methods (inherits from IDBCursor)
• IDBKeyRange - continuous interval over some data type that is used for keys, records can be retrieved from IDBObjectStore and IDBIndex objects using keys or a range of keys, you can limit the range using lower and upper bounds
  • properties
  • lower - lower bound of the key range
  • upper - upper bound of the key range
  • lowerOpen - returns false if the lower-bound value is included in the key range
  • upperOpen - returns false if the upper-bound value is included in the key range
  • methods
  • bound(lower_key,upper_key[,lowerOpen_bool,upperOpen_bool]) - upper and lower bounds
  • only(key) - single value
  • lowerBound(lower_key[,open_bool]) - only a lower bound
  • upperBound(upper_key[,open_bool]) - upper-bound key range
  • includes() - whether a specified key is inside the key range
  • EXAMPLES
  • keys ≤ x - IDBKeyRange.upperBound(x)
  • keys < x - IDBKeyRange.upperBound(x, true)
  • keys ≥ y - IDBKeyRange.lowerBound(y)
  • keys > y - IDBKeyRange.lowerBound(y, true)
  • keys ≥ x && ≤ y - IDBKeyRange.bound(x, y)
  • keys > x && < y - IDBKeyRange.bound(x, y, true, true)
  • keys > x && ≤ y - IDBKeyRange.bound(x, y, true, false)
  • keys ≥ x && < y - IDBKeyRange.bound(x, y, false, true)
  • key = z - IDBKeyRange.only(z)
• IDBVersionChangeEvent - version of the database has changed, result of an IDBOpenDBRequest.onupgradeneeded event handler function
  • properties
  • oldVersion - old version of the database, when the opened database doesnt exist yet, is 0
  • newVersion - new version of the database
• DON'T use "var indexedDB = ..." if you're not in a function
• error events are targeted at the request that generated the error, then the event bubbles to the transaction, and then finally to the database object
• add a beforeunload and use IDBDatabase.onclose event to warn the user if any transactions have not yet completed at the time of unloading

different ways the keys are supplied

Workers

• perform tasks in background threads without interfering with the user interface
• created using Worker() constructor
• do not have access to the following JavaScript objects and returns error for: window, document, parent
• self property returns the specialized scope for each context
• WindowOrWorkerGlobalScope
  • properties
  • caches - CacheStorage object associated with the current context, enables functionality such as storing assets for offline use, and generating custom responses to requests
  • indexedDB - IDBFactory object, a mechanism for applications to asynchronously access capabilities of indexed databases
  • isSecureContext - Boolean indicating whether the current context is secure (true) or not (false)
  • origin - origin of the global scope, serialized as a string
  • methods
  • fetch() - starts the process of fetching a resource from the network
  • btoa(stringToEncode) - creates a base-64 encoded ASCII string from a string of binary data
  • atob(stringToDecode) - decodes a string of data which has been encoded using base-64 encoding
  • setInterval()
  • setTimeout()
  • clearInterval()
  • clearTimeout()
  • createImageBitmap( img[,options] | img,sx,sy,sw,sh[,options] ) - accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap, optionally the source is cropped to the rectangle of pixels originating at (sx,sy) with width sw, and height sh, options = {imageOrientation:none|flipY,premultiplyAlpha:none|premultiply|default, colorSpaceConversion:none|default, resizeWidth:,resizeHeight:,resizeQuality:pixelated|low|medium|high}
• dedicated worker (new Worker(aURL[,options_obj])) with its own own DedicatedWorkerGlobalScope is only accessible from the script that first spawned it
• options_obj = {type:classic|module, credentials:omit|same-origin|include, name:string}
• WorkerGlobalScope
  • properties
  • self - reference to the WorkerGlobalScope itself, most of the time it is a specific scope like DedicatedWorkerGlobalScope, SharedWorkerGlobalScope or ServiceWorkerGlobalScope
  • navigator - WorkerNavigator associated with the worker, specific navigator object, mostly a subset of the Navigator for browsing scopes, but adapted to workers
  • location - WorkerLocation associated with the worker, specific location object, mostly a subset of the Location for browsing scopes, but adapted to workers.
  • performance - regular performance object associated with the worker, only a subset of its property and methods are available to workers
  • console - Console associated with the worker
  • methods
  • importScripts() - imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas: importScripts('foo.js', 'bar.js');
  • close() - terminate worker
  • events
  • onmessage - interact with owner script(s), implicitly opens the port connection back to the parent thread for shared worker, so the call to port.start() is not actually needed
  • onerror - when the error event is raised
  • onoffline - when the offline event is raised
  • ononline - when the online event is raised
  • onlanguagechange - when the user preferred languages change
  • inherits properties and methods from EventTarget, WindowOrWorkerGlobalScope and WindowEventHandlers mixins
• shared workers (new SharedWorker(aURL[,name|options_obj])) with its own SharedWorkerGlobalScope can be accessed from multiple scripts, windows, iframes or even workers, properties
  • name - name that the SharedWorker was (optionally) given, mainly useful for debugging purposes
  • applicationCache - ApplicationCache object for the worker
• when using XMLHttpRequest the responseXML and channel attributes are always null
• Internet Explorer 9 and earlier versions do not support Web Workers

    var w_result = document.getElementById("w_result");

    var dw;
    function startDWorker() {
      if(!!window.Worker) { // or: typeof(Worker) !== "undefined"
        if(!dw) { dw = new Worker("js/worker-dedicated.js"); }
        dw.onmessage = function(e) {
          w_result.innerHTML = "dedicated worker: "+e.data+" "+w_result.innerHTML;
        };
        dw.port.onerror = function(e) {
          w_result.innerHTML = "dedicated worker: ERROR !";
        };
      } else {
        w_result.innerHTML += "Sorry, your browser does not support dedicated Worker...";
      }
    }
    function sendToDWorker() {
      if(dw) {
        dw.postMessage(Math.floor(Math.random() * 1000) + 1);
      }
    }
    function stopDWorker() {
      dw.terminate(); // free browser/computer resources
      // if you set the worker variable to undefined,
      // after it has been terminated, you can reuse the code
      dw = undefined;
    }

    var sw;
    function startSWorker() {
      if(!!window.SharedWorker) { // or: typeof(Worker) !== "undefined"
        if(!sw) {
          sw = new SharedWorker("js/worker-shared.js", "sharedWorker");
        }
        sw.port.onmessage = function(e) {
          w_result.innerHTML = "shared worker: "+e.data+" [lastEventId:"+e.lastEventId+"] "+w_result.innerHTML;
        };
        sw.onerror = function(e) {
          w_result.innerHTML = "shared worker: ERROR !";
          sw.port.close();
        };
        // sw.port.start(); // required when using: port.addEventListener('message',...
      } else {
        w_result.innerHTML += "Sorry, your browser does not support SharedWorker...";
      }
    }
    function sendToSWorker() {
      if(sw) {
        sw.port.postMessage(utils_randomInt());
      }
    }
    function stopSWorker() {
      if(sw) {
        sw.port.close();
      }
      sw = undefined;
    }

    // one Worker is created for each logical processor reported by the browser
    // and a record is created which includes a reference to the new worker
    // as well as a Boolean value indicating whether or not we're using that worker yet;
    // these objects are, in turn, stored into an array for later use.
    // This creates a pool of workers we can use to process requests later
    let workerList = [];
    for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
      let newWorker = {
        worker: new Worker('cpuworker.js'),
        inUse: false
      };
      workerList.push(newWorker);
    }
  

js/worker-dedicated.js

    var nr = 1, d = new Date();
    function timedCount() {
      postMessage("pulse " + (nr++)); //  post a message back to the HTML page
      setTimeout(timedCount, 1000);
    }
    timedCount();
    self.onmessage  = function(e) {
      postMessage("["+d.toLocaleDateString()+" "+d.toLocaleTimeString()+"], owner message: "+e.data);
    }
    self.onoffline = function() {
      postMessage("worker is now OFFLINE");
    }
    self.ononline = function() {
      postMessage("worker is now ONLINE");
    }
  

js/worker-shared.js

    onconnect = function(e) {
      importScripts("utils.js");
      // importScripts("pusher.worker.js");
      var client_port = e.ports[0],
          nr = 1,
          d = new Date();
      clients = [];
      clients.push(client_port); // fill list of worker clients (windows,tabs,...)
      // client_port.start();

      // // Connect to Pusher
      // var pusher = new Pusher('1fb94680701ab31a3139', {
      //     encrypted: true
      // });
      // // Subscribe to test_channel
      // var pusherChannel = pusher.subscribe('test_channel');
      // bind to 'my_event' on pusherChannel
      // pusherChannel.bind('my_event', function(data) {
      //     // Relay the payload on to each client_port
      //     clients.forEach(function(client_port){
      //         client_port.postMessage(data);
      //     });
      // });

      function timedCount() {
          // self.name
          client_port.postMessage("pulse " + (nr++)); //  post a message back to the HTML page
          setTimeout(timedCount, 1000);
      }
      timedCount();

      client_port.onmessage  = function(e) {
          client_port.postMessage("["+
              d.toLocaleDateString()+" "+d.toLocaleTimeString()+
              "], owner message: "+e.data+
              ", own message: "+utils_randomInt()+
              " pulse "+(nr++)
          );
      }
      client_port.onerror  = function(e) {
          client_port.postMessage("["+d.toLocaleDateString()+" "+d.toLocaleTimeString()+"], ERROR ! ");
      }
      client_port.onoffline = function() {
          client_port.postMessage("worker is now OFFLINE");
      }
      client_port.ononline = function() {
          client_port.postMessage("worker is now ONLINE");
      }
    }

    // var canvas = document.getElementById('myCanvas'),
    // ctx = canvas.getContext('2d'),
    // image = new Image();

    // image.onload = function() {
    //   Promise.all([
    //     createImageBitmap(image, 0, 0, 32, 32),
    //     createImageBitmap(image, 32, 0, 32, 32)
    //   ]).then(function(sprites) {
    //     ctx.drawImage(sprites[0], 0, 0);
    //     ctx.drawImage(sprites[1], 32, 32);
    //   });
    // }

    // image.src = 'sprites.png';
  

ServiceWorker (APIs)

• event-driven worker registered against an origin and a path, takes the form of a JavaScript file that can control associated web page/site by intercepting and modifying navigation and resource requests, and caching resources for example when network is not available, has its own ServiceWorkerGlobalScope, API such as synchronous XHR and localStorage can't be used inside a service worker
  • 1 - registration using ServiceWorkerContainer.register(), to be downloaded and attempt installation/activation for URLs accessed by the user inside the whole origin, or inside a subset specified by you
  • 2 - downloaded, when a user first accesses a service worker–controlled site/page, then re-downloaded after 24 hours, or so
  • 3 - installed, if worker is new or updated
  • 4 - activation
  • new service worker is updated in background (worker in waiting), and activated when old is not used
  • only run over HTTPS, not available in private browsing
  • oninstall/onactivate could take a while to complete, waitUntil method is provided, once this is called oninstall or onactivate, it passes a promise, functional events are not dispatched to the service worker until the promise is successfully resolved
  • can respond to requests using the FetchEvent event, modify the response to these requests using FetchEvent.respondWith
  • performance enhancement (pre-fetching resources), background data sync/hooks, responding to resource requests from other origins, expensive-to-calculate data updates (gyroscope,geolocation,...), client side compiling, ...
• ServiceWorkerGlobalScope - global execution context of a service worker, inherits WorkerGlobalScope
  • properties
  • clients - Clients object
  • registration - ServiceWorkerRegistration object that represents the service worker registration
  • caches - CacheStorage object
  • methods
  • skipWaiting() - allows the current service worker registration to progress from waiting to active state while service worker clients are using it
  • fetch()
  • events
  • install - ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.installing worker
  • activate - ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.active worker
  • push - server push notification is received
  • pushsubscriptionchange - push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time)
  • message - incoming messages are received, controlled pages can use the MessagePort.postMessage() method to send messages to service workers, service worker can optionally send a response back via the MessagePort exposed in event.data.port, corresponding to the controlled page
  • fetch - fetch() is called
  • notificationclick - user clicks on a displayed notification
  • notificationclose - user closes a displayed notification
  • sync - call to SyncManager.register is made from a service worker client page, attempt to sync is made either immediately if the network is available or as soon as the network becomes available
• navigator.serviceWorker - ServiceWorkerContainer object, which provides access to registration, removal, upgrade, and communication with the ServiceWorker objects for the associated document: var workerContainerInstance = navigator.serviceWorker;
• after registration ServiceWorker will be terminated, when idle, to conserve memory and processor power, and automatically restarted to respond to events (onfetch, onmessage,...)
• ServiceWorker state is not persisted across the termination/restart cycle, event handler is invoked with default global state

    var sw_result = document.getElementById("sw_result");
    var sw_images = document.getElementById("sw_images");
    var sw_base = document.getElementById("sw_base");
    var sw_link = document.getElementById("sw_link");
    var sw_list = document.getElementById("sw_list");
    var serw;

    if ('serviceWorker' in navigator) {
      setInterval(()=>{
        sw_list.innerHTML = "";
        if (navigator.serviceWorker.controller) {
          sw_list.innerHTML += 'page is controlled by:'+
            navigator.serviceWorker.controller.scriptURL;
        } else {
          sw_list.innerHTML += 'page is not controlled by a service worker';
        }
        navigator.serviceWorker.getRegistrations().then(function(registrations){
          if(registrations.length) sw_list.innerHTML += "ServiceWorkerRegistrations found:";
          registrations.forEach((item, index, arr) => {
            var sw = item.installing || item.waiting || item.active;
            sw_list.innerHTML += "<button onclick=swUnregister('"+item.scope+
            "')>unregister "+item.scope+" ["+sw.state+"]</button>";
          });
        });
      },1000);
      navigator.serviceWorker.oncontrollerchange = function(e) {
        sw_list.innerHTML += 'page is controlled by: '+e.target.scriptURL+'';
      };
      navigator.serviceWorker.addEventListener('message', function(event){
        sw_result.innerHTML += "serviceWorker all clients message:"+event.data;
        if (event.ports[0]) {
          event.ports[0].postMessage("Hello back! to serviceWorker");
        }
      });
    } else {
      sw_result.innerHTML += 'current browser doesnt support serviceWorker';
    }

    function swUnregister (scope = "") {
      sw_result.innerHTML = "";
      navigator.serviceWorker.getRegistrations().then(function(registrations){
        registrations.forEach((item, index, arr) => {
          if(item.scope == scope){
            item.unregister().then(function(boolean) {
              if(boolean){
                sw_result.innerHTML += item.scope+" unregister is OK";
              }
              else{
                sw_result.innerHTML += item.scope+" unregister with ERROR";
              }
            });
          }
        });
      });
    }

    function installServiceWorker() {
      if  ('serviceWorker' in navigator) {
        sw_result.innerHTML = "";
        navigator.serviceWorker.register(
          sw_link.value // +"?v="+Math.random()
          // ,{ scope: sw_base.value+'/' }
          // ,{ scope: 'http://web-engineer-book' }
          // ,{ scope: sw_base.value }
          // ,{ scope: './' }
        ).then(function(reg) {
          if (reg.installing) {
            sw_result.innerHTML += 'installing serviceWorker';
            serw = reg.installing;
          } else if (reg.waiting) {
            sw_result.innerHTML += 'serviceWorker installed';
            serw = reg.waiting;
          } else if (reg.active) {
            sw_result.innerHTML += 'serviceWorker active';
            serw = reg.active;
          }
          if (serw) {

            // reg.pushManager.getSubscription().then(function(subscription) {
            //   if (!subscription) {
            //     sw_result.innerHTML += 'Not yet subscribed to Push';
            //     return;
            //   }
            //   var mySubscription = subscription.toJSON();

            //   // initialize status, which includes setting UI elements for subscribed status
            //   // and updating Subscribers list via push
            //   var endpoint = subscription.endpoint;
            //   var key = subscription.getKey('p256dh');
            //   var auth = subscription.getKey('auth');

            //   subscription.unsubscribe().then(function(successful) {
            //     // You've successfully unsubscribed
            //   }).catch(function(e) {
            //     // Unsubscription failed
            //   })

            //   // Enable any UI which subscribes/unsubscribes from
            //   // push messages.
            //   var pushButton = document.querySelector('.js-push-button');
            //   pushButton.disabled = false;
            //   if (!subscription) {
            //     // We aren’t subscribed to push, so set UI
            //     // to allow the user to enable push
            //     return;
            //   }
            //   // Keep your server in sync with the latest subscriptionId
            //   sendSubscriptionToServer(subscription);
            //   showCurlCommand(subscription);
            //   // Set your UI to show they have subscribed for
            //   // push messages
            //   pushButton.textContent = 'Disable Push Messages';
            //   isPushEnabled = true;
            // }).catch(function(err) {
            //   sw_result.innerHTML += 'Error during getSubscription()';
            // });

            sw_result.innerHTML += 'serviceWorker state: '+serw.state+'';
            sw_result.innerHTML += 'serviceWorker scriptURL: '+serw.scriptURL+'';
            serw.onstatechange = function(event) {
              sw_result.innerHTML += 'serviceWorker state changed: '+event.target.state+'';
            };
            // // same as serw.onstatechange
            // reg.onupdatefound = function() {
            //   sw_result.innerHTML += 'new service worker is being installed, scope: '+reg.scope+'';
            // };
          }
        }).catch(function(error) {
          sw_result.innerHTML += 'Registration failed with ' + error+'';
        });

        // this.onpush = function(event) {
        //   sw_result.innerHTML += 'onpush event.data: '+event.data+'';
        // }
        // navigator.serviceWorker.ready.then( function(reg) {
        //   sw_result.innerHTML += 'serviceWorker is active: '+reg.active+'';
        //   // reg.PushManager.supportedContentEncodings

        //   var options = {
        //     userVisibleOnly: true,
        //     applicationServerKey: 'qwerty654321'
        //   };
        //   reg.pushManager.subscribe(options).then(
        //     function(sbs) {
        //       // push subscription details
        //       sw_result.innerHTML += 'pushSubscription.subscriptionId: '+sbs.subscriptionId+'';
        //       sw_result.innerHTML += 'pushSubscription.endpoint: '+sbs.endpoint+'';
        //       sw_result.innerHTML += 'pushSubscription.expirationTime: '+sbs.expirationTime+'';
        //       sw_result.innerHTML += 'pushSubscription.options: '+sbs.options+'';
        //     }, function(error) {
        //       // report information about errors back to the application server
        //       sw_result.innerHTML += 'pushSubscription.error: '+error+'';
        //     }
        //   );

        // });
      }
    }

    function msgServiceWorker() {
      navigator.serviceWorker.controller.postMessage("Client 1 message 1");
      return new Promise(function(resolve, reject){
        var msg_channel = new MessageChannel();
        msg_channel.port1.onmessage = function(event){
          if(event.data.error) {
            sw_result.innerHTML += "messageChannel:"+event.data.error;
            // reject(event.data.error);
          } else {
            sw_result.innerHTML += "messageChannel:"+event.data;
            // resolve(event.data);
          }
        };
        // Send message to service worker along with port for reply
        navigator.serviceWorker.controller.postMessage("Client 1 message 2", [msg_channel.port2]);
      });
    }

    function listCache() {
      sw_result.innerHTML = "CACHES:";
      caches_obj = {};
      caches.keys().then(
        cacheNames => cacheNames
      ).then( cacheNames =>{
        cacheNames.forEach( cname => {
          caches.open(cname).then( cache => {
            cache.keys().then(ks => {
              caches_obj[cname]=ks.map(req=>req.url)
            });
          });
        });
      });
      setTimeout(()=>{
        for (cname in caches_obj) {
          sw_result.innerHTML +=
          "<button onclick=\"removeCache('"+cname+"')\">"
          +cname+" (remove)</button>";
          caches_obj[cname].forEach((url) => {
            sw_result.innerHTML += url;
          });
        }
      },500);
    }
    function removeCache(key) {
      sw_result.innerHTML = "";
      deleted = "";
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.map(cname => {
            if(cname==key) {
              return caches.delete(cname);
            }
          })
        ).then( ok => {
          sw_result.innerHTML += "[ "+key+" ] cache deleted";
        }, err => {
          sw_result.innerHTML += "unable to remove cache ! "+err;
        });
      })
    }

    function addImage(url) {

      // var myImage = document.createElement("img");
      // myImage.setAttribute("height","100px");
      // myImage.src = sw_base.value+url
      // sw_result.appendChild(myImage);
      // sw_result.innerHTML += '';

      imgLoad(url).then(function(img) {
        var myImage = document.createElement("img");
        myImage.setAttribute("height","100px");
        myImage.src = window.URL.createObjectURL(img);
        sw_result.appendChild(myImage);
        sw_result.innerHTML += '';
      }, function(Error) {
        sw_result.innerHTML += 'Error';
      });
    }
    function imgLoad(link) {
      // return a promise for an image loading
      return new Promise(function(resolve, reject) {
        var request = new XMLHttpRequest();
        request.open('GET', sw_base.value+link);
        request.responseType = 'blob';
        request.onload = function() {
          if (request.status == 200) {
            resolve(request.response);
          } else {
            reject(Error('Image didnt load successfully:' + request.statusText));
          }
        };
        request.onerror = function() {
          reject(Error('There was a network error'));
        };
        request.send();
      });
    }

    function showNotification() {
      Notification.requestPermission(function(result) {
        if (result === 'granted') {
          navigator.serviceWorker.ready.then(function(registration) {
            registration.showNotification('Vibration Sample', {
              body: 'Buzz! Buzz!',
              vibrate: [200, 100, 200, 100, 200, 100, 200],
              tag: 'vibration-sample',
              icon: 'images/cellphone.jpg',
              badge: 'images/cellphone.jpg',
              image: 'images/cellphone.jpg',
              dir: 'rtl',
              data: 'random string as data '+Math.PI,
              // actions:{action:str,title:str,icon:url},
              // lang:en-US,
              // renotify:false|true,
              // requireInteraction:false|true,
            });
            var options = { tag : 'user_alerts' };
            registration.getNotifications().then(function(notifications) {
              sw_result.innerHTML = "Notifications:";
              notifications.forEach((n)=>{
                sw_result.innerHTML += "body: "+n.body;
                sw_result.innerHTML += "data: "+n.data;
                sw_result.innerHTML += "dir: "+n.dir;
                sw_result.innerHTML += "icon: "+n.icon;
                sw_result.innerHTML += "lang: "+n.lang;
                sw_result.innerHTML += "tag: "+n.tag;
                sw_result.innerHTML += "title: "+n.title;
                sw_result.innerHTML += "-----------------------";
                // sw_result.innerHTML += "onclick: "+n.onclick;
                // sw_result.innerHTML += "onclose: "+n.onclose;
                // sw_result.innerHTML += "onerror: "+n.onerror;
                // sw_result.innerHTML += "onshow: "+n.onshow;
              })
            })
          });
        }
      });
    }
  

js-service-worker.js

    const CACHE_VERSION = 1;
    const CURRENT_CACHES = {
      prefetch: 'v' + CACHE_VERSION,
      // other_cache: 'v' + OTHER_CACHE_VERSION
    };
    const cached_key='cached';

    self.addEventListener('install', event => {
      var now = Date.now();
      var urlsToPrefetch = [
        // 'index.html',
        // './', // Alias for index.html
        'images/wide.jpg',
        'images/sw-lifecycle.png',
        'images/rock.jpg',
        'images/workplace.jpg',
        'images/paris.jpg',
        'images/mac.jpg'
      ];
      event.waitUntil(
        // caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
        //   return cache.addAll(urlsToPrefetch);
        // });
        caches.open(CURRENT_CACHES.prefetch).then(cache => {

          var cachePromises = urlsToPrefetch.map(urlToPrefetch => {
            var url = new URL(urlToPrefetch, location.href);
            url.search += (url.search?'&':'?')+cached_key+'=' + now;

            // if there is any chance that the resources
            // are served off of a server that doesnt support CORS
            var request = new Request(url,{mode:'no-cors'});

            return fetch(request).then(response => {
              if (response.status >= 400) {
                throw new Error('request for ' + urlToPrefetch +
                  ' failed with status ' + response.statusText);
              }
              // Use the original URL without the cache-busting parameter as the key for cache.put().
              return cache.put(urlToPrefetch, response);
            }).catch(error => {
              console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
            });
          });
          return Promise.all(cachePromises).then(() => {
            // console.log(CURRENT_CACHES.prefetch+' prefetched');
          });
        })
        // .then(self.skipWaiting())
        .catch(error => {
          console.error('prefetching failed:', error);
        })
        // caches.has('v1').then(function(hasCache) {
        //   if (!hasCache) {
        //     someCacheSetupfunction();
        //   } else {
        //     caches.open('v1').then(function(cache) {
        //       return cache.addAll(myAssets);
        //     });
        //   }
        // }).catch(function() {
        //   // Handle exception here.
        // });
      );
    });

    self.addEventListener('activate', event => {
      event.waitUntil( async function() {
        // clients loaded in the same scope do not need to be reloaded
        // before their fetches will go through this service worker :
        clients.claim();

        // delete all caches that aren't named in CURRENT_CACHES
        var expectedCacheNames = Object.values(CURRENT_CACHES);
        caches.keys().then(cacheNames => {
          return Promise.all(
            cacheNames.map(cacheName => {
              if (expectedCacheNames.indexOf(cacheName) === -1) {
                // If this cache name isn't present in the array of "expected" cache names, then delete it
                console.log('deleting out of date cache:', cacheName);
                return caches.delete(cacheName);
              }
            })
          );
        })

        // // enable navigation preloads
        // if (self.registration.navigationPreload) {
        //   await self.registration.navigationPreload.enable();
        // }
      }());
    });

    self.addEventListener('fetch', event => {
      // avoid non-GET requests
      if ( event.request.method != 'GET') return;
      // && event.request.headers.get('accept').indexOf('text/html') !== -1

      event.waitUntil(async function() {
        // Exit early if we don't have access to the client.
        // Eg, if it's cross-origin.
        if (!event.clientId) return;
        // Get the client.
        const client = await clients.get(event.clientId);
        // Exit early if we don't get the client.
        // Eg, if it closed.
        if (!client) return;
        // Send a message to the client.
        self.clients.matchAll().then(function (clients) {
          clients.forEach(function(client) {
            // client.postMessage(
            // "Hey ["+event.clientId+"],
            // serviceWorker is fetching or looking in cache...");
          });
        });
      }());

      event.respondWith(caches.match(event.request).then(r => {
        // console.log( r ? 'cache: '+r.url : 'no cache, need to fetch...' );
        return r || fetch(event.request).then(response => {
          caches.open(CURRENT_CACHES.prefetch).then(cache => {
            cache.put(event.request, response);
          });
          console.log('fetched: ', response.url);
          return response.clone();
          // return cache.put(event.request, response.clone()).then(() => {
          //   return response;
          // });
        }).catch(() => {
          // return caches.match('/sw-test/gallery/myLittleVader.jpg');
          console.error('no cache, fetching failed: ', error);
          throw error;
        });
      }));

      // // fallback response
      // var response;
      // event.respondWith(caches.match(event.request).catch(function() {
      //   return fetch(event.request);
      // }).then(function(r) {
      //   response = r;
      //   caches.open('v1').then(function(cache) {
      //     cache.put(event.request, response);
      //   });
      //   return response.clone();
      // }).catch(function() {
      //   return caches.match('/sw-test/gallery/myLittleVader.jpg');
      // }));
    });

    function send_message_to_all_clients(msg){
      clients.matchAll().then(clients => {
        clients.forEach(client => {
          send_message_to_client(client, msg).then(m => console.log(m));
        })
      })
    }
    function send_message_to_client(client, msg){
      return new Promise(function(resolve, reject){
        var msg_channel = new MessageChannel();
        msg_channel.port1.onmessage = function(event){
          if(event.data.error){
            reject(event.data.error);
          }else{
            resolve(event.data);
          }
        };
        client.postMessage("serviceWorker message: >>>"+msg+"<<<", [msg_channel.port2]);
      });
    }
    self.addEventListener('message', event => {
      if (event.ports[0]) { // client channel messaging
        event.ports[0].postMessage("Hello back! to serviceWorker client ["+event.data+"]");
      }
      // response to any message
      send_message_to_all_clients("serviceWorker received message: " + event.data);
    });

    self.addEventListener('notificationclick', function(event) {
      event.notification.close();

      send_message_to_all_clients("client notification data: " + event.notification.data);

      self.registration.showNotification("google.com was opened (click to reopen)", {
        actions: [{
          action: "get",
          title: "Get now.",
          icon: 'images/cellphone.jpg'
        }],
        body: 'Buzz! Buzz!',
        vibrate: [200, 100, 200, 100, 200, 100, 200],
        tag: 'vibration-sample',
        icon: 'images/cellphone.jpg',
        badge: 'images/cellphone.jpg',
        image: 'images/cellphone.jpg',
        dir: 'ltr',
        data: 'serviceWorker notification data'
        // lang:en-US,
        // renotify:false|true,
        // requireInteraction:false|true,
        // vibrate:pattern,
        // data:data
      });

      // focus on domain window or open
      event.waitUntil(
        clients.matchAll({
          type: "window"
        }).then(function(clientList) {
          for (var i = 0; i < clientList.length; i++) {
            var client = clientList[i];
            if (
              client.url == 'https://www.google.com/' &&
              'focus' in client
            ) {
              if(!client.focused) return client.focus();
            }
          }
          if (clients.openWindow) {
            return clients.openWindow('https://www.google.com/');
          }
        }));
      }
    );

    self.addEventListener('push', function(event) {
      if (!(self.Notification && self.Notification.permission === 'granted')) {
        return;
      }
      var data = {};
      if (event.data) {
        data = event.data.json();
        // event.data.text();
        // event.data.blob();
        // event.data.arrayBuffer();
      }
      if(data.action === 'subscribe' || data.action === 'unsubscribe') {
        var title = data.title || "Something Has Happened";
        var message = data.message || "Here's something you might want to check out.";
        // var icon = "../images/new-notification.png";
        var notification = new Notification(title, {
          body: message,
          tag: 'simple-push-demo-notification'
          // , icon: icon
        });
        notification.addEventListener('click', function() {
          if (clients.openWindow) {
            // clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
          }
        });
        port.postMessage(data);
      } else if(data.action === 'init' || data.action === 'chatMsg') {
        port.postMessage(data);
      }

      event.waitUntil(
        self.registration.showNotification('Yay a message.', {
          body: 'We have received a push message.',
          icon: '/images/icon-192x192.png',
          tag: 'simple-push-demo-notification-tag'
        })
      );
      // var dataInit = {
      //   data : 'Some sample text'
      // }
      // var myPushEvent = new PushEvent('push', dataInit);
      // myPushEvent.data.text(); // should return 'Some sample text'
    });

    self.addEventListener('pushsubscriptionchange', function() {
      // do something, usually resubscribe to push and
      // send the new subscription details back to the
      // server via XHR or Fetch
    });
  

Messaging

    // inside main window/worker/frame
    var channel = new MessageChannel();
    var msg_frame = document.getElementById("msg_frame"); // target client
    msg_frame.addEventListener("load", () => {
      channel.port1.onmessage = (e) => {
        sw_result.innerHTML += "iFrame message: "+e.data;
      };
      msg_frame.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
    });
    // target iframe
    iframe
      id="msg_frame"
      scr="http://web-engineer-book/js-api-msg-iframe.html"
      name="msg_frame"
      style="margin-left:1em;width:98%;height:50px;overflow:auto;font-size:1em;border:3px dotted gray;"
    /iframe

    // inside client window/worker/frame
    var output = document.querySelector('.output');
    window.addEventListener('message', (e) => {
      output.innerHTML = e.data;
      // Use the transfered port to post a message back to the main frame
      e.ports[0].postMessage('Message back from the IFrame');
    });
  

Download Progress

    // ----- WITH FETCH

    class ProgressReportFetcher {
      constructor(onProgress = function() {}) {
        this.onProgress = onProgress;
      }
      // mimic native fetch() instantiation and return Promise
      fetch(input, init = {}) {
        const request = (input instanceof Request)? input : new Request(input)
        this._cancelRequested = false;

        return fetch(request, init).then(response => {
          if (!response.body) {
            throw Error('ReadableStream is not yet supported in this browser.')
          }
          // this occurs if cancel() was called before server responded (before fetch() Promise resolved)
          if (this._cancelRequested) {
            response.body.getReader().cancel();
            return Promise.reject('cancel requested before server responded.');
          }
          if (!response.ok) {
            // HTTP error server response
            throw Error(`Server responded ${response.status} ${response.statusText}`);
          }
          // Server must send CORS header "Access-Control-Expose-Headers: content-length" to access
          const contentLength = response.headers.get('content-length');
          if (contentLength === null) {
            // don't evaluate download progress if we can't compare against a total size
            // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Expose-Headers
            throw Error('Content-Length server response header missing')
          }
          const total = parseInt(contentLength,10);
          let loaded = 0;
          this._reader=response.body.getReader()
          const me = this;
          return new Response(
            new ReadableStream({
              start(controller) {
                if (me.cancelRequested) {
                  console.log('canceling read')
                  controller.close();
                  return;
                }
                read();
                function read() {
                  me._reader.read().then(({done, value}) => {
                    if (done) {
                      // ensure onProgress called when content-length=0
                      if (total === 0) {
                        me.onProgress.call(me, {loaded, total});
                      }
                      controller.close();
                      return;
                    }
                    loaded += value.byteLength;
                    me.onProgress.call(me, {loaded, total});
                    controller.enqueue(value);
                    read();
                  }).catch(error => {
                    console.error(error);
                    controller.error(error)
                  });
                }
              }
            })
          )
        });
      }
      cancel() {
        console.log('download cancel requested.')
        this._cancelRequested = true;
        if (this._reader) {
          console.log('cancelling current download');
          return this._reader.cancel();
        }
        return Promise.resolve();
      }
    }
    const imageLoader = (function() {
      const loader = document.getElementById('loader');
      const img = loader.querySelector('img');
      const errorMsg = loader.querySelector('.error');
      const loading = loader.querySelector('.progress-bar');
      const progress = loader.querySelector('.progress');
      let locked, started, progressFetcher, pct;
      function downloadDone(url) {
        console.log('downloadDone()')
        img.src=url;
        img.offsetWidth; // pre-animation enabler
        loader.classList.remove('loading');
        loader.classList.add('loading-complete');
        // progressFetcher = null;
      }
      function startDownload() {
        // Ensure "promise-safe" (aka "thread-safe" JavaScript).
        // Caused by slow server response or consequetive calls to startDownload()
        // before stopDownload() Promise resolves
        if (locked) {
          console.error('startDownload() failed. Previous download not yet initialized');
          return;
        }
        locked = true;
        stopDownload()
        .then(function() {
          locked = false;
          progress.style.transform=`scaleX(0)`;
          progress.offsetWidth; /* prevent animation when set to zero */
          started = false;
          pct = 0;
          loader.classList.add('loading');
          loader.classList.remove('loading-complete');
          if (!progressFetcher) {
            progressFetcher = new ProgressReportFetcher(updateDownloadProgress);
          }
          console.log('Starting download...');
          progressFetcher.fetch(
            'https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg')
          .then(response => response.blob())
          .then(blob => URL.createObjectURL(blob))
          .then(url => downloadDone(url))
          .catch(error => showError(error))
        });
      }
      function stopDownload() {
        // stop previous download
        if (progressFetcher) {
          return progressFetcher.cancel()
        } else {
          // no previous download to cancel
          return Promise.resolve();
        }
      }
      function showError(error) {
        console.error(error);
        loader.classList.remove('loading');
        loader.classList.remove('loading-complete');
        loader.classList.remove('loading-error');
        errorMsg.offsetWidth; // pre-animation enabler
        errorMsg.innerHTML = 'ERROR: '+ error.message;
        loader.classList.add('loading-error');
      }
      function updateDownloadProgress({loaded, total}) {
        if (!started) {
          loader.classList.add('loading');
          started = true;
        }

        // handle divide-by-zero edge case when Content-Length=0
        pct = total? loaded/total : 1;

        progress.style.transform=`scaleX(${pct})`;
        // console.log('downloaded', Math.round(pct*100)+'%')
        if (loaded === total) {
          console.log('download complete')
        }
      }
      return {
        startDownload,
        stopDownload
      }
    })()
    imageLoader.startDownload();

    // ----- WITH SERVICE WORKER

    self.addEventListener('fetch', event => {
      const url = new URL(event.request.url);
      const scope = self.registration.scope;
      // redirect index.html to service-worker-enabled page
      if (event.request.url === scope || event.request.url === scope+'index.html') {
        const newUrl = scope+'sw-installed.html';
        console.log('respondWith', newUrl);
        event.respondWith(fetch(newUrl))
      } else if (progressIndicatorUrls.test(event.request.url)) {
        console.log('VER',2,event.request.url)
        event.respondWith(fetchWithProgressMonitor(event))
      }
    })
    function fetchWithProgressMonitor(event) {
      /*  opaque request responses won't give us access to Content-Length and
      *  Response.body.getReader(), which are required for calculating download
      *  progress.  Respond with a newly-constructed Request from the original Request
      *  that will give us access to those.
      *  See https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses
      *  'Access-Control-Allow-Origin' header in the response must not be the
      *  wildcard '*' when the request's credentials mode is 'include'.  We'll omit credentials in this demo.
      */
      const newRequest = new Request(event.request, {
        mode: 'cors',
        credentials: 'omit'
      })
      return fetch(newRequest).then(response => respondWithProgressMonitor(event.clientId, response));
    }
    function respondWithProgressMonitor(clientId, response) {
      if (!response.body) {
        // See https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
        console.warn("ReadableStream is not yet supported in this browser")
        return response;
      }
      if (!response.ok) {
        // HTTP error code response
        return response;
      }
      const contentLength = response.headers.get('content-length');
      if (contentLength == null) {
        // don't track download progress if we can't compare against a total size
        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Expose-Headers
        console.warn('No Content-Length no header in response.');
        return response;
      }
      let loaded = 0;
      debugReadIterations=0; // direct correlation to server's response buffer size
      const total = parseInt(contentLength,10);
      const reader = response.body.getReader();
      return new Response(
        new ReadableStream({
          start(controller) {
            // get client to post message. Awaiting resolution first read() progress
            // is sent for progress indicator accuracy
            let client;
            clients.get(clientId).then(c => {
              client = c;
              read();
            });
            function read() {
              debugReadIterations++;
              reader.read().then(({done, value}) => {
                if (done) {
                  console.log('read()', debugReadIterations);
                  controller.close();
                  return;
                }
                controller.enqueue(value);
                loaded += value.byteLength;
                // console.log('    SW', Math.round(loaded/total*100)+'%');
                dispatchProgress({client, loaded, total});
                read();
              })
              .catch(error => {
                // error only typically occurs if network fails mid-download
                console.error('error in read()', error);
                controller.error(error)
              });
            }
          },
          // Firefox excutes this on page stop, Chrome does not
          cancel(reason) {
            console.log('cancel()', reason);
          }
        })
      )
    }
    function dispatchProgress({client, loaded, total}) {
      client.postMessage({loaded,total})
    }
  

ServiceWorker interfaces (available properties/methods)

• most APIs use Promises !
• ServiceWorkerContainer - object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations
  • properties
  • controller - ServiceWorker object if its state is activated (the same object returned by ServiceWorkerRegistration.active), returns null during a force-refresh request (Shift + refresh) or if there is no active worker
  • ready - provides a way of delaying code execution until a service worker is active, returns a Promise that will never reject, and which waits indefinitely until the ServiceWorkerRegistration associated with the current page has an ServiceWorkerRegistration.active worker, once that condition is met, it resolves with the ServiceWorkerRegistration
  • events
  • oncontrollerchange - controllerchange event occurs: the document's associated ServiceWorkerRegistration acquires a new active worker
  • onerror - error event occurs in the associated service workers
  • onmessage - message event occurs — when incoming messages are received to the ServiceWorkerContainer object (e.g. via a MessagePort.postMessage() call)
  • methods
  • register(sw_url[,{scope:url_range_to_control}]) - Creates or updates a ServiceWorkerRegistration for the given scriptURL
  • getRegistration([{scope:url_range}]) - gets a ServiceWorkerRegistration object whose scope matches the provided document URL, if the method can't return a ServiceWorkerRegistration, it returns a Promise
  • getRegistrations() - returns all ServiceWorkerRegistration objects associated with a ServiceWorkerContainer in an array, if the method can't return ServiceWorkerRegistration objects, it returns a Promise
• ServiceWorker - represents a service worker, multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object, serviceWorker object is available in the ServiceWorkerRegistration.active property, and the ServiceWorkerContainer.controller
  • properties(inherits from Worker)
  • scriptURL - serialized script URL defined as part of ServiceWorkerRegistration, must be on the same origin as the document that registers the ServiceWorker
  • state - state of the service worker, returns one of the following values: installing, installed, activating, activated, or redundant
  • event
  • onstatechange - whenever an event of type statechange is fired; it is basically fired anytime the ServiceWorker.state changes
  • methods(inherits from ExtendableEvent, except terminate)
• CacheStorage - storage for Cache objects, master directory of all the named caches that a ServiceWorker can access, and maintains a mapping of string names to corresponding Cache objects, accessible through global caches property
  • methods
  • match(request_or_url[,options_obj]) - checks if a given Request is a key in any of the Cache objects that the CacheStorage object tracks
  • has(cache_name) - Cache object matching the cache_name exists
  • open(cache_name) - Cache object matching the cacheName (a new cache is created if it doesn't already exist)
  • delete(cache_name) - deletes the Cache object by cache_name and returns true OR false
  • keys() - array containing strings corresponding to all of the named Cache objects tracked by the CacheStorage, use to iterate over a list of all the Cache objects
  • options_obj = { ignoreSearchParamsInUrl:false|true , ignoreHttpMethod:false|true , ignoreVARY:false|true , cacheName:specific_cache_str }
• Cache - storage for Request/Response object pairs that are cached as part of the ServiceWorker life cycle, not updated unless explicitly requested, dont expire unless deleted, needs periodicall purging of cache entries, make sure to version caches by name and use the caches only from the version of the script that they can safely operate on, Cache quota usage estimates are available via the StorageEstimate API, browser will generally delete all or none of the data for an origin
  • use CacheStorage.open() to open a specific named Cache object and then call any of the Cache methods to maintain the Cache
  • methods
  • match(request_or_url[,options_obj]) - response associated with the first matching request in the Cache object OR undefined
  • matchAll(request_or_url[,options_obj]) - array of all matching requests in the Cache object OR undefined
  • add(request_or_url) - retrieves by url and adds the resulting response object to the given cache, equivalent to: cache.put(url, response)
  • addAll(urls_arr) - retrieves multiple urls and adds responses objects to the given cache
  • put(request_or_url,response_obj) - takes request and its response and adds it to the given cache
  • delete(request_or_url[,options_obj]) - finds entry by request, and resolves to true if entry is found and deleted OR false
  • keys([request_or_url[,options_obj]]) - array of Cache keys, same order that they were inserted
  • options_obj = { ignoreSearchParamsInUrl:false|true , ignoreHttpMethod:false|true , ignoreVARY:false|true }
  • Fetch API requires Set-Cookie headers to be stripped before returning a Response object from fetch(), so a Response stored in a Cache won't contain headers
• Clients - container for a list of Client objects, active service worker clients at the current origin
  • methods
  • get(id) - Client matching a given id
  • matchAll([{ includeUncontrolled:false|true, type:all|window|worker|sharedworker }]) - array of Client objects, options allows to control the types of clients returned
  • openWindow(url) - opens a new browser window for a given url and returns a Promise for the new WindowClient
  • claim() - allows an active service worker to set itself as the controller for all clients within its scope, this triggers a "controllerchange" event on navigator.serviceWorker in any clients that become controlled by this service worker
• Client - scope of a service worker client (document in a browser context or a SharedWorker, which is controlled by an active worker)
  • properties
  • id - universally unique identifier of the client as a string
  • type - clients type as a string: window, worker, sharedworker
  • url - URL of the client as a string
  • methods
  • postMessage() - sends a message to the client
• ExtendableEvent - extends the lifetime of the install and activate events dispatched on the ServiceWorkerGlobalScope, as part of the service worker lifecycle, ensures that any functional events (like FetchEvent) are not dispatched to the ServiceWorker, until it upgrades database schemas, and deletes outdated cache entries, etc
  • new ExtendableEvent(install|activate[,{...}])
  • properties(inherits from Event)
  • methods(inherits from Event)
  • waitUntil() - extends the lifetime of the event, intended to be called in the install EventHandler for the installing worker and on the active EventHandler for the active worker
• InstallEvent - passed into the oninstall handler, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker, child of ExtendableEvent, ensures that functional events such as FetchEvent are not dispatched during installation
  • new InstallEvent(type[,{activeWorker:ServiceWorkerAsController}])
  • properties(inherits from Event)
  • activeWorker - ServiceWorker that is currently controlling the page
  • methods(inherits from ExtendableEvent)
• ExtendableMessageEvent - event object of a message event fired on a service worker (when a channel message is received on the ServiceWorkerGlobalScope from another context) — extends the lifetime of such events
  • new ExtendableMessageEvent(type[,{ data:any_type, origin:str, lastEventId:str, source:Client|ServiceWorker|MessagePort, port:MessagePort}])
  • properties(inherits from ExtendableEvent)
  • data - event data, can be any data type
  • origin - origin of the ServiceWorkerClient that sent the message
  • lastEventId - in server-sent events (SSE), the last event ID of the event source
  • source - reference to the service worker that sent the message
  • ports - array containing the MessagePort objects representing the ports of the associated message channel
  • methods(inherits from ExtendableEvent)
• FetchEvent - parameter passed into the ServiceWorkerGlobalScope.onfetch handler, represents a fetch action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker, contains information about the request and resulting response, and provides the FetchEvent.respondWith() method, which allows us to provide an arbitrary response back to the controlled page
  • new FetchEvent(type[,{ request:obj, clientId:id, ifPageWasReloaded:false|true }])
  • properties
  • clientId - id of the same-origin client that initiated the fetch
  • preloadResponse - Promise for a Response, or void if this is not a navigation, or navigation preload is not enabled
  • request - Request the browser intends to make
  • methods
  • respondWith() - prevent the browser default fetch handling, and provide (a promise for) a response yourself
  • waitUntil() - extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching
• NavigationPreloadManager - provides methods for managing the preloading of resources with a service worker
  • methods
  • enable() - resolves when navigation preloading is enabled
  • disable() - resolves when navigation preloading is disabled
  • setHeaderValue() - sets the value of the Service-Worker-Navigation-Preload header and returns an empty Promise
  • getState() - resolves to an object with properties indicating whether preload is enabled and the contents of the Service-Worker-Navigation-Preload
• NotificationEvent - parameter passed into the onnotificationclick handler, the NotificationEvent interface represents a notification click event that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker
  • properties(inherits from Event)
  • notification - Notification object representing the notification that was clicked to fire the event
  • action - string ID of the notification button the user clicked OR empty string if the user clicked the notification somewhere other than an action button, or the notification does not have a button
  • methods(inherits from ExtendableEvent)
  • waitUntil() - extends the lifetime of the event, intended to be called in the install EventHandler for the installing worker and on the active EventHandler for the active worker
• MessageEvent - represents a message received by a target object (*.postMessage(), *.onmessage), represents messages in: Server-sent events, Web sockets, Cross-document messaging, Channel messaging, Cross-worker/document messaging, Broadcast, WebRTC data channels
  • properties(inherits from Event)
  • data - data sent by the message emitter
  • origin - origin of the message emitter
  • lastEventId - unique ID for the event
  • source - MessageEventSource (which can be a WindowProxy, MessagePort, or ServiceWorker object) representing the message emitter
  • ports - array of MessagePort objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
  • methods(inherits from Event)
• ServiceWorkerRegistration - represents the service worker registration, you register a service worker to control one or more pages that share the same origin, lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients, browser maintains a persistent list of active ServiceWorkerRegistration objects
  • properties(inherits from EventTarget)
  • scope - unique identifier for a service worker registration, must be on the same origin as the document that registers the ServiceWorker
  • installing - service worker whose state is installing, initially set to null
  • waiting - service worker whose state is waiting, initially set to null
  • active - service worker whose state is either activating or activated, initially set to null, an active worker will control a ServiceWorkerClient if the client's URL falls within the scope of the registration (the scope option set when ServiceWorkerContainer.register is first called)
  • navigationPreload - instance of NavigationPreloadManager associated with the current service worker registration
  • periodicSync - reference to the PeriodicSyncManager interface, which manages periodic background synchronization processes
  • pushManager - reference to the PushManager interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status
  • sync - reference to the SyncManager interface, which manages background synchronization processes
  • events
  • onupdatefound - whenever an event of type updatefound is fired; it is fired any time the ServiceWorkerRegistration.installing property acquires a new service worker
  • methods(inherits from EventTarget)
  • getNotifications([tag_id]) - array of Notification objects
  • showNotification(title, [{ actions:{action:str,title:str,icon:url}, badge:images_as_mask, body:extra_content, dir:auto|ltr|rtl, icon:url, image:url, lang:en-US, renotify:false|true, requireInteraction:false|true, tag:id, vibrate:pattern, data:data }]) - displays the notification with the requested title
  • update() - checks the server for an updated version of the service worker without consulting cache
  • unregister() - unregisters the service worker registration and returns a Promise, service worker will finish any ongoing operations before it is unregistered
• ServiceWorkerState
  • values
  • installing - worker is in installing state, ExtendableEvent.waitUntil() can be called inside the install event handler to extend the life of the installing worker until the passed promise resolves successfully, ensures that the service worker is not active until all of the core caches are populated
  • installed - worker is waiting
  • activating - active worker, ExtendableEvent.waitUntil() can be called inside the onactivate event handler to extend the life of the active worker until the passed promise resolves successfully, no functional events are dispatched until the state becomes activated
  • activated - active worker, ready to handle functional events
  • redundant - new service worker is replacing the current service worker, or the current service worker is being discarded due to an install failure
• SyncEvent - sync action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker
  • new SyncEvent(type[,{ tag:id, clientId:id, lastChance:false|true }])
  • properties(inherits from Event)
  • tag - developer-defined identifier for this SyncEvent
  • lastChance - is true, if the user agent will not make further synchronization attempts after the current attempt
  • methods(inherits from ExtendableEvent)
• SyncManager - interface for registering and listing sync registrations
  • methods
  • getTags - list of developer-defined identifiers for SyncManager registration
  • register([{ allowOnBattery:false|true, id:id, idleRequired:false|true, maxDelay:n_ms, minDelay:n_ms, minPeriod:n_ms, minRequiredNetwork:network-online|network-any|network-offline|network-non-mobile }]) - create a new sync registration and return a Promise
• WindowClient - scope of a service worker client that is a document in a browser context, controlled by an active worker, special type of Client object, with some additional methods and properties available
  • properties(inherits from Client)
  • focus() - gives user input focus to the current client
  • navigate(url) - loads a specified URL into a controlled client page
  • methods(inherits from Client)
  • focused - Boolean that indicates whether the current client has focus
  • visibilityState - indicates the visibility of the current client. This value can be one of hidden, visible, prerender, or unloaded

Push API

• gives ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent
• 1. needs an active service worker
• 2. PushManager.subscribe()
• 3. resulting PushSubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data
• 4. ServiceWorkerGlobalScope.onpush handles incoming push messages
• each subscription is unique to a service worker (unique capability URL), knowledge of the endpoint is all that is necessary to send a message to your application, therefore endpoint URL needs to be kept secret, or other applications might be able to send push messages to your application
• push message can result in increased resource usage, particularly of the battery
• INTERFACES
• PushEvent - represents a push message that has been received, sent to the global scope of a ServiceWorker, contains information sent from an application to a PushSubscription
  • constructor
  • new PushEvent(push|pushsubscriptionchange[,{data:data}]) - exposed only to a service worker context
  • properties (inherits from ExtendableEvent)
  • data - reference to a PushMessageData object containing data sent to the PushSubscription
  • methods (inherits from ExtendableEvent)
• PushManager - a way to receive notifications from third-party servers, as well as request URLs for push notifications, subscribing, getting an active subscription, and accessing push permission status, accessed via the ServiceWorkerRegistration.pushManager property
  • properties
  • supportedContentEncodings - array of supported content codings that can be used to encrypt the payload of a push message
  • methods
  • getSubscription() - retrieves an existing push subscription, resolves to a PushSubscription object containing details of an existing subscription OR null
  • permissionState([{ userVisibleOnly:true|false, applicationServerKey:key }]) - resolves to the permission state of the current PushManager, which will be one of 'granted', 'denied', or 'prompt'
  • subscribe([{ userVisibleOnly:true|false, applicationServerKey:key }]) - resolves to a PushSubscription object containing details of a push subscription, new push subscription is created if the current service worker does not have an existing subscription
• PushMessageData - provides methods which let you retrieve the push data sent by a server in various formats, these methods can be called multiple times, received messages are sent encrypted by push services and then automatically decrypted by browsers before they are made accessible
  • methods
  • arrayBuffer() - as an ArrayBuffer object
  • blob() - as a Blob object
  • json() - as a JSON object
  • text() - as a plain text string
• PushSubscription - provides a subcriptions URL endpoint, and allows unsubscription from a push service, instance of this interface can be serialized
  • properties
  • endpoint - endpoint associated with the push subscription
  • expirationTime - DOMHighResTimeStamp of the subscription expiration time associated with the push subscription, if there is one OR null
  • options - object containing the options used to create the subscription, contains userVisibleOnly and applicationServerKey
  • subscriptionId - subscription ID associated with the push subscription
  • methods
  • getKey(p256dh|auth) - ArrayBuffer which contains the client's public key, which can then be sent to a server and used in encrypting push message data
  • toJSON() - standard serializer — returns a JSON representation of the subscription properties
  • unsubscribe() - starts the asynchronous process of unsubscribing from the push service, returning a Promise that resolves to a Boolean when the current subscription is successfully unregistered
• Service worker additions
  • ServiceWorkerRegistration.pushManager
  • ServiceWorkerGlobalScope.onpush
  • ServiceWorkerGlobalScope.onpushsubscriptionchange
• https://serviceworke.rs

Streams

• breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit
• readable stream - data source represented in JS by a ReadableStream object that flows from an underlying source - this is a resource somewhere on the network or elsewhere on your domain that you want to get data from
  • Push sources - constantly push data at you when you’ve accessed them, and it is up to you to start, pause, or cancel access to the stream (video streams and TCP/Web sockets)
  • Pull sources - require you to explicitly request data from them once connected to (Fetch or XHR call)
• standard pattern you’ll see when using stream readers:
  1. write a function that starts off by reading the stream
  2. if there is no more stream to read, you return out of the function
  3. if there is more stream to read, you process the current chunk then run the function again
  4. keep running the function recursively until there is no more stream to read, in which case step 2 is followed
• data is read sequentially in small pieces called chunks - a single byte, or it can be something larger such as a typed array of a certain size, a single stream can contain chunks of different sizes and types
• chunks placed in a stream are said to be enqueued - this means they are waiting in a queue ready to be read
• internal queue keeps track of the chunks that have not yet been read
• chunks inside the stream are read by a reader - this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it
• reader plus the other processing code that goes along with it is called a consumer
• controller - each reader associated controller that allows you to control the stream (to cancel it,...)
• only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it, if you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams)
• two different types of readable stream: conventional readable stream and byte stream - extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources, allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required, which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the ReadableStream.ReadableStream())
• you can make use of ready-made readable streams via mechanisms like a Response.body from a fetch request, or roll your own streams using the ReadableStream.ReadableStream() constructor.
• teeing - split a stream into two identical copies (ReadableStream.tee()), which can then be read by two separate readers, for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache
• writable stream - a destination into which you can write data, represented in JS by a WritableStream object, serves as an abstraction over the top of an underlying sink - lower-level I/O sink into which raw data is written
• data is written to the stream via a writer, one chunk at a time
• you can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer
• when a writer is created and starts writing to a stream (an active writer), it is said to be locked to it, only one writer can write to a writable stream at one time, if you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it
• internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink
• pipe streams into one another using a structure called a pipe chain, there are two methods available: ReadableStream.pipeThrough() - pipes the stream through a transform stream, ReadableStream.pipeTo() - end point of the pipe chain
• start of the pipe chain is called the original source, and the end is called the ultimate sink
• backpressure - process by which a single stream or a pipe chain regulates the speed of reading/writing, when a stream later in the chain is still busy and isnt yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you dont end up with a bottleneck anywhere, to use backpressure in a ReadableStream, we can ask the controller for the chunk size desired by the consumer by querying the ReadableStreamDefaultController.desiredSize attribute on the controller, if it is too low, our ReadableStream can tell its underlying source to stop sending data, and we backpressure along the stream chain, if later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our stream with data
• chunks in a stream that have not yet been processed and finished with (enqueued but not yet read, written but not yet processed by the underlying sink) are kept track of by an internal queue
• internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state - compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage: high_water_mark - total_size_of_chunks_in_queue = desired_size
• desired size - size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size, after the calculation is performed, chunk generation will be slowed down/speed up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero, if the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems
• as an example: chunk size of 1, and a high water mark of 3, means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied

    <script src="../js/pako.min.js"></script>
    <script src="../js/crc32.js"></script>
    <script src="../js/png-lib.js"></script>
    <script src="../js/png-transform-stream.js"></script>
    <script src="../js/png-chunks.js"></script>
  

    var streams_tests = document.getElementById("streams_tests");

    function streamInImage (grayscale = false) {
      streams_tests.innerHTML = "";
      const image = document.createElement("img");
      image.setAttribute("height","50px");
      // Fetch the original image
      fetch('images/gta5.png') // process rgb-alpha for conversion
      // Retrieve its body as ReadableStream
      .then(response => response.body)
      .then(rs => {
        if (grayscale) {
          return rs.pipeThrough(new TransformStream(new GrayscalePNGTransformer()))
        }
        // read as stream
        const reader = rs.getReader();
        return new ReadableStream({
          async start(controller) {
            while (true) {
              const { done, value } = await reader.read();
              // When no more data needs to be consumed, break the reading
              if (done) { break; }
              // Enqueue the next data chunk into our target stream
              controller.enqueue(value);
            }
            // Close the stream
            controller.close();
            reader.releaseLock();
          }
        })
      })
      // Create a new response out of the stream
      .then(rs => new Response(rs))
      // Create an object URL for the response
      .then(response => response.blob())
      .then(blob => URL.createObjectURL(blob))
      // Update image
      .then(url => {
        image.src = url
        streams_tests.appendChild(image);
      }).catch(console.error);
    }

    var rss_result = "";
    function randomStringStreamSTART () {
      streams_tests.innerHTML = "";
      result = "";
      const stream = new ReadableStream({
        start(controller) {
          interval = setInterval(() => {
            let string = randomChars();
            // Add the string to the stream
            controller.enqueue(string);
            // show it on the screen
            streams_tests.innerHTML += string;
          }, 1000);
          document.getElementById("rssc").addEventListener('click', function() {
            clearInterval(interval);

            // function teeStream() {
            //   const teedOff = stream.tee();
            //   readStream(teedOff[0], list2);
            //   readStream(teedOff[1], list3);
            // }
            // function readStream(stream, list) {

            // readStream() - START
            const reader = stream.getReader();
            let charsReceived = 0;
            // read() returns a promise that resolves
            // when a value has been received
            reader.read().then(function processText({ done, value }) {
              // Result objects contain two properties:
              // done  - true if the stream has already given you all its data.
              // value - some data. Always undefined when done is true.
              if (done) {
                streams_tests.innerHTML += "Stream complete: "+rss_result;
                return;
              }
              charsReceived += value.length;
              const chunk = value;
              streams_tests.innerHTML += 'Read ' + charsReceived +
                  ' characters so far. Current chunk = '+chunk;
              rss_result += chunk;
              // Read some more, and call this function again
              return reader.read().then(processText);
            });
            // readStream() - END
            controller.close();
          })
        },
        pull(controller) {
          // We don't really need a pull in this example
        },
        cancel() {
          // This is called if the reader cancels,
          // so we should stop generating strings
          clearInterval(interval);
        }
      });
    }
    function randomChars() {
      let string = "";
      let choices = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
      for (let i = 0; i < 8; i++) {
        string += choices.charAt(Math.floor(Math.random() * choices.length));
      }
      return string;
    }

    function sendMessage(message) {
      streams_tests.innerHTML = "";
      const decoder = new TextDecoder("utf-8");
      const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
      let result = "";
      const writableStream = new WritableStream({
        // Implement the sink
        write(chunk) {
          return new Promise((resolve, reject) => {
            var buffer = new ArrayBuffer(2);
            var view = new Uint16Array(buffer);
            view[0] = chunk;
            var decoded = decoder.decode(view, { stream: true });
            streams_tests.innerHTML += "Chunk decoded: "+decoded;
            result += decoded;
            resolve();
          });
        },
        close() { streams_tests.innerHTML += "[MESSAGE RECEIVED] " + result; },
        abort(err) { streams_tests.innerHTML += "Sink error: " + err; }
      }, queuingStrategy);

      // defaultWriter is of type WritableStreamDefaultWriter
      const defaultWriter = writableStream.getWriter();
      const encoder = new TextEncoder();
      const encoded = encoder.encode(message, { stream: true });
      encoded.forEach((chunk) => {
        defaultWriter.ready
          .then(() => {
            return defaultWriter.write(chunk);
          })
          .then(() => {
            // streams_tests.innerHTML += "Chunk written to sink";
          })
          .catch((err) => {
            streams_tests.innerHTML += "Chunk error: "+err;
          });
      });
      // Call ready again to ensure that all chunks are written
      //   before closing the writer.
      defaultWriter.ready
        .then(() => {
          defaultWriter.close();
        })
        .then(() => {
          // streams_tests.innerHTML += "All chunks written";
        })
        .catch((err) => {
          streams_tests.innerHTML += "Stream error: "+err;
        });
    }

    function PngChunksStreamLog (img) {
      streams_tests.innerHTML = "";
      // Fetch the original image
      fetch(img)
      // Retrieve its body as ReadableStream
      .then(response => response.body)
      // Log each fetched Uint8Array chunk
      .then(rs => logReadableStream('Fetch Response Stream', rs))
      // Transform to a PNG chunk stream
      .then(rs => rs.pipeThrough(new PNGTransformStream()))
      // Log each transformed PNG chunk
      .then(rs => logReadableStream('PNG Chunk Stream', rs))
    }
    class LogStreamSink {
      constructor(name) {
        this.name = name;
        this.counter = 0;
      }
      write(chunk) {
        this.counter += 1;
        // console.log('Chunk %d of %s: %o', this.counter, this.name, chunk);
        this.createRow(this.name, this.counter, chunk.constructor.name);
      }
      close() {
        this.createRow(this.name, this.counter, 'Closed');
      }
      createRow(heading, col1, col2) {
        streams_tests.innerHTML += heading+" "+col1+" "+col2;
      }
    }
    function logReadableStream(name, rs) {
      const [rs1, rs2] = rs.tee();
      rs2.pipeTo(new WritableStream(new LogStreamSink(name))).catch(console.error);
      return rs1;
    }
  

• READABLE STREAMS
• ReadableStream - represents a readable stream of data, handles response streams of the Fetch API, or developer-defined streams (e.g. a custom ReadableStream() constructor)
  • new ReadableStream( { start(RS_default_ctrlr){...}, [ pull|cancel(RS_default_ctrlr){...}, type:"bytes", autoAllocateChunkSize:1 ] } [,{ highWaterMark:chunks_nr, size:of_chunk_to_use}] )
  • properties
  • locked - whether or not the readable stream is locked to a reader
  • methods
  • cancel(reason_str) - cancels the stream, signaling a loss of interest in the stream by a consumer. The supplied reason argument will be given to the underlying source, which may or may not use it
  • getReader( [{mode:"byob"}] ) - creates a reader and locks the stream to it, no other reader can be acquired until this one is released
  • pipeThrough( transformStream [,{ preventClose:true|false, preventAbort:true|false, preventCancel:true|false }] ) - provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair
  • pipeTo( WS [,{ preventClose:true|false, preventAbort:true|false, preventCancel:true|false }] ) - pipes the current ReadableStream to a given WritableStream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered
  • tee() - tees this readable stream, returning a two-element array containing the two resulting branches as new ReadableStream instances
• ReadableStreamDefaultReader - default reader that can be used to read stream data supplied from a network (e.g. a fetch request)
  • new ReadableStreamDefaultReader(stream)
  • properties
  • closed - allows you to write code that responds to an end to the streaming process, returns a promise that fulfills if the stream becomes closed or the reader lock is released, or rejects if the stream errors
  • methods
  • cancel(reason_str) - cancels the stream, signaling a loss of interest in the stream by a consumer, supplied reason argument will be given to the underlying source, which may or may not use it
  • read() - access to the next chunk in the stream's internal queue, returns: {value:theChunk|undefined,done:false} | Error
  • releaseLock() - releases the reader lock on the stream, if the associated stream is errored when the lock is released, the reader will appear errored in that same way subsequently; otherwise, the reader will appear closed
• ReadableStreamDefaultController - control of a ReadableStream state and internal queue, default controllers are for streams that are not byte streams
  • new ReadableStreamDefaultController( ReadableStream, { start(RS_default_ctrlr){...}, [ pull|cancel(RS_default_ctrlr){...}, type:"bytes", autoAllocateChunkSize:1 ] }, highWaterMark:chunks_nr, size:of_chunk_to_use )
  • properties
  • desiredSize - desired size required to fill the stream internal queue
  • methods
  • close() - closes the associated stream, readers will still be able to read any previously-enqueued chunks from the stream, but once those are read, the stream will become closed, if you want to completely get rid of the stream and discard any enqueued chunks, you'd use ReadableStream.cancel() or ReadableStreamDefaultReader.cancel()
  • enqueue(chunk) - enqueues a given chunk in the associated stream
  • error(err_str) - causes any future interactions with the associated stream to error
• WRITABLE STREAMS
• WritableStream - standard abstraction for writing streaming data to a destination, known as a sink, comes with built-in backpressure and queuing
  • new WritableStream({ start|write|close(WS_default_ctrlr){...}, abort(reason_str) } [,{ highWaterMark:chunks_nr, size:of_chunk_to_use}])
  • properties
  • locked - whether or not the writable stream is locked to a reader
  • methods
  • abort() - aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded
  • getWriter() - new instance of WritableStreamDefaultWriter and locks the stream to that instance, while the stream is locked, no other writer can be acquired until this one is released
• WritableStreamDefaultWriter - default writable stream writer that can be used to write chunks of data to a writable stream
  • new WritableStreamDefaultWriter(WS)
  • properties
  • closed - allows you to write code that responds to an end to the streaming process, returns a promise that fulfills if the stream becomes closed or the reader lock is released, or rejects if the stream errors
  • desiredSize - desired size required to fill the stream internal queue
  • ready - Promise that resolves when the desired size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure
  • methods
  • abort(reason_str) - aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded, if the writer is active, the abort() method behaves the same as that for the associated stream (WritableStream.abort()) OR it returns a rejected promise
  • close() - closes the associated writable stream, the underlying sink will finish processing any previously-written chunks, before invoking the close behavior, during this time any further attempts to write will fail (without erroring the stream)
  • releaseLock() - releases the writer lock on the corresponding stream, after the lock is released, the writer is no longer active, if the associated stream is errored when the lock is released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed
  • write(chunk) - writes a passed chunk of data to a WritableStream and its underlying sink, then returns a Promise that resolves to indicate the success or failure of the write operation
• WritableStreamDefaultController - control of a WritableStream's state, when constructing a WritableStream, the underlying sink is given a corresponding WritableStreamDefaultController instance to manipulate
  • new WritableStreamDefaultController(WS, { start|write|close(WS_default_ctrlr){...}, abort(reason_str) }, size:of_chunk_to_use, highWaterMark:chunks_nr)
  • methods
  • error(err_str) - causes any future interactions with the associated stream to error
• EXTENSIONS TO OTHER APIs
  • Request - pass in a ReadableStream on construction)
  • Body - exposed as ReadableStream
• ByteStrem-Related INTERFACES
  • ReadableStreamBYOBReader - represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom ReadableStream() constructor)
  • ReadableByteStreamController - represents a controller allowing control of a ReadableStream's state and internal queue, byte stream controllers are for byte streams
  • ReadableStreamBYOBRequest - represents a pull into request in a ReadableByteStreamController

PWA

• progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications, these apps work everywhere and provide several features that give them the same user experience advantages as native apps
  • discoverable - contents can be found through search engines
  • installable - available on the device home screen
  • linkable - share it by simply sending a URL
  • network independent - works offline or with a poor network connection
  • progressive - usable on a basic level on older browsers, but fully-functional on the latest ones
  • re-engageable - able to send notifications whenever there is new content available
  • responsive - usable on any device with a screen and a browser — mobile phones, tablets, laptops, TVs, fridges, etc
  • safe - connection between you and the app is secured against any third parties trying to get access to your sensitive data
  • reduced wait times and page load
• checklist
  • HTTPs
  • responsive
  • offline (cache-first, emulate offline and inform)
  • add to homescreen (A2HS)
    • HTTPs
    • manifest with: background_color, display, icons(192 and 512), name, short_name, start_url (use full path !)
    • service worker (which controls(?) start_url from manifest)
    • ON DESKTOP: intercept beforeinstallprompt and show a button to install
  • fast load
  • cross-browser
  • smooth page-transition
  • each page has a url (routed or loadable)
  • EXTRA
  • indexed
  • appropriate markup (schema.org)
  • Open Graph, social metadata, crawlers
  • canonical URLs for content under multiple links
  • History API
  • fixed content while page is loaded
  • scroll position remembering
  • inputs are viewable (element.scrollIntoView())
  • shareable content
  • not excessive install/notification banners (which are matters, relevant, manageable)
  • dim screen on permisions
  • audit resources (they're necessary ?)
  • blocks VS flex/grid
  • CSS is a render blocking resource, get it to the client soon and quickly
  • HTTP/2
  • download resources earlier using resource hints and propitization: rel="preload"/"preconnect"/"prefetch", as="font"
  • code splitting, minification, server side resource compression, image optimization (WebP, "accept" image/webp)
  • video instead of animated GIFs
  • DPR, Width and Viewport-Width headers - define images for a device using server-side code and deliver less markup
  • Save-Data header - lighter application experiences for users who are specifically asking you to do so
• mixing server-side rendering (SSR) with client-side rendering (CSR) can lead to the best results - you can render a website on the server, cache its contents, and then update the rendering on the client-side as and when needed, some will work better than the other
• app shell - loading a minimal user interface as soon as possible and then caching it so it is available offline
• manifest (.webmanifest extension is specified in specification, but browsers generally support manifests with other appropriate extensions like .json), optional: should be served using the application/manifest+json MIME type, <link rel="manifest" href="manifest.webmanifest">
  • name - full name of your web app
  • icons - bunch of icon information with: sizes, src, types, purpose (any|badge|maskable), include at least a few, so that one that fits best will be chosen for the users device
  • short_name - short name to be shown on the home screen
  • description - sentence or two explaining what your app does
  • start_url - index document to launch when starting the app
  • display - how the app is displayed: fullscreen, standalone, minimal-ui, or browser (selectively apply CSS based on the display mode, using the display-mode media feature)
  • theme_color - primary color for the UI, used by operating system
  • background_color - color for background, used during install and on the splash screen
  • lang - naguage tag (en-US, ...)
  • orientation - any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary
  • prefer_related_applications - false OR alternative apps info: platform, url, id
  • scope - defines the navigation scope of this website context, restricts what web pages can be viewed while the manifest is applied, if the user navigates outside the scope, it returns to a normal web page inside a browser tab/window, if the scope is a relative URL, the base URL will be the URL of the manifest
  • splashscreen - displayed for sites launched from a homescreen, auto-generated from properties in the web app manifest, specifically: name, background_color, icon in the icons array that is closest to 128dpi for the device
• <script src="app.js" defer></script> - download and execute after the document itself has been parsed
• <link rel="stylesheet" href="print.css" media="print"> - load only when the condition is met
• move css from separate file into header to avoid calls for basic layout
• optimize images: tinyPNG, ...
• Credential Management API - store and retrieve different types of credentials, seeing account they used to sign on to a site, or resuming a session without the explicit sign-in flow of an expired session, restricted to top-level contexts
• Payment Request/Handler/Method/Manifest API - consistent user experience for both merchants and users, a way for users to select their preferred way of paying for things, and make that information available to a merchant (Stripe,Braintree,Bluesnap,WePay)

Structure

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>js13kGames A-Frame entries</title>
      <meta name="description" content="A list ...">
      <meta name="author" content="end3r">
      <meta name="theme-color" content="#B12A34">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta property="og:image" content="icons/icon-512.png">
      <link rel="shortcut icon" href="favicon.ico">
      <link rel="stylesheet" href="style.css">
      <link rel="manifest" href="js13kpwa.webmanifest">
      <script src="data/games.js" defer></script>
      <script src="app.js" defer></script>
    </head>
    <body>
    <header>
      <p>
        <a class="logo" href="http://js13kgames.com">
        <img src="img/js13kgames.png" alt="js13kGames">
        </a>
      </p>
    </header>
    <main>
      <h1>js13kGames A-Frame entries</h1>
      <p class="description">....</p>
      <button id="notifications">notifications</button>
      <section id="content">
        // Content inserted in here
      </section>
    </main>
    <footer>
      <p>©....</p>
    </footer>
    </body>
    </html>
  

app.js

    var template = "<article>\n\
      <img src='data/img/SLUG.jpg' alt='NAME'>\n\
      <h3>#POS. NAME</h3>\n\
      <ul>\n\
      <li><span>Author:</span> <strong>AUTHOR</strong></li>\n\
      <li><span>Twitter:</span> <a href='https://twitter.com/TWITTER'>@TWITTER</a></li>\n\
      <li><span>Website:</span> <a href='http://WEBSITE/'>WEBSITE</a></li>\n\
      <li><span>GitHub:</span> <a href='https://GITHUB'>GITHUB</a></li>\n\
      </ul>\n\
    </article>";
    var content = '';
    for(var i=0; i<games.length; i++) {
      var entry = template.replace(/POS/g,(i+1))
        .replace(/SLUG/g,games[i].slug)
        .replace(/NAME/g,games[i].name)
        .replace(/AUTHOR/g,games[i].author)
        .replace(/TWITTER/g,games[i].twitter)
        .replace(/WEBSITE/g,games[i].website)
        .replace(/GITHUB/g,games[i].github);
      entry = entry.replace('<a href=\'http:///\'></a>','-');
      content += entry;
    };
    document.getElementById('content').innerHTML = content;

    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
    };

    var button = document.getElementById("notifications");
    button.addEventListener('click', function(e) {
      Notification.requestPermission().then(function(result) {
        if(result === 'granted') {
          randomNotification();
        }
      });
    });

    function randomNotification() {
      var randomItem = Math.floor(Math.random()*games.length);
      var notifTitle = games[randomItem].name;
      var notifBody = 'Created by '+games[randomItem].author+'.';
      var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
      var options = {
        body: notifBody,
        icon: notifImg
      }
      var notif = new Notification(notifTitle, options);
      setTimeout(randomNotification, 30000);
    }
  

sw.js

    self.importScripts('data/games.js');

    var cacheName = 'js13kPWA-v1';
    var appShellFiles = [
      '/pwa-examples/js13kpwa/',
      '/pwa-examples/js13kpwa/index.html',
      '/pwa-examples/js13kpwa/app.js',
      '/pwa-examples/js13kpwa/style.css',
      '/pwa-examples/js13kpwa/fonts/graduate.eot',
      '/pwa-examples/js13kpwa/fonts/graduate.ttf',
      '/pwa-examples/js13kpwa/fonts/graduate.woff',
      '/pwa-examples/js13kpwa/favicon.ico',
      '/pwa-examples/js13kpwa/img/js13kgames.png',
      '/pwa-examples/js13kpwa/img/bg.png',
      '/pwa-examples/js13kpwa/icons/icon-32.png',
      '/pwa-examples/js13kpwa/icons/icon-64.png',
      '/pwa-examples/js13kpwa/icons/icon-96.png',
      '/pwa-examples/js13kpwa/icons/icon-128.png',
      '/pwa-examples/js13kpwa/icons/icon-168.png',
      '/pwa-examples/js13kpwa/icons/icon-192.png',
      '/pwa-examples/js13kpwa/icons/icon-256.png',
      '/pwa-examples/js13kpwa/icons/icon-512.png'
    ];
    var gamesImages = [];
    for(var i=0; i<games.length; i++) {
      gamesImages.push('data/img/'+games[i].slug+'.jpg');
    }
    var contentToCache = appShellFiles.concat(gamesImages);

    self.addEventListener('install', function(e) {
      console.log('[Service Worker] Install');
      e.waitUntil(
        caches.open(cacheName).then(function(cache) {
          console.log('[Service Worker] Caching all: app shell and content');
          return cache.addAll(contentToCache);
        })
      );
    });

    self.addEventListener('activate', function(e) {
      e.waitUntil(
        caches.keys().then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
            if(cacheName.indexOf(key) === -1) {
              return caches.delete(key);
            }
          }));
        })
      );
    });

    self.addEventListener('fetch', function(e) {
      e.respondWith(
        caches.match(e.request).then(function(r) {
          console.log('[Service Worker] Fetching resource: '+e.request.url);
          return r || fetch(e.request).then(function(response) {
            return caches.open(cacheName).then(function(cache) {
              console.log('[Service Worker] Caching new resource: '+e.request.url);
              cache.put(e.request, response.clone());
              return response;
            });
          });
        })
      );
    });
  

games.js

    var games = [
      {
        slug: 'lost-in-cyberspace',
        name: 'Lost in Cyberspace',
        author: 'Zosia and Bartek',
        twitter: 'bartaz',
        website: '',
        github: 'github.com/bartaz/lost-in-cyberspace'
      },
      {
        slug: 'vernissage',
        name: 'Vernissage',
        author: 'Platane',
        twitter: 'platane_',
        website: 'github.com/Platane',
        github: 'github.com/Platane/js13k-2017'
      },
      // ...
      {
        slug: 'emma-3d',
        name: 'Emma-3D',
        author: 'Prateek Roushan',
        twitter: '',
        website: '',
        github: 'github.com/coderprateek/Emma-3D'
      }
    ];
  

js13kpwa.webmanifest

    {
      "name": "js13kGames Progressive Web App",
      "short_name": "js13kPWA",
      "description": "Progressive Web App that lists ...",
      "icons": [
        {
          "src": "icons/icon-32.png",
          "sizes": "32x32",
          "type": "image/png"
        },
        {
          "src": "icons/icon-64.png",
          "sizes": "64x64",
          "type": "image/png"
        },
        {
          "src": "icons/icon-96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "icons/icon-128.png",
          "sizes": "128x128",
          "type": "image/png"
        },
        {
          "src": "icons/icon-168.png",
          "sizes": "168x168",
          "type": "image/png"
        },
        {
          "src": "icons/icon-192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "icons/icon-256.png",
          "sizes": "256x256",
          "type": "image/png"
        },
        {
          "src": "icons/icon-512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "start_url": "/pwa-examples/js13kpwa/index.html",
      "scope": "/myapp/"
      // "start_url": "http://web-engineer-book/index.html",
      // "scope": "http://web-engineer-book/",
      "display": "fullscreen",
      "theme_color": "#B12A34",
      "background_color": "#B12A34",
      "lang": "en-US",
      "related_applications": [
        {
          "platform": "play",
          "url": "https://play.google.com/store/apps/details?id=com.example.app1",
          "id": "com.example.app1"
        }, {
          "platform": "itunes",
          "url": "https://itunes.apple.com/app/example-app1/id123456789"
        }],
        "orientation": "landscape"
    }
  

INSTALL AS APP

js

    let deferredPrompt;
    const install_button = document.getElementById('install_button');
    install_button.style.display = 'none';
    window.addEventListener('beforeinstallprompt', (e) => {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      // e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
      // Update UI to notify the user they can add to home screen
      install_button.style.display = 'block';

      install_button.addEventListener('click', (e) => {
        // hide our user interface that shows our A2HS button
        install_button.style.display = 'none';
        // Show the prompt
        deferredPrompt.prompt();
        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
              alert('User accepted the A2HS prompt');
            } else {
              alert('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
          });
      });

    });

    window.addEventListener("appinstalled", (ev) => {
      const date = new Date(ev.timeStamp / 1000);
      alert(`App got installed at ${date.toTimeString()}.`);
    });
  

PROGRESSIVE CONTENT LOADING

html

    <img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
  

css

    article img[data-src] {
      filter: blur(0.2em);
    }
    article img {
      filter: blur(0em);
      transition: filter 0.5s;
    }
  

js

    var imagesToLoad = document.querySelectorAll('img[data-src]');
    var loadImages = function(image) {
      image.setAttribute('src', image.getAttribute('data-src'));
      image.onload = function() {
        image.removeAttribute('data-src');
      };
    };
    if('IntersectionObserver' in window) {
      var observer = new IntersectionObserver(function(items, observer) {
        items.forEach(function(item) {
          if(item.isIntersecting) {
            loadImages(item.target);
            observer.unobserve(item.target);
          }
        });
      });
      imagesToLoad.forEach(function(img) {
        observer.observe(img);
      });
    } else {
      imagesToLoad.forEach(function(img) {
        loadImages(img);
      });
    }
  

ONLINE or OFFLINE ?

    window.addEventListener('load', function() {
      var status = document.getElementById("status");
      var log = document.getElementById("log");
      function updateOnlineStatus(event) {
        var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();
        log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
      }
      window.addEventListener('online',  updateOnlineStatus);
      window.addEventListener('offline', updateOnlineStatus);
    });
  

Page Observers

• asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document viewport
• allows you to configure a callback that is called whenever one element (target) intersects either the device viewport or a specified element; for the purpose of this API, this is called the root, typically, you watch for intersection changes with regard to the document viewport (which is done by specifying null as the root element), whether you are using the viewport or some other element as the root, the API works the same way, executing a callback function you provide whenever the visibility of the target element changes so that it crosses desired amounts of intersection with the root, degree of intersection between the target element and its root is the intersection ratio, representation of the percentage of the target element which is visible as a value between 0.0 and 1.0
• root - element that is used as the viewport for checking visiblity of the target, must be the ancestor of the target, defaults to the browser viewport if not specified or if null
• rootMargin - margin around the root, can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left), values can be percentages, serves to grow or shrink each side of the root element bounding box before computing intersections, defaults to all zeros
• threshold - a single number or an array of numbers which indicate at what percentage of the target visibility the observer callback should be executed, if you only want to detect when visibility passes the 50% mark, you can use a value of 0.5, if you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1], default is 0 (meaning as soon as even one pixel is visible, the callback will be run), value of 1.0 means that the threshold isnt considered passed until every pixel is visible

    var po_tests = document.getElementById("po_tests");
    var po_tests_1 = document.getElementById("po_tests_1");
    var po_tests_2 = document.getElementById("po_tests_2");

    var prevRatio = 0.0; // to save visibility
    var increasingColor = "rgba(67, 244, 65, ratio)";
    var decreasingColor = "rgba(65, 145, 244, ratio)";

    // var po_track_started = false;
    var po_is_visible = false;
    var po_view_start = 0;
    var po_total_view = 0;
    var po_data_1 = document.getElementById("po_data_1");
    var po_data_2 = document.getElementById("po_data_2");

    function startTracking() {
      track_interval = setInterval(()=>{
        let totalSeconds = po_total_view / 1000;
        let sec = Math.floor(totalSeconds % 60);
        let min = Math.floor(totalSeconds / 60);
        po_data_1.innerHTML = po_data_2.innerHTML =
          "po_is_visible: "+po_is_visible+
          "po_total_view: "+min+":"+sec.toString().padStart(2,"0")+" ["+po_total_view+"ms]";
          // "performance.now(): " + performance.now();
          updateAdTimer();
      },150);
    }
    function stopTracking() {
      clearInterval(track_interval);
    }

    // window.addEventListener("load", function(event) {
      var observer;
      var options = {
        root: null,
        rootMargin: "0px",
        threshold: buildThresholdList()
        // [0.5],
        // [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
        // [0, 0.25, 0.5, 0.75, 1.0]
      };
      observer = new IntersectionObserver(
        handleIntersect,
        options
      );
      observer.observe(po_tests);
    // }, false);

    function buildThresholdList() {
      var thresholds = [];
      var numSteps = 20; // how many thresholds between 0.0 and 1.0
      for (var i=1.0; i<=numSteps; i++) {
        var ratio = i/numSteps;
        thresholds.push(ratio);
      }
      thresholds.push(0);
      return thresholds;
    }
    function handleIntersect(entries, observer) {
      entries.forEach(function(entry) {
        po_is_visible = false;
        if (entry.isIntersecting) {
          if (entry.intersectionRatio >= 0.35) {
            po_view_start = performance.now();
            // po_track_started = true;
            po_is_visible = true;
          }
        }

        po_tests_1.innerHTML =
          "intersectionRatio: " + entry.intersectionRatio +
          "isIntersecting: " + entry.isIntersecting +
          "---------------------------------" +
          "boundingClientRect.width: " + entry.boundingClientRect.width +
          "boundingClientRect.height: " + entry.boundingClientRect.height +
          "boundingClientRect.top: " + entry.boundingClientRect.top +
          "boundingClientRect.right: " + entry.boundingClientRect.right +
          "boundingClientRect.bottom: " + entry.boundingClientRect.bottom +
          "boundingClientRect.left: " + entry.boundingClientRect.left +
          "boundingClientRect.x: " + entry.boundingClientRect.x +
          "boundingClientRect.y: " + entry.boundingClientRect.y;

        po_tests_2.innerHTML =
          "intersectionRect.width: " + entry.intersectionRect.width +
          "intersectionRect.height: " + entry.intersectionRect.height +
          "intersectionRect.top: " + entry.intersectionRect.top +
          "intersectionRect.right: " + entry.intersectionRect.right +
          "intersectionRect.bottom: " + entry.intersectionRect.bottom +
          "intersectionRect.left: " + entry.intersectionRect.left +
          "intersectionRect.x: " + entry.intersectionRect.x +
          "intersectionRect.y: " + entry.intersectionRect.y +
          "---------------------------------" +
          "rootBounds.width: " + entry.rootBounds.width +
          "rootBounds.height: " + entry.rootBounds.height +
          "rootBounds.top: " + entry.rootBounds.top +
          "rootBounds.right: " + entry.rootBounds.right +
          "rootBounds.bottom: " + entry.rootBounds.bottom +
          "rootBounds.left: " + entry.rootBounds.left +
          "rootBounds.x: " + entry.rootBounds.x +
          "rootBounds.y: " + entry.rootBounds.y;

        if (entry.intersectionRatio > prevRatio) {
          entry.target.style.backgroundColor =
            increasingColor.replace("ratio", entry.intersectionRatio);
        } else {
          entry.target.style.backgroundColor =
            decreasingColor.replace("ratio", entry.intersectionRatio);
        }
        prevRatio = entry.intersectionRatio;
        let box = entry.target;
        let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
        box.querySelector(".topLeft").innerHTML = visiblePct;
        box.querySelector(".topRight").innerHTML = visiblePct;
        box.querySelector(".bottomLeft").innerHTML = visiblePct;
        box.querySelector(".bottomRight").innerHTML = visiblePct;
      });
    }

    function updateAdTimer() {
      if(!po_is_visible) return;
      let lastStarted = po_view_start;
      let currentTime = performance.now();
      if (lastStarted) {
        let diff = currentTime - lastStarted;
        po_total_view = parseFloat(po_total_view) + diff;
      }
      po_view_start = currentTime;
    }

    document.addEventListener(
      "visibilitychange",
      () => {
        if (document.hidden) {
          po_is_visible = 0;
          po_view_start = 0;
          // videoElement.pause();
        } else {
          po_is_visible = 1;
          // videoElement.play();
        }
      },
      false
    );
    // videoElement.addEventListener("pause", function(){
    //   document.title = 'Paused';
    // }, false);
    // // When the video plays, set the title.
    // videoElement.addEventListener("play", function(){
    //   document.title = 'Playing';
    // }, false);
  

• IntersectionObserver
  • new IntersectionObserver(callback [,{ root:el_as_viewport, rootMargin:"0px 0px 0px 0px", threshold:0.0 }] ) - callback is called when the percentage of the target element is visible crosses a threshold, receives as input two parameters: entries (list of IntersectionObserverEntry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold), observer (IntersectionObserver for which the callback is being invoked)
  • properties
  • root - specific ancestor of the target element being observed, is null if no value was passed, the top-level document viewport is used
  • rootMargin - an offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes, value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements, each offset can be expressed in pixels (px) or as a percentage (%), default is "0px 0px 0px 0px"
  • thresholds - a list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target, notifications for a target are generated when any of the thresholds are crossed for that target, if no value was passed to the constructor, 0 is used
  • methods
  • observe(el) - tells the IntersectionObserver a target element to observe
  • unobserve(el) - tells the IntersectionObserver to stop observing a particular target element
  • disconnect() - stops the IntersectionObserver object from observing any target
  • takeRecords() - returns an array of IntersectionObserverEntry objects for all observed targets and stops observing all of them
IntersectionObserverEntry - describes the intersection between the target element and its root container at a specific moment of transition, nstances are delivered to an IntersectionObserver callback in its entries parameter; otherwise, these objects can only be obtained by calling IntersectionObserver.takeRecords()
• properties
  • boundingClientRect - bounds rectangle of the target element as a DOMRectReadOnly, are computed as described in the documentation for Element.getBoundingClientRect()
  • intersectionRatio - ratio of the intersectionRect to the boundingClientRect
  • intersectionRect - DOMRectReadOnly representing the target visible area
  • isIntersecting - Boolean value which is true if the target element intersects with the intersection observer root, true - IntersectionObserverEntry describes a transition into a state of intersection, false - transition is from intersecting to not-intersecting
  • rootBounds - DOMRectReadOnly for the intersection observer root
  • target - Element whose intersection with the root changed
  • time - time at which the intersection was recorded, relative to the IntersectionObserver time origin
• Page Visibility API
  • document.hidden - true if the page is in a state considered to be hidden to the user, and false otherwise
  • document.visibilityState - document current visibility state: visible, hidden, prerender, unloaded
  • document.onvisibilitychange - EventListener providing the code to be called when the visibilitychange event is fired

MutationObserver

• ability to watch for changes being made to the DOM tree, designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification
• new MutationObserver(callback)
• methods
  • disconnect() - tops the MutationObserver instance from receiving further notifications until and unless observe() is called again
  • takeRecords() - removes all pending notifications from the MutationObserver notification queue and returns them in a new Array of MutationRecord objects
  • observe(target [,options]) - configures the MutationObserver to begin receiving notifications through its callback function when DOM changes matching the given options occur, at a minimum, one of childList, attributes, and/or characterData must be true
    • attributeFilter - array of specific attribute names to be monitored, if this property isnt included, changes to all attributes cause mutation notifications
    • attributeOldValue - set to true to record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes; see Monitoring attribute values in MutationObserver for details on watching for attribute changes and value recording
    • attributes - set to true to watch for changes to the value of attributes on the node or nodes being monitored
    • characterData - set to true to monitor the specified target node or subtree for changes to the character data contained within the node or nodes
    • characterDataOldValue - set to true to record the previous value of a nodes text whenever the text changes on nodes being monitored
    • childList - set to true to monitor the target node (and, if subtree is true, its descendants) for the addition or removal of new child nodes
    • subtree - set to true to extend monitoring to the entire subtree of nodes rooted at target, all of the other MutationObserverInit properties are then extended to all of the nodes in the subtree instead of applying solely to the target node
• TypeError
  • options are configured such that nothing will actually be monitored (for example, if MutationObserverInit.childList, MutationObserverInit.attributes, and MutationObserverInit.characterData are all false)
  • attributes option is false (indicating that attribute changes are not not to be monitored) but attributeOldValue is true and/or attributeFilter is present
  • characterDataOldValue option is true but MutationObserverInit.characterData is false (indicating that character changes arent to be tracked)
• reusing MutationObservers
  • call observe() multiple times on the same MutationObserver to watch for changes to different parts of the DOM tree and/or different types of changes
  • if you call observe() on a node that already being observed by the same MutationObserver, all existing observers are automatically removed from all targets being observed before the new observer is activated
  • if the same MutationObserver is not already in use on the target, then the existing observers are left alone and the new one is added
• mutation observers are intended to let you be able to watch the desired set of nodes over time, even if the direct connections between those nodes are severed, if you begin watching a subtree of nodes, and a portion of that subtree is detached and moved elsewhere in the DOM, you continue to watch the detached segment of nodes, receiving the same callbacks as before the nodes were detached from the original subtree, this prevents you from missing changes that occur after the connection is severed and before you have a chance to specifically begin monitoring the moved node or subtree for changes
• in theory if you keep track of the MutationRecord objects describing the changes that occur, and , you should be able to "undo" the changes, rewinding the DOM back to its initial state
• if the element being observed is removed from the DOM and then subsequently released by the browser garbage collection mechanism, the MutationObserver is likewise deleted

    var mo_tests = document.getElementById("mo_tests");

    const MutationObserver = window.MutationObserver ||
                            window.WebKitMutationObserver ||
                            window.MozMutationObserver ||
                            null;
    if (!MutationObserver) {
      battery_tests.innerHTML='MutationObserver not supported';
    }

    // target
    const mo_test_object = document.querySelector("#mo_test_object");
    // options
    const mo_config = {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true,
    };
    // instance
    const mo_observer = new MutationObserver(function(mutations) {
      mo_tests.innerHTML = `mutations =` + mutations; // MutationRecord
      mutations.forEach(function(mutation) {
        // console.log("mutation =", mutation);
        if (mutation.type === "characterData") {
          // target & object === typeof(mutation.target)
          // console.log(
          //   "A child node has been added OR removed.",
          //   mutation.target,
          //   typeof(mutation.target)
          // );
          // console.log("[...mutation.addedNodes].length", [...mutation.addedNodes].length);
          // console.log("[...mutation.removedNodes].length", [...mutation.removedNodes].length);
          // if (mutation.target && [...mutation.addedNodes].length) {
          //     // [...mutation.addedNodes].length
          //     console.log(`A child node ${mutation.target} has been added!`, mutation.target);
          // }
          // if (mutation.target && [...mutation.removedNodes].length) {
          //     // [...mutation.removedNodes].length
          //     console.log(`A child node ${mutation.target} has been removed!`, mutation.target);
          // }
        }
        if (mutation.type === "childList") {
          if (mutation.target && [...mutation.addedNodes].length) {
            mo_tests.innerHTML += `A child node ${mutation.target} has been added!` + mutation.target;
          }
          if (mutation.target && [...mutation.removedNodes].length) {
            mo_tests.innerHTML += `A child node ${mutation.target} has been removed!` + mutation.target;
          }
          // do somwthings
          let list_values = [];
          list_values = [].slice.call(mo_test_object.children).map(function(node) {
            return node.innerHTML;
          }).filter(function(str) {
            if (str === "") {
              return false;
            } else {
              return true;
            }
          });
          mo_tests.innerHTML += list_values;
        }
        if (mutation.type === "attributes") {
          mo_tests.innerHTML += "mutation = " + mutation;
          mo_tests.innerHTML += `The \`${mutation.attributeName}\` attribute was modified.`;
          // console.log("list style =", list.style);
          let { width, height } = mo_test_object.style;
          let style = { width, height };
          mo_tests.innerHTML += "style = " + JSON.stringify(style, null, 4);
        }
      });
    });
    function startMO (){
      mo_observer.observe(mo_test_object, mo_config);
      mo_tests.innerHTML = "mo_observer.observe(mo_test_object, mo_config)";
    }
    function stopMO (){
      mo_observer.disconnect();
      mo_tests.innerHTML = "mo_observer.disconnect()";
    }
    function addRandomChild(){
      var arc = document.createElement("span");
      arc.innerHTML = utils_randomInt();
      mo_test_object.appendChild(arc);
    }

    // var targetNode = document.querySelector("#someElement");
    // var observerOptions = {
    //   childList: true,
    //   attributes: true,
    //   subtree: true, // omit or set to false to observe only changes to the parent node
    //   attributeOldValue: true,
    //   // watch for changes to the status and username attributes
    //   // in any elements contained within a subtree
    //   attributeFilter: ["status","username"]
    //   // characterDataOldValue: true
    //   // characterData: true
    // }
    // var observer = new MutationObserver(callback);
    // observer.observe(targetNode, observerOptions);

    // // handle any still-pending mutations
    // var mutations = observer.takeRecords();
    // if (mutations) {
    //   callback(mutations);
    // }

    // // observer.disconnect();

    // function callback(mutationList, observer) {
    //   mutationList.forEach((mutation) => {
    //     switch(mutation.type) {
    //       case 'childList':
    //         /* One or more children have been added to and/or removed
    //           from the tree; see mutation.addedNodes and
    //           mutation.removedNodes */
    //         break;
    //       case 'attributes':

    //         "attributeName" + mutation.attributeName +
    //         " changed to " + mutation.target[attributeName] +
    //         " (was " + mutation.oldValue + ")"

    //         switch(mutation.attributeName) {
    //           case "status":
    //             userStatusChanged(mutation.target.username, mutation.target.status);
    //           break;
    //           case "username":
    //             usernameChanged(mutation.oldValue, mutation.target.username);
    //           break;
    //         }

    //         break;
    //     }
    //   });
  

ResizeObserver

• reports changes to the dimensions of an Element content or border box, or the bounding box of an SVGElement
• devicePixelContentBox - element content box in device pixel (i.e. physical pixel) units

    // change the font-size of a header and paragraph as a slider value is changed
    // causing the containing div to change width
    // shows that you can respond to changes in an element size,
    // even if they have nothing to do with the viewport.
    // checkbox turns the observer off and on: change/not in response to the div width changing

    if(window.ResizeObserver) {
      const h1Elem = document.querySelector('#ro-h1');
      const pElem = document.querySelector('#ro-p');
      const divElem = document.querySelector('#ro-div');
      const slider = document.querySelector('#ro-chk');
      const checkbox = document.querySelector('#ro-rng');

      divElem.style.width = '600px';

      slider.addEventListener('input', () => {
        divElem.style.width = slider.value + 'px';
      })

      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          if(entry.contentBoxSize) {
            // Checking for chrome as using a non-standard array
            if (entry.contentBoxSize[0]) {
              h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
              pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
            } else {
              h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
              pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
            }

            // canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
            // canvas.height = entry.devicePixelContentBoxSize[0].blockSize;

          } else {
            h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
            pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
          }
        }
        console.log('Size changed');
      });

      resizeObserver.observe(divElem);

      checkbox.addEventListener('change', () => {
        if(checkbox.checked) {
          resizeObserver.observe(divElem);
        } else {
          resizeObserver.unobserve(divElem);
        }
      });
    } else {
      console.log('Resize observer not supported!');
    }
  

Orientation/Motion

• Chrome and Firefox do not handle the angles the same way, so on some axes the direction are reversed
• deviceorientation doesn't work in a cross-origin iframe in all browsers

Battery

• information about the system battery charge level
• navigator.getBattery() method returns a battery promise that is resolved in a BatteryManager
• properties
  • charging - whether or not the battery is currently being charged
  • chargingTime - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged
  • dischargingTime - remaining time in seconds until the battery is completely discharged and the system will suspend
  • level - system battery charge level scaled to a value between 0.0 and 1.0
• methods (inherits from EventTarget)
• events
  • chargingchange - charging state is updated
  • chargingtimechange - charging time is updated
  • dischargingtimechange - discharging time is updated
  • levelchange - battery level is updated

    var battery_tests = document.getElementById("battery_tests");

    if ('getBattery' in navigator) {
      navigator.getBattery().then(monitorBattery);
    } else {
      battery_tests.innerHTML='Battery API not supported';
    }

    function monitorBattery(battery) {
      batteryInfo(battery);
      battery.addEventListener('levelchange', batteryInfo.bind(null, battery));
      battery.addEventListener('chargingchange', batteryInfo.bind(null, battery));
      battery.addEventListener('dischargingtimechange', batteryInfo.bind(null, battery));
      battery.addEventListener('chargingtimechange', batteryInfo.bind(null, battery));
    }
    function batteryInfo(battery) {
      battery_tests.innerHTML+="battery.level: "+(battery.level*100)+"%";
      battery_tests.innerHTML+="battery.charging: "+(battery.charging?"Yes":"No");
      battery_tests.innerHTML+="battery.chargingTime: "+battery.chargingTime;
      battery_tests.innerHTML+="battery.dischargingTime: "+battery.dischargingTime;
      battery_tests.innerHTML+="----------------------";
    }
  

Bluetooth

• ability to connect and interact with Bluetooth Low Energy peripherals
• Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth Low Energy (LE) devices
• https://googlechrome.github.io/samples/web-bluetooth/index.html

    var bt_tests = document.getElementById("bt_tests");
    // bt_characteristics, bt_start_notify_characteristics, bt_get_characteristics
    var bt_characteristics = document.getElementById("bt_characteristics");
    // deviceInfo, bt_characteristics, bt_start_notify_characteristics,
    // bt_scan/bt_disconnect/bt_reconnect, bt_get_characteristics
    var bt_services = document.getElementById("bt_services");
    // deviceInfo, bt_scan/bt_disconnect/bt_reconnect
    var bt_device_name = document.getElementById("bt_device_name");
    // deviceInfo, bt_scan/bt_disconnect/bt_reconnect
    var bt_device_name_prefix = document.getElementById("bt_device_name_prefix");
    // deviceInfo
    var bt_all_devices = document.getElementById("bt_all_devices");

    // -----js/bt.js
    // bt_valueToDeviceType
    // bt_valueToUsbVendorName

    // try {
    // const device = await navigator.bluetooth.requestDevice(options);

    if ('bluetooth' in navigator) {
      // navigator.bluetooth.requestDevice(options);
    } else {
      bt_tests.innerHTML='Bluetooth API not supported';
    }

    function bt_device_info() {
      let filters = [];
      let filterService = document.querySelector('#bt_services').value;
      if (filterService.startsWith('0x')) {
        filterService = parseInt(filterService);
      }
      if (filterService) {
        filters.push({services: [filterService]});
      }
      let filterName = document.querySelector('#bt_device_name').value;
      if (filterName) {
        filters.push({name: filterName});
      }
      let filterNamePrefix = document.querySelector('#bt_device_name_prefix').value;
      if (filterNamePrefix) {
        filters.push({namePrefix: filterNamePrefix});
      }
      let options = {};
      if (document.querySelector('#bt_all_devices').checked) {
        options.acceptAllDevices = true;
      } else {
        options.filters = filters;
      }
      bt_tests.innerHTML += "Requesting Bluetooth Device...";
      bt_tests.innerHTML += 'with ' + JSON.stringify(options);
      navigator.bluetooth.requestDevice(options)
      .then(device => {
        bt_tests.innerHTML += '> Name: ' + device.name;
        bt_tests.innerHTML += '> Id: ' + device.id;
        bt_tests.innerHTML += '> Connected: ' + device.gatt.connected;
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }

    function bt_battery_level() {
      bt_tests.innerHTML = "Requesting Bluetooth Device...";
      navigator.bluetooth.requestDevice(
        {filters: [{services: ['battery_service']}]})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        bt_tests.innerHTML += "Getting Battery Service...";
        return server.getPrimaryService('battery_service');
      })
      .then(service => {
        bt_tests.innerHTML += "Getting Battery Level Characteristic...";
        return service.getCharacteristic('battery_level');
      })
      .then(characteristic => {
        bt_tests.innerHTML += "Reading Battery Level...";
        return characteristic.readValue();
      })
      .then(value => {
        let batteryLevel = value.getUint8(0);
        bt_tests.innerHTML += '> Battery Level is ' + batteryLevel + "%";
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }

    function bt_characteristics() {
      let serviceUuid = document.querySelector('#bt_services').value;
      if (serviceUuid.startsWith('0x')) {
        serviceUuid = parseInt(serviceUuid);
      }
      let characteristicUuid = document.querySelector('#bt_characteristics').value;
      if (characteristicUuid.startsWith('0x')) {
        characteristicUuid = parseInt(characteristicUuid);
      }
      bt_tests.innerHTML = "Requesting Bluetooth Device...";
      navigator.bluetooth.requestDevice({filters: [{services: [serviceUuid]}]})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        bt_tests.innerHTML += "Getting Service...";
        return server.getPrimaryService(serviceUuid);
      })
      .then(service => {
        bt_tests.innerHTML += "Getting Characteristic...";
        return service.getCharacteristic(characteristicUuid);
      })
      .then(characteristic => {
        bt_tests.innerHTML += '> Characteristic UUID: ' +
          characteristic.uuid;
        bt_tests.innerHTML += '> Broadcast: ' +
          characteristic.properties.broadcast;
        bt_tests.innerHTML += '> Read: ' +
          characteristic.properties.read;
        bt_tests.innerHTML += '> Write w/o response: ' +
          characteristic.properties.writeWithoutResponse;
        bt_tests.innerHTML += '> Write: ' +
          characteristic.properties.write;
        bt_tests.innerHTML += '> Notify: ' +
          characteristic.properties.notify;
        bt_tests.innerHTML += '> Indicate: ' +
          characteristic.properties.indicate;
        bt_tests.innerHTML += '> Signed Write: ' +
          characteristic.properties.authenticatedSignedWrites;
        bt_tests.innerHTML += '> Queued Write: ' +
          characteristic.properties.reliableWrite;
        bt_tests.innerHTML += '> Writable Auxiliaries: ' +
          characteristic.properties.writableAuxiliaries;
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }

    var bt_myCharacteristic;
    function bt_start_notify_characteristics() {
      let serviceUuid = document.querySelector('#service').value;
      if (serviceUuid.startsWith('0x')) {
        serviceUuid = parseInt(serviceUuid);
      }
      let characteristicUuid = document.querySelector('#characteristic').value;
      if (characteristicUuid.startsWith('0x')) {
        characteristicUuid = parseInt(characteristicUuid);
      }
      bt_tests.innerHTML = "Requesting Bluetooth Device...";
      navigator.bluetooth.requestDevice({filters: [{services: [serviceUuid]}]})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        bt_tests.innerHTML += "Getting Service...";
        return server.getPrimaryService(serviceUuid);
      })
      .then(service => {
        bt_tests.innerHTML += "Getting Characteristic...";
        return service.getCharacteristic(characteristicUuid);
      })
      .then(characteristic => {
        bt_myCharacteristic = characteristic;
        return bt_myCharacteristic.startNotifications().then(_ => {
          bt_tests.innerHTML += "> Notifications started";
          bt_myCharacteristic.addEventListener(
            'characteristicvaluechanged',
            bt_handleNotifications);
        });
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }
    function bt_stop_notify_characteristics() {
      if (bt_myCharacteristic) {
        bt_myCharacteristic.stopNotifications()
        .then(_ => {
          bt_tests.innerHTML += "> Notifications stopped";
          bt_myCharacteristic.removeEventListener(
            'characteristicvaluechanged',
            bt_handleNotifications);
        })
        .catch(error => {
          bt_tests.innerHTML += 'Argh! ' + error;
        });
      }
    }
    function bt_handleNotifications(event) {
      let value = event.target.value;
      let a = [];
      // Convert raw data bytes to hex values just for the sake of showing something.
      // In the "real" world, you'd use data.getUint8, data.getUint16 or even
      // TextDecoder to process raw data bytes.
      for (let i = 0; i < value.byteLength; i++) {
        a.push('0x' + ('00' + value.getUint8(i).toString(16)).slice(-2));
      }
      bt_tests.innerHTML += '> ' + a.join(' ');
    }

    var bluetoothDevice;
    function bt_scan() {
      let options = {filters: []};
      let filterService = document.querySelector('#bt_services').value;
      if (filterService.startsWith('0x')) {
        filterService = parseInt(filterService);
      }
      if (filterService) {
        options.filters.push({services: [filterService]});
      }
      let filterName = document.querySelector('#bt_device_name').value;
      if (filterName) {
        options.filters.push({name: filterName});
      }
      let filterNamePrefix = document.querySelector('#bt_device_name_prefix').value;
      if (filterNamePrefix) {
        options.filters.push({namePrefix: filterNamePrefix});
      }
      bluetoothDevice = null;
      bt_tests.innerHTML = "Requesting Bluetooth Device...";
      navigator.bluetooth.requestDevice(options)
      .then(device => {
        bluetoothDevice = device;
        bluetoothDevice.addEventListener(
          'gattserverdisconnected',
          bt_onDisconnected
        );
        return bt_connect();
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }
    function bt_onDisconnected(event) {
      // Object event.target is Bluetooth Device getting disconnected.
      bt_tests.innerHTML += "> Bluetooth Device disconnected";
    }
    function bt_connect() {
      bt_tests.innerHTML += "Connecting to Bluetooth Device...";
      return bluetoothDevice.gatt.connect()
      .then(server => {
        bt_tests.innerHTML += "> Bluetooth Device connected";
      });
    }
    function bt_disconnect() {
      if (!bluetoothDevice) { return; }
      bt_tests.innerHTML += "Disconnecting from Bluetooth Device...";
      if (bluetoothDevice.gatt.connected) {
        bluetoothDevice.gatt.disconnect();
      } else {
        bt_tests.innerHTML += "> Bluetooth Device is already disconnected";
      }
    }
    function bt_reconnect() {
      if (!bluetoothDevice) { return; }
      if (bluetoothDevice.gatt.connected) {
        bt_tests.innerHTML += "> Bluetooth Device is already connected";
        return;
      }
      bt_connect().catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }

    function bt_get_characteristics() {
      let serviceUuid = document.querySelector('#bt_services').value;
      if (serviceUuid.startsWith('0x')) {
        serviceUuid = parseInt(serviceUuid);
      }
      let characteristicUuid = document.querySelector('#bt_characteristics').value;
      if (characteristicUuid.startsWith('0x')) {
        characteristicUuid = parseInt(characteristicUuid);
      }
      bt_tests.innerHTML = "Requesting Bluetooth Device...";
      navigator.bluetooth.requestDevice({filters: [{services: [serviceUuid]}]})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        bt_tests.innerHTML += "Getting Service...";
        return server.getPrimaryService(serviceUuid);
      })
      .then(service => {
        bt_tests.innerHTML += "Getting Characteristics...";
        if (characteristicUuid) {
          // Get all characteristics that match this UUID.
          return service.getCharacteristics(characteristicUuid);
        }
        // Get all characteristics.
        return service.getCharacteristics();
      })
      .then(characteristics => {
        bt_tests.innerHTML += '> Characteristics: ' +
          characteristics.map(c => c.uuid).join('\n' + ' '.repeat(19));
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }

    function bt_device_info_characteristics() {
      bt_tests.innerHTML = "Requesting any Bluetooth Device...";
      navigator.bluetooth.requestDevice({
      // filters: [...] <- Prefer filters to save energy & show relevant devices.
          acceptAllDevices: true,
          optionalServices: ['device_information']})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        bt_tests.innerHTML += "Getting Device Information Service...";
        return server.getPrimaryService('device_information');
      })
      .then(service => {
        bt_tests.innerHTML += "Getting Device Information Characteristics...";
        return service.getCharacteristics();
      })
      .then(characteristics => {
        let queue = Promise.resolve();
        let decoder = new TextDecoder('utf-8');
        characteristics.forEach(characteristic => {
          switch (characteristic.uuid) {
            case BluetoothUUID.getCharacteristic('manufacturer_name_string'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += '> Manufacturer Name String: ' + decoder.decode(value);
              });
              break;
            case BluetoothUUID.getCharacteristic('model_number_string'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += '> Model Number String: ' + decoder.decode(value);
              });
              break;
            case BluetoothUUID.getCharacteristic('hardware_revision_string'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += '> Hardware Revision String: ' + decoder.decode(value);
              });
              break;
            case BluetoothUUID.getCharacteristic('firmware_revision_string'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += '> Firmware Revision String: ' + decoder.decode(value);
              });
              break;
            case BluetoothUUID.getCharacteristic('software_revision_string'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += '> Software Revision String: ' + decoder.decode(value);
              });
              break;
            case BluetoothUUID.getCharacteristic('system_id'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += "> System ID: ";
                bt_tests.innerHTML += '> Manufacturer Identifier: ' +
                    padHex(value.getUint8(4)) + padHex(value.getUint8(3)) +
                    padHex(value.getUint8(2)) + padHex(value.getUint8(1)) +
                    padHex(value.getUint8(0));
                bt_tests.innerHTML += ' > Organizationally Unique Identifier: ' +
                    padHex(value.getUint8(7)) + padHex(value.getUint8(6)) +
                    padHex(value.getUint8(5));
              });
              break;
            case BluetoothUUID.getCharacteristic('ieee_11073-20601_regulatory_certification_data_list'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += '> IEEE 11073-20601 Regulatory Certification Data List: ' +
                    decoder.decode(value);
              });
              break;
            case BluetoothUUID.getCharacteristic('pnp_id'):
              queue = queue.then(_ => characteristic.readValue()).then(value => {
                bt_tests.innerHTML += "> PnP ID:";
                bt_tests.innerHTML += '  > Vendor ID Source: ' +
                    (value.getUint8(0) === 1 ? 'Bluetooth' : 'USB');
                if (value.getUint8(0) === 1) {
                  bt_tests.innerHTML += '  > Vendor ID: ' +
                      (value.getUint8(1) | value.getUint8(2) << 8);
                } else {
                  bt_tests.innerHTML += '  > Vendor ID: ' +
                      getUsbVendorName(value.getUint8(1) | value.getUint8(2) << 8);
                }
                bt_tests.innerHTML += '  > Product ID: ' +
                    (value.getUint8(3) | value.getUint8(4) << 8);
                bt_tests.innerHTML += '  > Product Version: ' +
                    (value.getUint8(5) | value.getUint8(6) << 8);
              });
              break;
            default: bt_tests.innerHTML += '> Unknown Characteristic: ' + characteristic.uuid;
          }
        });
        return queue;
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }
    /* Utils */
    function padHex(value) {
      return ('00' + value.toString(16).toUpperCase()).slice(-2);
    }
    function getUsbVendorName(value) {
      return value +
          (value in bt_valueToUsbVendorName ? ' (' + bt_valueToUsbVendorName[value] + ')' : '');
    }

    function bt_gap_characteristics() {
      bt_tests.innerHTML = "Requesting any Bluetooth Device...";
      navigator.bluetooth.requestDevice({
      // filters: [...] <- Prefer filters to save energy & show relevant devices.
          acceptAllDevices: true,
          optionalServices: ['generic_access']})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        bt_tests.innerHTML += "Getting GAP Service...";
        return server.getPrimaryService('generic_access');
      })
      .then(service => {
        bt_tests.innerHTML += "Getting GAP Characteristics...";
        return service.getCharacteristics();
      })
      .then(characteristics => {
        let queue = Promise.resolve();
        characteristics.forEach(characteristic => {
          switch (characteristic.uuid) {
            case BluetoothUUID.getCharacteristic('gap.appearance'):
              queue = queue.then(_ => readAppearanceValue(characteristic));
              break;
            case BluetoothUUID.getCharacteristic('gap.device_name'):
              queue = queue.then(_ => readDeviceNameValue(characteristic));
              break;
            case BluetoothUUID.getCharacteristic('gap.peripheral_preferred_connection_parameters'):
              queue = queue.then(_ => readPPCPValue(characteristic));
              break;
            case BluetoothUUID.getCharacteristic('gap.central_address_resolution_support'):
              queue = queue.then(_ => readCentralAddressResolutionSupportValue(characteristic));
              break;
            case BluetoothUUID.getCharacteristic('gap.peripheral_privacy_flag'):
              queue = queue.then(_ => readPeripheralPrivacyFlagValue(characteristic));
              break;
            default: bt_tests.innerHTML += '> Unknown Characteristic: ' + characteristic.uuid;
          }
        });
        return queue;
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }
    function readAppearanceValue(characteristic) {
      return characteristic.readValue().then(value => {
        bt_tests.innerHTML += '> Appearance: ' +
            getDeviceType(value.getUint16(0, true /* Little Endian */));
      });
    }
    function readDeviceNameValue(characteristic) {
      return characteristic.readValue().then(value => {
        bt_tests.innerHTML += '> Device Name: ' + new TextDecoder().decode(value);
      });
    }
    function readPPCPValue(characteristic) {
      return characteristic.readValue().then(value => {
        bt_tests.innerHTML += "Peripheral Preferred Connection Parameters:";
        bt_tests.innerHTML += '  > Minimum Connection Interval: ' +
            (value.getUint8(0) | value.getUint8(1) << 8) * 1.25 + 'ms';
        bt_tests.innerHTML += '  > Maximum Connection Interval: ' +
            (value.getUint8(2) | value.getUint8(3) << 8) * 1.25 + 'ms';
        bt_tests.innerHTML += '  > Slave Latency: ' +
            (value.getUint8(4) | value.getUint8(5) << 8) + 'ms';
        bt_tests.innerHTML += '  > Connection Supervision Timeout Multiplier: ' +
            (value.getUint8(6) | value.getUint8(7) << 8);
      });
    }
    function readCentralAddressResolutionSupportValue(characteristic) {
      return characteristic.readValue().then(value => {
        let supported = value.getUint8(0);
        if (supported === 0) {
          bt_tests.innerHTML += "> Central Address Resolution: Not Supported";
        } else if (supported === 1) {
          bt_tests.innerHTML += "> Central Address Resolution: Supported";
        } else {
          bt_tests.innerHTML += "> Central Address Resolution: N/A";
        }
      });
    }
    function readPeripheralPrivacyFlagValue(characteristic) {
      return characteristic.readValue().then(value => {
        let flag = value.getUint8(0);
        if (flag === 1) {
          bt_tests.innerHTML += "> Peripheral Privacy Flag: Enabled";
        } else {
          bt_tests.innerHTML += "> Peripheral Privacy Flag: Disabled";
        }
      });
    }
    /* Utils */
    function getDeviceType(value) {
      return value +
          (value in bt_valueToDeviceType ? ' (' + bt_valueToDeviceType[value] + ')' : '');
    }

    function bt_discover_services_and_characteristics() {
      // Validate services UUID entered by user first.
      let optionalServices = document.querySelector('#bt_services').value
        .split(/, ?/).map(s => s.startsWith('0x') ? parseInt(s) : s)
        .filter(s => s && BluetoothUUID.getService);
      bt_tests.innerHTML = "Requesting any Bluetooth Device...";
      navigator.bluetooth.requestDevice({
      // filters: [...] <- Prefer filters to save energy & show relevant devices.
          acceptAllDevices: true,
          optionalServices: optionalServices})
      .then(device => {
        bt_tests.innerHTML += "Connecting to GATT Server...";
        return device.gatt.connect();
      })
      .then(server => {
        // Note that we could also get all services that match a specific UUID by
        // passing it to getPrimaryServices().
        bt_tests.innerHTML += "Getting Services...";
        return server.getPrimaryServices();
      })
      .then(services => {
        bt_tests.innerHTML += "Getting Characteristics...";
        let queue = Promise.resolve();
        services.forEach(service => {
          queue = queue.then(_ => service.getCharacteristics().then(characteristics => {
            bt_tests.innerHTML += '> Service: ' + service.uuid;
            characteristics.forEach(characteristic => {
              bt_tests.innerHTML += '>> Characteristic: ' + characteristic.uuid + ' ' +
                  getSupportedProperties(characteristic);
            });
          }));
        });
        return queue;
      })
      .catch(error => {
        bt_tests.innerHTML += 'Argh! ' + error;
      });
    }
    /* Utils */
    function getSupportedProperties(characteristic) {
      let supportedProperties = [];
      for (const p in characteristic.properties) {
        if (characteristic.properties[p] === true) {
          supportedProperties.push(p.toUpperCase());
        }
      }
      return '[' + supportedProperties.join(', ') + ']';
    }
  

INTERFACES

• Bluetooth - Promise to a BluetoothDevice object with the specified options
• BluetoothAdvertisingData - advertising data about a particular Bluetooth device
• BluetoothCharacteristicProperties - propertieds of a particular BluetoothRemoteGATTCharacteristic
• BluetoothDevice - Bluetooth device inside a particular script execution environment
• BluetoothRemoteGATTCharacteristic - GATT Characteristic, which is a basic data element that provides further information about a peripheral service
• BluetoothRemoteGATTDescriptor - GATT Descriptor, which provides further information about a characteristics value
• BluetoothRemoteGATTServer - GATT Server on a remote device
• BluetoothRemoteGATTService - service provided by a GATT server, including a device, a list of referenced services, and a list of the characteristics of this service

GATT

• Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth Low Energy (LE) devices
• services are collections of characteristics and relationships to other services that encapsulate the behavior of part of a device, this also includes hierarchy of services, characteristics and attributes used in the attribute server
• GATT is built on top of the Attribute Protocol (ATT) (see Bluetooth Core System Architecture for block diagram and explanations), which uses GATT data to define the way that two Bluetooth Low Energy devices send and receive standard messages, GATT is not used in Bluetooth BR/EDR implementations, which use only adopted profiles
• top level of the hierarchy is a profile, which is composed of one or more services necessary to fulfill a use case, service is composed of characteristics or references to other services, characteristic consists of a type (represented by a UUID), a value, a set of properties indicating the operations the characteristic supports and a set of permissions relating to security, it may also include one or more descriptors—metadata or configuration flags relating to the owning characteristic
• GATT groups these services to encapsulate the behavior of part of a device, and describes a use case, roles and general behaviors based on the GATT functionality, this framework defines procedures and formats of services and their characteristics, including discovering, reading, writing, notifying and indicating characteristics, as well as configuring the broadcast of characteristics
• Client and Server Roles - GATT defines client and server roles, GATT procedures can be considered to be split into three basic types: Discovery procedures, Client-initiated procedures and Server-initiated procedures, GATT server stores the data transported over the ATT and accepts ATT requests, commands and confirmations from the GATT client, GATT server sends responses to requests and sends indications and notifications asynchronously to the GATT client when specified events occur on the GATT server, GATT also specifies the format of data contained on the GATT server

USB

• provides attributes and methods for finding and connecting USB devices from a web page
• methods
  • getDevices() - resolves with an array of USBDevice objects for paired attached devices
  • requestDevice( {filters:[{vendorId: 0x****,productId: 0x****},...]} ) - resolves with an instance of USBDevice if the specified device is found, calling this function triggers the user agent pairing flow
    • vendorId
    • productId
    • classCode
    • subclassCode
    • protocolCode
    • serialNumber
• events
  • onconnect - previously paired device is connected
  • ondisconnect - paired device is disconnected

    if ('usb' in navigator) {
      // navigator.usb.getDevices();
    } else {
      usb_tests.innerHTML='USB API not supported';
    }

    var usb_tests = document.getElementById("usb_tests");
    function usb_get_devices() {
      usb_tests.innerHTML = "";
      navigator.usb.getDevices().then(devices => {
        usb_tests.innerHTML += "Total devices: " + devices.length;
        devices.forEach(device => {
          usb_tests.innerHTML += "Product name: " + device.productName + ", serial number " + device.serialNumber;
          device.addEventListener("connect", (e) => {
            usb_tests.innerHTML += "previously paired device is connected";
          });
          device.addEventListener("disconnect", (e) => {
            usb_tests.innerHTML += "paired device is disconnected";
          });
        });
      });
    }
    function usb_request_device() {
      var rd_v = document.getElementById("rd_v").value; // vendorId
      var rd_p = document.getElementById("rd_p").value; // productId
      var rd_cc = document.getElementById("rd_cc").value; // classCode
      var rd_sc = document.getElementById("rd_sc").value; // subclassCode
      var rd_pc = document.getElementById("rd_pc").value; // protocolCode
      var rd_sn = document.getElementById("rd_sn").value; // serialNumber
      let filters = {};
      rd_v?(filters.vendorId=rd_v):'';
      rd_p?(filters.productId=rd_p):'';
      rd_cc?(filters.classCode=rd_cc):'';
      rd_sc?(filters.subclassCode=rd_sc):'';
      rd_pc?(filters.protocolCode=rd_pc):'';
      rd_sn?(filters.serialNumber=rd_sn):'';
      usb_tests.innerHTML = "Request with: " + JSON.stringify(filters);
      navigator.usb.requestDevice({filters: [
        filters
        // ,{vendorId: 0x1209, productId: 0xa850}
      ]})
      .then(usbDevice => {
        usb_tests.innerHTML += "Product name: " + usbDevice.productName;
      })
      .catch(e => {
        usb_tests.innerHTML += "There is no device. " + e;
      });
    }
  

WEB USB + Arduiono

    var device;
    navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
    .then(selectedDevice => {
        device = selectedDevice;
        return device.open(); // Begin a session.
      })
    .then(() => device.selectConfiguration(1)) // Select configuration #1 for the device.
    .then(() => device.claimInterface(2)) // Request exclusive control over interface #2.
    .then(() => device.controlTransferOut({
        requestType: 'class',
        recipient: 'interface',
        request: 0x22,
        value: 0x01,
        index: 0x02})) // Ready to receive data
    .then(() => device.transferIn(5, 64)) // Waiting for 64 bytes of data from endpoint #5.
    .then(result => {
      let decoder = new TextDecoder();
      console.log('Received: ' + decoder.decode(result.data));
    })
    .catch(error => { console.log(error); });

    // Third-party WebUSB Arduino library
    #include <WebUSB.h>
    WebUSB WebUSBSerial(1 /* https:// */, "webusb.github.io/arduino/demos");
    #define Serial WebUSBSerial
    void setup() {
      Serial.begin(9600);
      while (!Serial) {
        ; // Wait for serial port to connect.
      }
      Serial.write("WebUSB FTW!");
      Serial.flush();
    }
    void loop() {
      // Nothing here for now.
    }
  

Media

• MediaStream API, is an API related to WebRTC which provides support for streaming audio and video data, provides interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process
• based on the manipulation of a MediaStream object representing a flux of audio- or video-related data
• MediaStream
  • consists of zero or more MediaStreamTrack objects, representing various audio or video tracks
  • may have one or more channels - the smallest unit of a media stream, such as an audio signal associated with a given speaker, like left or right in a stereo audio track
  • have a single input and a single output
  • local - generated by getUserMedia(), has as its source input one of the users cameras or microphones
  • non-local - originating over the network, and obtained via the WebRTC RTCPeerConnection API, or a stream created using the Web Audio API MediaStreamAudioSourceNode
  • output of the MediaStream object is linked to a consumer like <audio> or <video>, the WebRTC RTCPeerConnection API or a Web Audio API MediaStreamAudioDestinationNode
• Capabilities, constraints, and settings concepts
  • single constraint is an object whose name matches the constrainable property whose desired value or range of values is being specified, contains zero or more individual constraints, as well as an optional sub-object named advanced, which contains another set of zero or more constraints which the user agent must satisfy if at all possible, most constraints arent requirements; instead, theyre requests
  • ideal - requested or closest possible match
  • exact - match or fail
  • 1 - if needed, call MediaDevices.getSupportedConstraints() to get the list of supported constraints
  • 2 - check the capabilities of the API and its implementation by examining the object returned by the tracks getCapabilities() method - lists each supported constraint and the values or range of values which are supported
  • 3 - tracks applyConstraints() method is called to configure the API as desired by specifying the values or ranges of values it wishes to use for any of the constrainable properties about which it has a preference
  • 4 - tracks getConstraints() method returns the set of constraints passed into the most recent call to applyConstraints(), this, not represent the actual current state of the track, due to properties whose requested values had to be adjusted and because platform default values arent represented
  • 5 - for a complete representation of the tracks current configuration, use getSettings()

    var media_tests = document.getElementById("media_tests");
    var stream_video = document.getElementById("stream_video");
    var tracks, a_track, v_track;
    var front = false;

    navigator.mediaDevices.ondevicechange = function(event) {
      devicesList();
    }
    function devicesList() {
      media_tests.innerHTML = "";
      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        media_tests.innerHTML = "enumerateDevices() not supported";
        return;
      }
      navigator.mediaDevices.enumerateDevices()
      .then(function(devices) {
        devices.forEach(function(device) {
          let [kind,type,direction] = device.kind.match(/(\w+)(input|output)/i);
          media_tests.innerHTML +=
            "--------------------------------" +
            "device.type: " + device.type +
            "direction: " + direction +
            "device.kind: " + device.kind +
            "device.label: " + device.label +
            "device.deviceId: " + device.deviceId +
            "device.groupId: " + device.groupId;
        });
      }).catch(function(err) {
        media_tests.innerHTML = err.name + ": " + error.message;
      });
    }

    var constraints = window.constraints = {
      video: {
        width: { min: 640, ideal: 1920 },
        height: { min: 400, ideal: 1080 },
        aspectRatio: { ideal: 1.7777777778 },
        facingMode: front?"user":"environment"
      },
      audio: true
      // video: {
      //   width: 480,
      //   height: 320,
      //   frameRate: 30,
      //   facingMode: "user" // "environment"
      // }
      // audio: {
      //   sampleRate: 44100,
      //   sampleSize: 16,
      //   volume: 0.25,
      //   channelCount: 2
      // }
      // video: {
      //   width: { min: 1024, ideal: 1280, max: 1920 },
      //   height: { min: 776, ideal: 720, max: 1080 }
      // }
      // video: { facingMode: "user" }
      // video: { facingMode: { exact: "environment" } }
    };

    function startVideoStream() {
      navigator.mediaDevices.getUserMedia(constraints).then(stream => {
        media_tests.innerHTML = "stream.id: " + stream.id;
        stream_video.srcObject = stream;
        // stream.onremovetrack = function(event) {
        //   label.innerHTML = "Removed: " + event.track.kind + ": " + event.track.label;
        // };
        // stream.onaddtrack = function(event) {
        //   label.innerHTML = event.track.kind + ": " + event.track.label;
        // };
        tracks = stream.getTracks();
        let audioTracks = stream.getAudioTracks();
        let videoTracks = stream.getVideoTracks();
        if (audioTracks.length) { a_track = audioTracks[0]; }
        if (videoTracks.length) { v_track = videoTracks[0]; }
        // stream_video.onloadedmetadata = function(e) {
        //   stream_video.play();
        // };
      }).then(function(){
        tracks.forEach(function(track) {
          trackCapSett(track);
          // MediaStreamTrack.clone();
        });
      }).catch(err => {
        media_tests.innerHTML = err
      });
    }
    function stopVideoStream() {
      if (v_track) { v_track.stop(); }
      if (a_track) { audioTrack.stop(); }
      v_track = a_track = null;
      videoElement.srcObject = null;
      // let stream = stream_video.srcObject;
      // let tracks = stream.getTracks();
      // tracks.forEach(function(track) {
      //   track.stop();
      // });
      // stream_video.srcObject = null;
    }

    // change constraints on the fly
    function switchCameras() {
      front = !front;
      constraints.video.facingMode = front?"user":"environment";
      v_track.applyConstraints(constraints);

      stopVideoStream();
      startVideoStream();

      // let stream = stream_video.srcObject;
      // let tracks = stream.getTracks();
      // tracks.forEach(function(track) {
      //   let stream_constraints = track.getConstraints();
      //   stream_constraints.facingMode = front?"user":"environment";
      //   track.applyConstraints(stream_constraints);
      // });

      // const video_constraints = {
      //   width: { min: 640, ideal: 1920, max: 1920 },
      //   height: { min: 400, ideal: 1080 },
      //   aspectRatio: 1.777777778,
      //   frameRate: { max: 30 },
      //   facingMode: { exact: "user" }
      //   advanced: [
      //     {width: 1920, height: 1280},
      //     {aspectRatio: 1.333}
      //   ]
      // };
      // const v_track = stream.getVideoTracks()[0];
      // v_track.applyConstraints(video_constraints).then(() => {
      //   imageCapture = new ImageCapture(v_track);
      //   return imageCapture.getPhotoCapabilities();
      // }).catch(e => {
      //   // The constraints could not be satisfied by the available devices.
      // });

      // // Stop stream after 5 seconds
      // setTimeout(() => {
      //   // const tracks = mediaStream.getVideoTracks();
      //   const tracks = mediaStream.getAudioTracks();
      //   tracks[0].stop()
      // }, 5000)

      // stream.getTrackById("primary-audio-track").applyConstraints({ volume: 0.5 });
      // stream.getTrackById("commentary-track").enabled = true;
    }

    function captureImage() {
      media_tests.innerHTML="";

      if(!v_track){media_tests.innerHTML="No track";return;}
      imageCapture = new ImageCapture(v_track);
      imageCapture.takePhoto().then(function(blob) {
        var img = document.createElement("img");
        img.setAttribute("height","100px");
        img.src = URL.createObjectURL(blob);
        media_tests.appendChild(img);
      }).catch(function(error) {
        media_tests.innerHTML = 'takePhoto() error: '+error;
      });

      imageCapture.getPhotoSettings()
      .then(photoSettings => {
        media_tests.innerHTML +=
          "--------------------------------" +
          "photoSettings.fillLightMode: " + photoSettings.fillLightMode +
          "photoSettings.imageHeight: " + photoSettings.imageHeight +
          "photoSettings.imageWidth: " + photoSettings.imageWidth +
          "photoSettings.redEyeReduction: " + photoSettings.redEyeReduction;
          return imageCapture.getPhotoCapabilities();
      }).then(photoCapabilities => {
        // redEyeReduction:never|always|controllable,
        // imageWidth:range,
        // imageHeight:range,
        // fillLightMode:arr_of_auto|off|flash
        media_tests.innerHTML +=
          "--------------------------------" +
          "photoCapabilities.redEyeReduction: " + photoCapabilities.redEyeReduction +
          "photoCapabilities.imageWidth.min: " + photoCapabilities.imageWidth.min +
          "photoCapabilities.imageWidth.max: " + photoCapabilities.imageWidth.max +
          "photoCapabilities.imageWidth.step: " + photoCapabilities.imageWidth.step +
          "photoCapabilities.imageHeight.min: " + photoCapabilities.imageHeight.min +
          "photoCapabilities.imageHeight.max: " + photoCapabilities.imageWidth.max +
          "photoCapabilities.imageHeight.step: " + photoCapabilities.imageHeight.step +
          "photoCapabilities.fillLightMode: " + photoCapabilities.fillLightMode;
          // // Map zoom to a slider element.
          // input.min = capabilities.zoom.min;
          // input.max = capabilities.zoom.max;
          // input.step = capabilities.zoom.step;
          // input.value = settings.zoom;
          // input.oninput = function(event) {
          //   track.applyConstraints({advanced: [ {zoom: event.target.value} ]});
          // }
      }).catch(error => {
        media_tests.innerHTML += (error.name || error)
      });

      // imageCapture.grabFrame().then(function(imageBitmap) {
      //   console.log('Grabbed frame:', imageBitmap);
      //   canvas.width = imageBitmap.width;
      //   canvas.height = imageBitmap.height;
      //   canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
      //   canvas.classList.remove('hidden');
      // }).catch(function(error) {
      //   console.log('grabFrame() error: ', error);
      // });
      // imageCapture.setOptions({
      //   zoom: zoomInput.value
      // });
    }

    function AtrackCapSett() {
      media_tests.innerHTML="";
      trackCapSett(a_track);
    }
    function VtrackCapSett() {
      media_tests.innerHTML="";
      trackCapSett(v_track);
    }

    function trackCapSett(track) {
      if(!track){media_tests.innerHTML="No track to check";return;}

      media_tests.innerHTML+="---getSettings---";
      let getSettings = track.getSettings();
      for (let sett in getSettings) {
        if (getSettings.hasOwnProperty(sett)) {
          media_tests.innerHTML+=sett+": "+getSettings[sett];
        }
      }
      media_tests.innerHTML+="---getCapabilities---";
      let getCapabilities = track.getCapabilities();
      for (let cap in getCapabilities) {
        if (getCapabilities.hasOwnProperty(cap)) {
          media_tests.innerHTML+=cap+": "+getSettings[cap];
        }
      }
      // track.getSettings().facingMode
      // JSON.stringify(v_track.getSettings(), null, 2);
      // JSON.stringify(a_track.getSettings(), null, 2);
    }

    // pauseButton.onclick = function(evt) {
    //   var newState = !myAudioTrack.enabled;
    //   pauseButton.innerHTML = newState ? "▶️" : "⏸️";
    //   myAudioTrack.enabled = newState;
    // }

    // // Find the canvas element to capture
    // var canvasElt = document.getElementsByTagName("canvas")[0];
    // // Get the stream
    // var stream = canvasElt.captureStream(25); // 25 FPS
    // // Do things to the stream ...
    // // Obtain the canvas associated with the stream
    // var canvas = stream.canvas;

    function getSupportedConstraints() {
      media_tests.innerHTML="";
      let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
      for (let constraint in supportedConstraints) {
        if (supportedConstraints.hasOwnProperty(constraint)) {
          media_tests.innerHTML+=constraint;
        }
      }
    }
    // let supported = navigator.mediaDevices.getSupportedConstraints();
    // document.getElementById("frameRateSlider").disabled = !supported["frameRate"];

    // CAPTURE
    const capture_video = document.getElementById("capture_video");
    var capture_options = {
      video: {cursor:"never"},
      audio: false
    };
    // Set event listeners for the start and stop buttons
    document.getElementById("capture_start").addEventListener("click", function(evt) {
      startCapture();
    }, false);
    document.getElementById("capture_stop").addEventListener("click", function(evt) {
      stopCapture();
    }, false);
    async function startCapture() {
      media_tests.innerHTML="";
      try {
        capture_video.srcObject = await navigator.mediaDevices.getDisplayMedia(capture_options);
        dumpOptionsInfo();
      } catch(err) {
        media_tests.innerHTML="Error: "+err;
      }
    }
    function stopCapture(evt) {
      let tracks = capture_video.srcObject.getTracks();
      tracks.forEach(track => track.stop());
      capture_video.srcObject = null;
    }
    function dumpOptionsInfo() {
      const videoTrack = capture_video.srcObject.getVideoTracks()[0];
      media_tests.innerHTML+="Track settings:";
      media_tests.innerHTML+=JSON.stringify(videoTrack.getSettings(), null, 2);
      media_tests.innerHTML+="Track constraints:";
      media_tests.innerHTML+=JSON.stringify(videoTrack.getConstraints(), null, 2);
    }
  

• MediaDevices - access to connected media input devices like cameras and microphones, as well as screen sharing, lets you obtain access to any hardware source of media data
  • properties(inherits from EventTarget)
  • methods(inherits from EventTarget)
  • enumerateDevices() - array of information about the media input and output devices available on the system
  • getSupportedConstraints() - returns an object conforming to MediaTrackSupportedConstraints indicating which constrainable properties are supported on the MediaStreamTrack interface
  • getDisplayMedia(constraints) - prompts the user to select a display or portion of a display (such as a window) to capture as a MediaStream for sharing or recording purposes, returns a promise that resolves to a MediaStream
  • getUserMedia(constraints) - with the users permission through a prompt, turns on a camera and/or a microphone on the system and provides a MediaStream containing a video track and/or an audio track with the input
  • events
  • devicechange - delivered to the MediaDevices object when a media input or output device is attached to or removed from the users computer, happens whenever the set of media devices available to the user agent and, by extension, to the web site or app has changed, use enumerateDevices() to get the updated list of available devices
• MediaDevicesInfo - contains information that describes a single media input or output device, list of devices obtained by calling navigator.mediaDevices.enumerateDevices() is an array of MediaDeviceInfo objects, one per media device
  • properties
  • deviceId - identifier for the represented device that is persisted across sessions, un-guessable by other applications and unique to the origin of the calling application, reseted when the user clears cookies (for Private Browsing, a different identifier is used that is not persisted across sessions)
  • groupId - group identifier, two devices have the same group identifier if they belong to the same physical device - for example a monitor with both a built-in camera and a microphone or microphone and speaker on the same headset, this makes it possible to use the group ID to ensure that the audio and input devices are on the same headset by retrieving the group ID of the input device and specifying it when asking for an output device, perhaps
  • kind - enumerated value that is either "videoinput", "audioinput" or "audiooutput"
  • label - label describing this device (for example "External USB Webcam"), always blank unless an active media stream exists or the user has granted persistent permission for media device access, set of device labels could otherwise be used as part of a fingerprinting mechanism to identify a use
• MediaStream - stream of media content, consists of several tracks such as video or audio tracks, specified as an instance of MediaStreamTrack, you can obtain a MediaStream object either by using the constructor or by calling MediaDevices.getUserMedia(), some user agents subclass this interface to provide more precise information or functionality, like in CanvasCaptureMediaStream
  • new MediaStream(MediaStream|MediaStreamTrack_arr)
  • properties(inherits from EventTarget)
  • active - returns true if the MediaStream is active, or false otherwise
  • readyState - "ended" for the track or tracks you want to ensure have finished playing
  • id - 36 characters denoting a universally unique identifier (UUID) for the object
  • properties(inherits from EventTarget)
  • addTrack(track) - stores a copy of the MediaStreamTrack given as argument, if the track has already been added to the MediaStream object, nothing happens
  • getTracks() - list of all MediaStreamTrack objects stored in the MediaStream object, regardless of the value of the kind attribute
  • getAudioTracks() - list of the MediaStreamTrack objects stored in the MediaStream object that have their kind attribute set to "audio"
  • getVideoTracks() - list of the MediaStreamTrack objects stored in the MediaStream object that have their kind attribute set to "video"
  • getTrackById() - returns the track whose ID corresponds to the one given in parameters, trackid, if no parameter is given, or if no track with that ID does exist, it returns null, if several tracks have the same ID, it returns the first one
  • removeTrack() - removes the MediaStreamTrack given as argument, if the track is not part of the MediaStream object, nothing happens
  • clone() - returns a clone of the MediaStream object, will have a unique value for id
  • events
  • addtrack - when a new MediaStreamTrack object is added
  • removetrack - MediaStreamTrack object is removed, when the browser removes a track from the stream, such as when a RTCPeerConnection is renegotiated or a stream being captured using HTMLMediaElement.captureStream() gets a new set of tracks because the media element being captured loaded a new source, does not get fired when JavaScript code explicitly removes tracks from the stream by calling removeTrack()
• MediaStreamTrack represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist as well
  • properties
  • contentHint - string that may be used by the web application to provide a hint as to what type of content the track contains to guide how it should be treated by API consumers
  • enabled - true, if the track is enabled, that is allowed to render the media source stream OR false if it is disabled, that is not rendering the media source stream but silence and blackness, if the track has been disconnected, this value can be changed but has no more effect
  • id - unique identifier (GUID) for the track, generated by the browser
  • isolated - true, if the track is isolated, cannot be accessed by the document that owns the MediaStreamTrack, happens when the peerIdentity property is set, or if the track comes from a cross-origin source
  • kind - set to "audio" if the track is an audio track and to "video", if it is a video track, doesnt change if the track is deassociated from its source
  • label - user agent-assigned label that identifies the track source, as in "internal microphone", may be left empty and is empty as long as no source has been connected, when the track is deassociated from its source, the label is not changed
  • muted - whether the track is unable to provide media data due to a technical issue
  • readonly - true, if the track is readonly (such a video file source or a camera that settings cant be modified), false otherwise
  • readyState - enumerated value giving the status of the track: "live" - input is connected and does its best-effort in providing real-time data, that can be switched on or off using the enabled attribute, "ended" - input is not giving any more data and will never provide new data
  • + constrainable properties which can be set using applyConstraints() and accessed using getConstraints() and getSettings()
  • methods
  • applyConstraints(constraints) - specify the ideal and/or ranges of acceptable values for any number of the available constrainable properties of the MediaStreamTrack, any existing constraints are replaced with the new values specified, and any constrainable properties not included are restored to their default constraints, if this parameter is omitted, all currently set custom constraints are cleared
  • clone() - returns a duplicate of the MediaStreamTrack
  • getCapabilities() - list of constrainable properties available for the MediaStreamTrack
  • getConstraints() - returns a MediaTrackConstraints object containing the currently set constraints for the track; the returned value matches the constraints last set using applyConstraints()
  • getSettings() - returns a MediaTrackSettings object containing the current values of each of the MediaStreamTrack constrainable properties
  • stop() - stops playing the source associated to the track, both the source and the track are deassociated, track state is set to ended
  • events
  • started - fired on the object when a new MediaStreamTrack object is added
  • ended - track will no longer provide data to the stream for any reason, including the end of the media input being reached, the user revoking needed permissions, the source device being removed, or the remote peer ending a connection
  • isolationchange - value of the isolated property changes due to the document gaining or losing permission to access the track
  • mute - when the streaming is terminating or track is temporarily not able to send data
  • unmute - track muted flag is false
  • overconstrained - when the track is again able to send data
• MediaStreamConstraints dictionary is used when calling getUserMedia() to specify what kinds of tracks should be included in the returned MediaStream, and, optionally, to establish constraints for those tracks settings
  • constraints
  • audio - Boolean (which indicates whether or not an audio track is requested) or a MediaTrackConstraints object providing the constraints which must be met by the audio track included in the returned MediaStream, if constraints are specified, an audio track is inherently requested
  • video - Boolean (which indicates whether or not a video track is requested) or a MediaTrackConstraints object providing the constraints which must be met by the video track included in the returned MediaStream, if constraints are specified, a video track is inherently requested
  • peerIdentity - peer who has sole access to the stream, if specified, only the indicated peer can receive and use the stream, streams isolated in this way can only be displayed in a media element (audio or video) where the content is protected just as if CORS cross-origin rules were in effect, when a peer identity is set, MediaStreamTracks from that peer have their isolated flag set to true
• MediaTrackSettings dictionary is used to return the current values configured for each of a MediaStreamTrack settings, values will adhere as closely as possible to any constraints previously described using a MediaTrackConstraints object and set using applyConstraints(), and will adhere to the default constraints for any properties whose constraints havent been changed, or whose customized constraints couldnt be matched
  • properties of all media tracks
  • deviceId - current value of the deviceId property, origin-unique string identifying the source of the track; this is usually a GUID
  • groupId - current value of the groupId property, browsing session-unique string identifying the source group of the track, two devices (as identified by the deviceId) are considered part of the same group if they are from the same physical device
  • specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling MediaDevices.getUserMedia()
  • properties of audio tracks
  • autoGainControl - true, if automatic gain control is enabled and is false otherwise
  • channelCount - number of audio channels present on the track (therefore indicating how many audio samples exist in each audio frame), 1 for mono, 2 for stereo, and so forth
  • echoCancellation - true, if echo cancellation is enabled, otherwise false
  • latency - audio latency, in seconds, the amount of time which elapses between the start of processing the audio and the data being available to the next stop in the audio utilization process, target value; actual latency may vary to some extent for various reasons
  • noiseSuppression - true, if noise suppression is enabled and is false otherwise
  • sampleRate - sample rate in samples per second of the audio data: standard CD-quality audio, for example, has a sample rate of 41,000 samples per second
  • sampleSize - linear size, in bits, of each audio sample: CD-quality audio, for example, is 16-bit, so this value would be 16 in that case
  • volume - volume level of the track, between 0.0 (silent) to 1.0 (maximum supported volume)
  • properties of video tracks
  • aspectRatio - width of the image in pixels divided by its height in pixels, common values include 1.3333333333 (classic televison 4:3 "standard" aspect ratio, also used on tablets such as Apple iPad), 1.7777777778 (16:9 high-definition widescreen), and 1.6 (16:10)
  • facingMode - direction the camera is facing: user|environment|left|right
  • frameRate - how many frames of video per second the track includes, if cant be determined will match the vertical sync rate of the device the user agent is running on
  • height - height of the track video data in pixels
  • width - width of the track video data in pixels
  • resizeMode - mode used by the user agent to derive the resolution of the track: none (track has the resolution offered by the camera, its driver or the OS) | crop-and-scale (resolution might be the result of the user agent using cropping or downscaling from a higher camera resolution)
  • properties of shared screen tracks
  • cursor - whether or not the mouse cursor is being included in the generated stream and under what conditions: always|motion|never
  • displaySurface - type of source the track contains: application|browser|monitor|window
  • logicalSurface - true, indicates that the video contained in the stream video track contains a background rendering context, rather than a user-visible one OR false, if the video being captured is coming from a foreground (user-visible) source
• MediaTrackConstraints dictionary is used to describe a set of capabilities and the value or values each can take on, constraints dictionary is passed into applyConstraints() to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling getConstraints(), for each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you like to be as close to as possible
  • properties of all media tracks
  • deviceId - device ID or an array of device IDs which are acceptable and/or required
  • groupId - group ID or an array of group IDs which are acceptable and/or required
  • properties of audio tracks
  • autoGainControl - whether automatic gain control is preferred and/or required
  • channelCount - channel count or range of channel counts which are acceptable and/or required
  • echoCancellation - whether or not echo cancellation is preferred and/or required
  • latency - latency or range of latencies which are acceptable and/or required
  • noiseSuppression - whether noise suppression is preferred and/or required
  • sampleRate - sample rate or range of sample rates which are acceptable and/or required
  • sampleSize - sample size or range of sample sizes which are acceptable and/or required
  • volume - volume or range of volumes which are acceptable and/or required
  • properties of video tracks
  • aspectRatio - aspect ratio or range of aspect ratios which are acceptable and/or required
  • facingMode - facing or an array of facings which are acceptable and/or required
  • frameRate - frame rate or range of frame rates which are acceptable and/or required
  • height - video height or range of heights which are acceptable and/or required
  • width - width or range of widths which are acceptable and/or required
  • resizeMode - mode or an array of modes the UA can use to derive the resolution of a video track, values are none and crop-and-scale, none - user agent uses the resolution provided by the camera|driver|OS, crop-and-scale - user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution
  • properties of image tracks
  • whiteBalanceMode - "none", "manual", "single-shot", or "continuous"
  • exposureMode - "none", "manual", "single-shot", or "continuous"
  • focusMode - "none", "manual", "single-shot", or "continuous"
  • pointsOfInterest - pixel coordinates on the sensor of one or more points of interest, is either an object in the form { x:value, y:value } or an array of such objects, where value is a double-precision integer
  • exposureCompensation - f-stop adjustment by up to ±3
  • colorTemperature - color temperature in degrees kelvin
  • iso - iso setting
  • brightness - brightness setting
  • contrast - degree of difference between light and dark
  • saturation - degree of color intensity
  • sharpness - intensity of edges
  • focusDistance - distance to a focused object
  • zoom - focal length
  • torch - whether the fill light is continuously connected, meaning it stays on as long as the track is active
  • properties of shared screen tracks
  • cursor - whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving, single value or an array of them to allow the browser flexibility in deciding: always|motion|never, one of them or range
  • displaySurface - types of display surface that may be selected by the user, single one string, or a list of them to allow multiple source surfaces: application(application windows)|browser(browser tab)|monitor|window, one of them or range
  • logicalSurface - whether or not to allow the user to choose source surfaces which do not directly correspond to display areas: backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows
  • you can determine whether or not constraint is supported by checking the value of MediaTrackSupportedConstraints.* as returned by a call to MediaDevices.getSupportedConstraint, typically this is unnecessary since browsers will simply ignore any constraints they are unfamiliar with
• MediaStreamTrackEvent represents events which indicate that a MediaStream has had tracks added to or removed from the stream through calls to Media Stream API methods, these events are sent to the stream when these changes occur, the events based on this interface are addtrack and removetrack
  • new MediaStreamTrackEvent(addtrack|removetrack, {track:MediaStreamTrack})
  • properties(inherits from Event)
  • track - MediaStreamTrack object representing the track which was added to the stream
  • methods(inherits from Event)
• MediaTrackSupportedConstraints dictionary establishes the list of constrainable properties recognized by the user agent or browser in its implementation of the MediaStreamTrack object, an object conforming to MediaTrackSupportedConstraints is returned by MediaDevices.getSupportedConstraints(), because of the way interface definitions in WebIDL work, if a constraint is requested but not supported, no error will occur, instead, the specified constraints will be applied, with any unrecognized constraints stripped from the request, that can lead to confusing and hard to debug errors, so be sure to use getSupportedConstraints() to retrieve this information before attempting to establish constraints if you need to know the difference between silently ignoring a constraint and a constraint being accepted
  • actual constraint set is described using an object based on the MediaTrackConstraints dictionary
• BlobEvent - events associated with a Blob, typically, but not necessarily, associated with media content
  • new BlobEvent({data: aSpecificBlob}[,DOMHighResTimeStamp])
  • properties(inherits from Event)
  • timecode - difference between the timestamp of the first chunk in data, and the timestamp of the first chunk in the first BlobEvent produced by this recorder, the timecode in the first produced BlobEvent does not need to be zero
  • data - Blob associated with the event
  • methods(inherits from Event)
• CanvasCaptureMediaStreamTrack - video track contained in a MediaStream being generated from a canvas following a call to HTMLCanvasElement.captureStream()
  • properties(inherits from MediaStreamTrack)
  • canvas - object whose surface is captured in real-time
  • methods(inherits from MediaStreamTrack)
  • requestFrame(frameRate) - manually forces a frame to be captured and sent to the stream, lets applications that wish to specify the frame capture times directly do so, if they specified a frameRate of 0 when calling captureStream(), watch for origin and SecurityError on problems
• ImageCapture provides methods to enable the capture of images or photos from incoming stream of a video conference, a playing movie, or the stream from a webcam
  • new ImageCapture(videoTrack)
  • properties
  • track - reference to the MediaStreamTrack passed to the constructor
  • properties(inherits from EventTarget)
  • takePhoto([{ fillLightMode:auto|off|on, imageHeight:int, imageWidth:int, redEyeReduction:bool }]) - takes a single exposure using the video capture device sourcing a MediaStreamTrack and returns a Promise that resolves with a Blob containing the data
  • getPhotoCapabilities() - resolves with a PhotoCapabilities object containing the ranges of available configuration options: redEyeReductionRead:never|always|controllable, imageHeight:{min:,max:,step:}, imageWidth:{min:,max:,step:}, fillLightMode:arr_of_auto|off|flash
  • getPhotoSettings() - resolves with a PhotoSettings object containing the current photo configuration settings: fillLightMode: auto|off|on, imageHeight:int, imageWidth:int, redEyeReduction:bool
  • grabFrame() - takes a snapshot of the live video in a MediaStreamTrack, returning an ImageBitmap, if successful
• MediaRecorder
• MediaTrackCapabilities
• URL

Animations

• for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements, does so by combining two models: the Timing Model and the Animation Model
• element.animate( keyframes, ms | {[ id:,delay:,direction:,duration:,easing:,endDelay:,fill:,iterationStart:,iterations:, [composite:,iterationComposite:,spacing:] ]} ) - shortcut method which creates a new Animation, applies it to the element, then plays the animation, returns the created Animation object instance
• document.getAnimations() - Array of Animation objects, each representing one animation currently associated with elements which are descendants of the Document on which its called
• document.timeline - default timeline of the current document, automatically created on page load, unique to each document and persists for the lifetime of the document including calls to Document.open(), calculated as a fixed offset from the global clock such that the zero time corresponds to the navigationStart moment plus a signed delta known as the origin time, prior to establishing the navigationStart moment, the document timeline is inactive

    // var animations_tests = document.getElementById("animations_tests");

    // var easingFunctions = [
    //     'frames(10)',
    //     'steps(10)',
    //     'ease-in'
    //   ]
    //   var keyFrames = [
    //     { width: '0%', background : 'red'},
    //     { width: '100%', background : 'blue'},
    //   ]
    //   var divs = document.querySelectorAll('.a_easing');
    //   for(var i = 0; i < divs.length; i++) {
    //     divs[i].animate(keyFrames, {
    //       easing : easingFunctions[i],
    //       duration : 5000,
    //       iterations: Infinity
    //     });
    //   }

    var boxRotationTiming = {
      duration: 1000,
      iterations: 1,
      fill: "none"
    };
    var boxRotationKeyframes = [
      { transform: "rotate(0deg)" },
      { transform: "rotate(360deg)" }
    ];
    document.getElementById("animateButton").addEventListener("click", event => {
      document.getElementById("box").animate(
        boxRotationKeyframes,
        boxRotationTiming
      );
    }, false);

    // // slow down all animations on a page
    // document.getAnimations().forEach(
    //   function (animation) {
    //     animation.playbackRate *= .5;
    //   }
    // );

    var pageTimeline = document.timeline;
    var thisMoment = pageTimeline.currentTime;

    // share a single documentTimeline among multiple animations
    // manipulate just that group of animations via their shared timeline
    // start all the cats animating 500 milliseconds into their animations
    var cats = document.querySelectorAll('.sharedTimelineCat');
    cats = Array.prototype.slice.call(cats);
    var sharedTimeline = new DocumentTimeline({ originTime: 500 });
    cats.forEach(function(cat) {
      var catKeyframes = new KeyframeEffect(cat, keyframes, timing);
      var catAnimation = new Animation(catKeyframes, sharedTimeline);
      catAnimation.play();
    });

    animation.ready.then(function() {
      // Do whatever needs to be done when
      // the animation is ready to run
    });

    // keyframes formats
    // 1 - array of objects (keyframes) consisting of properties and values to iterate
    element.animate([
      { // from
        opacity: 0,
        color: "#fff"
      },
      { // to
        opacity: 1,
        color: "#000"
      }
      // with offset
      // { opacity: 1 },
      // { opacity: 0.1, offset: 0.7 },
      // { opacity: 0 }
      // with easing
      // { opacity: 1, easing: 'ease-out' },
      // { opacity: 0.1, easing: 'ease-in' },
      // { opacity: 0 }
    ], 2000);
    // 2 - object containing key-value pairs consisting of the property to animate
    // and an array of values to iterate over
    element.animate({
      opacity: [ 0, 1 ],          // [ from, to ]
      color:   [ "#fff", "#000" ] // [ from, to ]
      //
      // opacity: [ 0, 1 ], // offset: 0, 1
      // backgroundColor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1
      //
      // opacity: [ 0, 0.9, 1 ],
      // offset: [ 0, 0.8 ], // Shorthand for [ 0, 0.8, 1 ]
      // easing: [ 'ease-in', 'ease-out' ],
    },2000);
    // property names are specified using camel-case (backgroundColor,backgroundPositionX,margin)
    // exceptions are: cssFloat, cssOffset
    // special attributes: easing, offset, composite

    // Loop through each tear
    tears.forEach(function(el) {
      // Animate each tear
      el.animate(
        tearsFalling,
        {
          delay: getRandomMsRange(-1000, 1000), // randomized for each tear
          duration: getRandomMsRange(2000, 6000), // randomized for each tear
          iterations: Infinity,
          easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
        });
    });
    var getRandomMsRange = function(min, max) {
      return Math.random() * (max - min) + min;
    }

    document.getElementById("alice_arm").animate([
      { transform: 'rotate(10deg)' },
      { transform: 'rotate(-40deg)' }
    ], {
      easing: 'steps(2, end)',
      iterations: Infinity,
      direction: 'alternate',
      duration: 600
    });

    // Define the key frames
    var spriteFrames = [
      { transform: 'translateY(0)' },
      { transform: 'translateY(-100%)' }
    ];
    // Get the element that represents Alice and the Red Queen
    var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');
    // Animate Alice and the Red Queen using steps()
    var redQueen_alice = redQueen_alice_sprite.animate(
    spriteFrames, {
      easing: 'steps(7, end)',
      direction: "reverse",
      duration: 600,
      playbackRate: 1,
      iterations: Infinity
    });

    // waits until all animations running on the element elem have finished
    // then deletes the element from the DOM tree
    Promise.all(
    elem.getAnimations().map(
      function(animation){
        return animation.finished;
      }
    )).then(
      function() {
        return elem.remove();
      }
    );
    animation.oncancel = function() { animation.effect.target.remove(); };

    // interfaceElement.addEventListener("mousedown", function() {
    //   try {
    //     player.finish();
    //   } catch(e if e instanceof InvalidState) {
    //     console.log("finish() called on paused or finished animation.");
    //   } catch(e) {
    //     logMyErrors(e); //pass exception object to error handler
    //   }
    // });

    speedSelector.addEventListener('input', evt => {
      cartoon.updatePlaybackRate(parseFloat(evt.target.value));
      cartoon.ready.then(() => {
        console.log(`Playback rate set to ${cartoon.playbackRate}`);
      });
    });

    // The cake has its own animation:
    var nommingCake = document.getElementById('eat-me_sprite').animate(
    [
      { transform: 'translateY(0)' },
      { transform: 'translateY(-80%)' }
    ], {
      fill: 'forwards',
      easing: 'steps(4, end)',
      duration: aliceChange.effect.timing.duration / 2
    });
    nommingCake.pause(); // dont play immediately

    // This function will play when ever a user clicks or taps
    var growAlice = function() {
      aliceChange.play();
      nommingCake.play();
    }
    // var shrinkAlice = function() {
    //   aliceChange.playbackRate = -1;
    //   aliceChange.play();
    //   // // same as
    //   // aliceChange.reverse();
    //   drinking.play()
    // }
    // When a user holds their mouse down or taps, call growAlice to make all the animations play.
    cake.addEventListener("mousedown", growAlice, false);
    cake.addEventListener("touchstart", growAlice, false);

    var stopPlayingAlice = function() {
      aliceChange.pause();
      nommingCake.pause();
      drinking.pause();
    };
  

• Animation interface represents a single animation player and provides playback controls and a timeline for an animation node or source
  • new Animation([KeyframeEffect|SequenceEffect|GroupEffect,DocumentTimeline])
  • properties
  • currentTime - current time value of the animation in milliseconds, whether running or paused, if the animation lacks a timeline, is inactive or hasnt been played yet, its value is null (also to deactivate)
  • effect - gets and sets the AnimationEffectReadOnly associated with this animation, KeyframeEffect object
  • finished - current finished Promise for this animation
  • id - gets and sets the String used to identify the animation
  • pending - whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation
  • playState - enumerated value describing the playback state of an animation: idle, running, paused, finished
  • playbackRate - gets or sets the playback rate of the animation
  • ready - current ready Promise for this animation
  • startTime - gets or sets the scheduled time when an animation playback should begin
  • timeline - gets or sets the timeline associated with this animation, default is the same as the document timeline
  • properties
  • cancel() - clears all keyframeEffects caused by this animation and aborts its playback
  • finish() - sets the current playback time to the end of the animation corresponding to the current playback direction. That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its reverse() method called), it sets the playback time to 0
  • pause()- suspends playing of an animation
  • play() - starts or resumes playing of an animation, or begins the animation again if it previously finished
  • reverse() - reverses playback direction, stopping at the start of the animation, if the animation is finished or unplayed, it will play from end to beginning
  • updatePlaybackRate(playbackRate_number) - sets the speed of an animation after first synchronizing its playback position
  • events
  • cancel - gets and sets the event handler for the cancel event
  • finish - gets and sets the event handler for the finish event
• AnimationEffect defines current and future animation effects like KeyframeEffect, which can be passed to Animation objects for playing, and KeyframeEffectReadOnly (which is used by CSS Animations and Transitions)
  • method
  • getTiming() - EffectTiming object associated with the animation containing all the animation timing values
  • getComputedTiming() - calculated timing properties for this AnimationEffect: endTime, activeDuration, localTime, progress, currentIteration
  • updateTiming(OptionalEffectTiming) - updates the specified timing properties of this AnimationEffect
• AnimationEvent represents events providing information related to animations
  • new AnimationEvent(type, {animationName:aPropertyName, elapsedTime:aFloat, pseudoElement:aPseudoElementName})
  • properties
  • type - animationstart, animationend, animationiteration
  • animationName - alue of the animation-name CSS property associated with the transition
  • elapsedTime - float, the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused, for "animationstart" event, elapsedTime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedTime containing (-1 * delay)
  • pseudoElement - string, starting with '::', containing the name of the pseudo-element the animation runs on, if the animation doesnt run on a pseudo-element but on the element, an empty string: ''
• AnimationPlaybackEvent represents animation events, as animations play, they report changes to their playState through animation events
  • new AnimationPlaybackEvent(type, eventInit_dict)
  • attributes
  • currentTime - current time of the animation that generated the event
  • timelineTime - time value of the timeline of the animation that generated the event
• AnimationTimeline represents timeline of an animation, exists to define timeline features (inherited by DocumentTimeline and future timeline types) and is not itself directly used by developers, anywhere you see AnimationTimeline, you should use DocumentTimeline or any other timeline type instead
  • properties
  • currentTime - time value in milliseconds for this timeline or null if this timeline is inactive
• DocumentTimeline represents animation timelines, including the default document timeline (accessed via Document.timeline)
  • new DocumentTimeline({originTime:ms})
  • properties (inherits from AnimationTimeline)
• EffectTiming dictionary, used by Element.animate(), KeyframeEffectReadOnly(), and KeyframeEffect() to describe timing properties for animation effects, properties are all optional, although without setting a duration the animation will not play, put these properties describe how the user agent should go about making the transition from from keyframe to keyframe, and how to behave when the animation begins and ends
  • properties
  • delay - number of milliseconds to delay the start of the animation, defaults to 0
  • direction - whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse), defaults to "normal"
  • duration - number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
  • easing - rate of the animation change over time: "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)", defaults to "linear"
  • endDelay - number of milliseconds to delay after the end of an animation, primarily of use when sequencing animations based on the end time of another animation, defaults to 0.
  • fill - dictates whether the animation effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both, defaults to "none"
  • iterationStart - describes at what point in the iteration the animation should start, 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration, defaults to 0.0
  • iterations - number of times the animation should repeat. Defaults to 1, and can also take a value of Infinity to make it repeat for as long as the element exists
• KeyframeEffect interface creates sets of animatable properties and values, called keyframes, these can then be played using the Animation() constructor
  • new KeyframeEffect(element, Keyframes[,keyframeOptions])
  • new KeyframeEffect(KeyframeEffect_to_clone)
  • Keyframes
    • property names are specified using camel-case (backgroundColor,backgroundPositionX,margin), exceptions are: cssFloat, cssOffset
    • special attributes
    • offset - offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null, equivalent to specifying start and end states in percentages in CSS stylesheets using @keyframes, if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes
    • easing - timing function used from this keyframe until the next keyframe in the series
    • composite - KeyframeEffect.composite operation used to combine the values specified in this keyframe with the underlying value, will be auto if the composite operation specified on the effect is being used
  • keyframeOptions - integer representing the animation's duration (in milliseconds), or an Object containing one or more of the following
    • delay - number of milliseconds to delay the start of the animation. Defaults to 0
    • direction - whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse), defaults to "normal"
    • duration - number of milliseconds each iteration of the animation takes to complete, defaults to 0, although this is technically optional, keep in mind that your animation will not run if this value is 0
    • easing - rate of the animation change over time, accepts the pre-defined values
      • linear
      • ease = cubic-bezier(0.25, 0.1, 0.25, 1)
      • ease-in = cubic-bezier(0.42, 0, 1, 1)
      • ease-out = cubic-bezier(0, 0, 0.58, 1)
      • ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)
      • custom cubic-bezier(x1, y1, x2, y2) value like "cubic-bezier(0.42, 0, 0.58, 1)", both x values must be in the range [0, 1] or the definition is invalid
      • frames(integer) (!)
      • steps(integer [,start|end]?) - breaks animation into a number of equal time intervals
      • step-start = steps(1, start)
      • step-end = steps(1, end)
    • endDelay - number of milliseconds to delay after the end of an animation, primarily of use when sequencing animations based on the end time of another animation, defaults to 0
    • fill - how the element should look when the animation sequence is not actively running, such as before the time specified by iterationStart or after animation end time
      • none - if the animation isnt in its active interval, the affected element is not visible
      • forwards - affected element will continue to be rendered in the state of the final animation framecontinue to be applied to the after the animation has completed playing, in spite of and during any endDelay or when its playState is finished
      • backwards - animation effects should be reflected by the element(s) state prior to playing, in spite of and during any delay and pending playState
      • both - combining the effects of both forwards and backwards
      • auto - if the animation effect the fill mode is being applied to is a keyframe effect (KeyframeEffect or KeyframeEffectReadOnly), "auto" is equivalent to "none", otherwise, the result is "both"
    • iterationStart - describes at what point in the iteration the animation should start, 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration, defaults to 0.0
    • iterations - number of times the animation should repeat, defaults to 1, and can also take a value of Infinity to make it repeat for as long as the element exists
    • composite - determines how values are combined between this animation and the element underlying values: actions
      • replace - keyframeEffect overrides the underlying value it is combined with: blur(2) replaces blur(3)
      • add - keyframeEffect is added to the underlying value with which it is combined (aka additive): blur(2) blur(3)
      • accumulate - keyframeEffect is accumulated on to the underlying value: blur(5)
    • iterationComposite - determines how values build from iteration to iteration in the current animation
      • replace - keyframeEffect value produced is independent of the current iteration
      • accumulate - subsequent iterations of the keyframeEffect build on the final value of the previous iteration
  • properties
  • target - gets and sets the element or pseudo-element being animated by this object, may be null for animations that do not target a specific element
  • iterationComposite - gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect
  • composite - gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects
  • methods (inherits from AnimationEffect)
  • getKeyframes() - computed keyframes that make up this effect along with their computed keyframe offsets
  • setKeyframes(keyframes) - replaces the set of keyframes that make up this effect

Drag and Drop

    var dnd_div1 = document.getElementById("dnd_div1");
    var dnd_div2 = document.getElementById("dnd_div2");
    var dnd_tests = document.getElementById("dnd_tests");

    function allowDrop(ev) {
      ev.preventDefault();
      ev.target.style.border = '3px dotted blue';
    }

    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
      // var dataList = ev.dataTransfer.items;
      // dataList.add(ev.target.id, "text/plain");
      // // Add some other items to the drag payload
      // dataList.add("... paragraph ...", "text/html");
      // dataList.add("http://www.example.org","text/uri-list");
    }

    function drop(ev, el) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      el.appendChild(document.getElementById(data));
      dnd_div1.style.border = '1px solid black';
      dnd_div2.style.border = '1px solid black';

      // var data = event.dataTransfer.items;
      // for (var i = 0; i < data.length; i += 1) {
      //   if (
      //     (data[i].kind == 'string') &&
      //     (data[i].type.match('^text/plain'))
      //   ) {
      //     // This item is the target node
      //     data[i].getAsString(function (s){
      //       ev.target.appendChild(document.getElementById(s));
      //     });
      //   } else if (
      //     (data[i].kind == 'string') &&
      //     (data[i].type.match('^text/html'))
      //   ) {
      //     // Drag data item is HTML
      //     console.log("... Drop: HTML");
      //   } else if (
      //     (data[i].kind == 'file') &&
      //     (data[i].type.match('^image/'))
      //   ) {
      //     // Drag data item is an image file
      //     var f = data[i].getAsFile();
      //     console.log("... Drop: File ");
      //   }
      // }

    }

    // function dragover_handler(ev) {
    //   console.log("dragOver");
    //   ev.preventDefault();
    //   // Set the dropEffect to move
    //   ev.dataTransfer.dropEffect = "move"
    // }

    // function dragend_handler(ev) {
    //   console.log("dragEnd");
    //   var dataList = ev.dataTransfer.items;
    //   for (var i = 0; i < dataList.length; i++) {
    //     dataList.remove(i);
    //   }
    //   dataList.clear(); // Clear any remaining drag data
    // }

    setInterval(function(){
      dnd_tests.innerHTML = "";
      var div1_childs_ids = "DIV 1:";
      var div1_childs = dnd_div1.children;
      for (var i=0, child; child=div1_childs[i]; i++) {
        div1_childs_ids += child.id
      }
      var div2_childs_ids = "DIV 2:";
      var div2_childs = dnd_div2.children;
      for (var i=0, child; child=div2_childs[i]; i++) {
        div2_childs_ids += child.id
      }
      dnd_tests.innerHTML = div1_childs_ids + div2_childs_ids;
    }, 500);

    // var el = document.getElementById('drag');
    // el.addEventListener("touchstart", handleStart, false);
    // el.addEventListener("touchend", handleEnd, false);
    // el.addEventListener("touchcancel", handleCancel, false);
    // el.addEventListener("touchleave", handleEnd, false);
    // el.addEventListener("touchmove", handleMove, false);
    // function handleStart(event) {
    //     // Handle the start of the touch
    // }
  

• DataTransfer object is used to hold the data that is being dragged during a drag and drop operation, may hold one or more data items, each of one or more data types, object is available from the dataTransfer property of all drag events
  • new DataTransfer()
  • properties
  • types - array of the drag data formats (as strings) that were set in the dragstart event, order of the formats is the same order as the data included in the drag operation, MIME type
  • items - list of the data transfer items in a drag operation, includes one item for each item in the operation and if the operation had no items, the list is empty
  • files - list of the files in the drag operation, if operation includes no files, the list is empty, used to drag files from a user desktop to the browser
  • effectAllowed - specifies the effect that is allowed for a drag operation:
    • none - item may not be dropped
    • copy - copy of the source item may be made at the new location
    • link - link may be established to the source at the new location
    • move - item may be moved to a new location
    • copyLink - copy or link operation is permitted
    • copyMove - copy or move operation is permitted
    • linkMove - link or move operation is permitted
    • all - ll operations are permitted
    • IE will change the value to be lowercased; thus, linkMove will become linkmove
  • dropEffect - controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging, when the user hovers over a target drop element, the browser cursor may indicate which type of operation will occur
    • copy - copy of the source item is made at the new location
    • move - item is moved to a new location
    • link - link is established to the source at the new location
    • none - item may not be dropped
  • methods
  • setDragImage(img_el, xOffset, yOffset) - custom drag image, instead of autogenerated
  • setData(format, data) - sets the drag operation drag data to the specified data and type, if data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type, if data for the given type already exists, the existing data is replaced in the same position, the order of the types list is not changed when replacing data of the same type
  • getData(format) - retrieves drag data (as a string) for the specified type OR empty string
  • clearData([format]) - removes the drag operation drag data for the given type OR for all types, does not remove files from the drag operation, so its possible for there still to be an entry with the type "Files" left in the objects DataTransfer.types list if there are any files included in the drag
• DataTransferItem represents one drag data item during a drag operation, each drag event has a dataTransfer property which contains a list of drag data items, each item in the list is a DataTransferItem object
  • properties
  • kind - kind of drag data item: string|file
  • type - drag data item type, typically a MIME type
  • methods
  • getAsFile() - returns the File object associated with the drag data item (or null if the drag item is not a file)
  • getAsString(callback) - invokes the specified callback with the drag data item string as its argument
• DataTransferItemList object is a list of DataTransferItem objects representing items being dragged, during a drag operation, each DragEvent has a dataTransfer property and that property is a DataTransferItemList
  • properties
  • length - number of drag items in the list
  • methods
  • add( data,type | file ) - adds an item (either a File object or a string) to the drag item list and returns a DataTransferItem object for the new item
  • remove(index) - removes the drag item from the list at the given index
  • clear() - removes all of the drag items from the list
  • DataTransferItem() - getter that returns a DataTransferItem at the given index, works for ev.dataTransfer.items[index]
• DragEvent represents a drag and drop interaction, user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element), applications are free to interpret a drag and drop interaction in an application-specific way
  • new DragEvent(type, DragEventInit)
  • properties
  • dataTransfer - data that is transferred during a drag and drop interaction
  • events
  • drag - element or text selection is being dragged
  • dragend - drag operation is being ended (by releasing a mouse button or hitting the escape key)
  • dragenter - dragged element or text selection enters a valid drop target
  • dragexit - element is no longer the drag operation's immediate selection target
  • dragleave - dragged element or text selection leaves a valid drop target
  • dragover - fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately, this firing pattern is different than mouseover
  • dragstart - user starts dragging an element or text selection
  • drop - element or text selection is dropped on a valid drop target

Pointer Lock

• provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport, gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view, ideal for first person 3D games, for example
• useful for any applications that require significant mouse input to control movements, rotate objects, and change entries
• lets you access mouse events even when the cursor goes past the boundary of the browser or screen
• persistent - does not release the mouse until an explicit API call is made or the user uses a specific release gesture
• not limited by browser or screen boundaries
• continues to send events regardless of mouse button state
• hides the cursor
• methods
  • element.requestPointerLock() - ask for the pointer to be locked on the given element, to track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events at the Document level
  • document.exitPointerLock() - releases a pointer lock previously requested through Element.requestPointerLock, to track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events
• click on black area to move point and press ESC on keyboard to exit lock

    var pl_tests = document.querySelector('#pl_tests');
    var canvas = document.querySelector('#pl_tests_canvas');
    var ctx = canvas.getContext('2d');
    var x = 50;
    var y = 50;
    const RADIUS =5;

    function pl_canvasDraw() {
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "#f00";
      ctx.beginPath();
      ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
      ctx.fill();
    }
    pl_canvasDraw();
    // pointer lock object forking for cross browser
    canvas.requestPointerLock = canvas.requestPointerLock ||
                                canvas.mozRequestPointerLock;
    document.exitPointerLock = document.exitPointerLock ||
                              document.mozExitPointerLock;
    canvas.onclick = function() {
      canvas.requestPointerLock();
    };

    document.addEventListener('pointerlockchange', lockChangeAlert, false);
    document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
    function lockChangeAlert() {
      if (
        document.pointerLockElement === canvas ||
        document.mozPointerLockElement === canvas
      ) {
        pl_logger("pointer lock status is now locked");
        document.addEventListener("mousemove", updatePosition, false);
      } else {
        pl_logger("pointer lock status is now unlocked");
        document.removeEventListener("mousemove", updatePosition, false);
      }
    }

    document.addEventListener('pointerlockerror', lockError, false);
    document.addEventListener('mozpointerlockerror', lockError, false);
    function lockError(e) {
        pl_logger("pointer lock failed");
    }

    var animation;
    function updatePosition(e) {
      x += e.movementX;
      y += e.movementY;
      if (x > canvas.width + RADIUS) {
        x = -RADIUS;
      }
      if (y > canvas.height + RADIUS) {
        y = -RADIUS;
      }
      if (x < -RADIUS) {
        x = canvas.width + RADIUS;
      }
      if (y < -RADIUS) {
        y = canvas.height + RADIUS;
      }
      pl_logger("X position: "+x+", Y position: "+y);
      if (!animation) {
        animation = requestAnimationFrame(function() {
          animation = null;
          pl_canvasDraw();
        });
      }
    }

    function degToRad(degrees) {
      var result = Math.PI / 180 * degrees;
      return result;
    }
    function pl_logger(txt) {
      pl_tests.innerHTML = txt + pl_tests.innerHTML;
    }

    // el.addEventListener("touchstart", handleStart, false);
    // el.addEventListener("touchend", handleEnd, false);
    // el.addEventListener("touchcancel", handleCancel, false);
    // el.addEventListener("touchleave", handleEnd, false);
    // el.addEventListener("touchmove", handleMove, false);
  

Server-Sent Events

• Set the "Content-Type" header to "text/event-stream"
• Specify that the page should not cache
• Output the data to send (Always start with "data: ")
• Flush the output data back to the web page
• Not supported in IE/Edge

  
    <?php
      // php/stream.php file
      header('Content-Type: text/event-stream');
      header('Cache-Control: no-cache');
      $time = date('r');
      echo "data: The server time is: {$time}\n\n";
      flush();
    ?>
  

    var sse_tests = document.getElementById("sse_tests");
    if(typeof(EventSource) !== "undefined") {
      var source = new EventSource("php/stream.php");
      // source.onopen = function(event) {
      //   sse_tests.innerHTML += "Connection to the stream is opened";
      // };
      source.onmessage = function(event) {
        sse_tests.innerHTML += event.data;
      };
      // source.onerror = function(event) {
      //   sse_tests.innerHTML += "Stream errors";
      // };
    } else {
      sse_tests.innerHTML = "server-sent events unsupported...";
    }
  

WebRTC [unfinished]

• Web Real-Time Communications - technology which enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary/li>
• consists of several interrelated APIs and protocols which work together to achieve this
• overlaps substantially with the Media Capture and Streams API
• connections between two peers are created using—and represented by the RTCPeerConnection interface, once a connection has been established and opened, MediaStreams(audio, video, and text) and/or RTCDataChannels(arbitrary binary data: back-channel information, metadata exchange, game status packets, file transfers, or even as a primary channel for data transfer) can be added to the connection
• adapter.js - goes beyond prefix handling, implementing shims to bridge compatibility gaps between browsers implementations of WebRTC

    var pc = new RTCPeerConnection();
    var state = pc.iceGatheringState;
    var state = pc.iceConnectionState;
    var connectionState = pc.connectionState;

    pc.ontrack = function(event) {
      document.getElementById("received_video").srcObject = event.streams[0];
      document.getElementById("hangup-button").disabled = false;
    };
    pc.onsignalingstatechange = function(event) {
      if (pc.signalingState === "have-local-pranswer") {
        // setLocalDescription() has been called with an answer
      }
    };
    pc.onremovestream = function(ev) { alert("onremovestream event detected!"); };
    pc.onpeeridentity = function(ev) { alert("onpeeridentity event detected!"); };
    pc.onidpvalidationerror = function(ev) { alert("onidpvalidationerror event detected!"); };
    pc.onidpassertionerror = function(ev) { alert("onidpassertionerror event detected!"); };
    pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); };

    pc.onnegotiationneeded = function() {
      pc.createOffer().then(function(offer) {
        return pc.setLocalDescription(offer);
      })
      .then(function() {
          // Send the offer to the remote peer through the signaling server
        });
      })
      .catch(reportError);
    }

    pc.onicegatheringstatechange = function() {
      let label = "Unknown";
      switch(pc.iceGatheringState) {
        case "new":
        case "complete":
          label = "Idle";
          break;
        case "gathering":
          label = "Determining route";
          break;
      }
      document.getElementById("iceStatus").innerHTML = label;
    }

    pc.oniceconnectionstatechange = function(event) {
      if (pc.iceConnectionState === "failed" ||
          pc.iceConnectionState === "disconnected" ||
          pc.iceConnectionState === "closed") {
        // Handle the failure
      }
    };

    pc.onicecandidate = function(event) {
      if (event.candidate) {
        // Send the candidate to the remote peer
      } else {
        // All ICE candidates have been sent
      }
    }

    pc.ondatachannel = function(ev) {
      console.log('Data channel is created!');
      ev.channel.onopen = function() {
        console.log('Data channel is open and ready to be used.');
      };
    };

    pc.onconnectionstatechange = function(event) {
      switch(pc.connectionState) {
        case "connected":
          // The connection has become fully connected
          break;
        case "disconnected":
        case "failed":
          // One or more transports has terminated unexpectedly or in an error
          break;
        case "closed":
          // The connection has been closed
          break;
      }
    }

    var iceServers = pc.defaultIceServers;
    if (iceServers.length === 0) {
      // Deal with the lack of default ICE servers, possibly by using our own defaults
    }

    var channel = pc.createDataChannel("Mydata");
    channel.onopen = function(event) {
      channel.send('sending a message');
    }
    channel.onmessage = function(event) {
      console.log(event.data);
    }
    // Determine the largest message size that can be sent
    var sctp = pc.sctp;
    var maxMessageSize = sctp.maxMessageSize;

    var sd = pc.remoteDescription;
    if (sd) {
      alert("Remote session: type='" +
      sd.type + "'; sdp description='" +
      sd.sdp + "'");
    }
    else {
      alert("No remote session yet.");
    }

    var sd = pc.currentRemoteDescription;
    if (sd) {
      alert("Local session: type='" +
      sd.type + "'; sdp description='" +
      sd.sdp + "'");
    }
    else {
      alert("No local session yet.");
    }

    var ld = pc.localDescription;
    if (ld) {
      alert("Local session: type='" +
      ld.type + "'; sdp description='" +
      ld.sdp + "'");
    }
    else {
      alert("No local session yet.");
    }

    var sd = pc.currentLocalDescription;
    if (sd) {
      alert("Local session: type='" +
      sd.type + "'; sdp description='" +
      sd.sdp + "'");
    }
    else {
      alert("No local session yet.");
    }

    var identity = pc.peerIdentity;
    if (identity) {
      alert("Identity of the peer: idp='" +
      identity.idp + "'; assertion='" +
      identity.name + "'");
    }
    else {
      alert("Identity of the peer has not been verified");
    }

    // The following code might be used to handle an offer from a peer when
    // it isn't known whether it supports trickle ICE.
    pc.setRemoteDescription(remoteOffer)
      .then(_ => pc.createAnswer())
      .then(answer => pc.setLocalDescription(answer))
      .then(_ =>
        if (pc.canTrickleIceCandidates) {
          return pc.localDescription;
        }
        return new Promise(r => {
          pc.addEventListener('icegatheringstatechange', e => {
            if (e.target.iceGatheringState === 'complete') {
              r(pc.localDescription);
            }
          });
        });
      })
      .then(answer => sendAnswerToPeer(answer)) // signaling message
      .catch(e => handleError(e));
    pc.addEventListener('icecandidate', e => {
      if (pc.canTrickleIceCandidates) {
        sendCandidateToPeer(e.candidate); // signaling message
      }
    });
  

• Connection setup and management - open, and manage connection
• RTCPeerConnection - connection between the local computer and a remote peer, provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed
  • RTCPeerConnection([{bundlePolicy:balanced(pick two tracks to send - one audio and one video)|max-compat(one media track to negotiate and will only send that one)|max-compat(separate each track into its own connection), certificates: RTCCertificate_arr, iceCandidatePoolSize:0_OR_ice_candidate_pool_int, iceServers:RTCIceServers_arr, iceTransportPolicy:all|RTCIceTransportPolicy, peerIdentity:str, rtcpMuxPolicy:require|RTCRtcpMuxPolicy }]) - newly-created RTCPeerConnection, which represents a connection between the local device and a remote peer
  • properties (inherits from EventTarget)
  • canTrickleIceCandidates - whether or not the remote peer can accept trickled ICE candidates
  • connectionState - current state of the peer connection by returning one of the string values specified by the enum RTCPeerConnectionState: new, connecting, connected, disconnected, failed, closed
  • currentLocalDescription - RTCSessionDescription object describing the local end of the connection as it was most recently successfully negotiated since the last time the RTCPeerConnection finished negotiating and connecting to a remote peer, also included is a list of any ICE candidates that may already have been generated by the ICE agent since the offer or answer represented by the description was first instantiated
  • currentRemoteDescription - RTCSessionDescription object describing the remote end of the connection as it was most recently successfully negotiated since the last time the RTCPeerConnection finished negotiating and connecting to a remote peer, also included is a list of any ICE candidates that may already have been generated by the ICE agent since the offer or answer represented by the description was first instantiated
  • defaultIceServers - array of objects based on the RTCIceServer dictionary, which indicates what, if any, ICE servers the browser will use by default if none are provided to the RTCPeerConnection in its RTCConfiguration, browsers are not required to provide any default ICE servers at all
  • iceConnectionState - enum of type RTCIceConnectionState which state of the ICE agent associated with the RTCPeerConnection: new, checking, connected, completed, failed, disconnected, closed
  • iceGatheringState - enum of type RTCIceGatheringState that describes connection ICE gathering state, lets you detect, for example, when collection of ICE candidates has finished: new, gathering, complete
  • localDescription - RTCSessionDescription describing the session for the local end of the connection OR null
  • peerIdentity - RTCIdentityAssertion, containing a DOMString once set and verified, if no peer has yet been set and verified, this property will return null, once set, via the appropriate method, it cant be changed
  • pendingLocalDescription - RTCSessionDescription object describing a pending configuration change for the local end of the connection, does not describe the connection as it currently stands, but as it may exist in the near future, use RTCPeerConnection.currentLocalDescription or RTCPeerConnection.localDescription to get the current state of the endpoint, for details on the difference
  • pendingRemoteDescription - RTCSessionDescription object describing a pending configuration change for the remote end of the connection, does not describe the connection as it currently stands, but as it may exist in the near future, use RTCPeerConnection.currentRemoteDescription or RTCPeerConnection.remoteDescription to get the current session description for the remote endpoint
  • remoteDescription - RTCSessionDescription describing the session (which includes configuration and media information) for the remote end of the connection OR null.
  • sctp - RTCSctpTransport describing the SCTP transport over which SCTP data is being sent and received OR null
  • signalingState - one of the string values specified by the RTCSignalingState enum, describe the state of the signaling process on the local end of the connection while connecting or reconnecting to another peer: stable, have-local-offer, have-remote-offer, have-local-pranswer, have-remote-pranswer
  • events (inherits from EventTarget)
  • connectionstatechange - aggregate state of the connection changes
  • datachannel - RTCDataChannel is added to the connection by the remote peer calling createDataChannel()
  • icecandidate - local ICE agent needs to deliver a message to the other peer through the signaling server.
  • iceconnectionstatechange - when the state of the connection ICE agent, as represented by the iceConnectionState property, changes
  • icegatheringstatechange - ICE gathering state—that is, whether or not the ICE agent is actively gathering candidates—changes
  • identityresult - identity assertion is generated, via getIdentityAssertion() or during the creation of an offer or an answer
  • idpassertionerror - associated identity provider (IdP) encounters an error while generating an identity assertion
  • idpvalidationerror - associated identity provider (IdP) encounters an error while validating an identity assertion
  • negotiationneeded - a change has occurred which requires session negotiation, this negotiation should be carried out as the offerer, because some session changes cannot be negotiated as the answerer
  • peeridentity - identity assertion, received from a peer, has been successfully validated
  • removestream - when a MediaStream is removed from this connection
  • signalingstatechange
  • track - a track has been added to the RTCPeerConnection
  • methods (inherits from EventTarget)
  • addIceCandidate() - when a web site or app using RTCPeerConnection receives a new ICE candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the browser ICE agent
  • addTrack() - adds a new media track to the set of tracks which will be transmitted to the other peer
  • close() - closes the current peer connection
  • createAnswer() - creates an SDP answer to an offer received from a remote peer during the offer/answer negotiation of a WebRTC connection, answer contains information about any media already attached to the session, codecs and options supported by the browser, and any ICE candidates already gathered, answer is delivered to the returned Promise, and should then be sent to the source of the offer to continue the negotiation process
  • createDataChannel() - creates a new channel over which any kind of data may be transmitted
  • createOffer() - initiates the creation of an SDP offer for the purpose of starting a new WebRTC connection to a remote peer
  • generateCertificate() - creates and stores an X.509 certificate and corresponding private key then returns an RTCCertificate, providing access to it
  • ...

Crypto

• allows a script to use cryptographic primitives in order to build systems using cryptography, manipulation and storage of private and secret keys without requiring the underlying bits of the key to be made available to JavaScript
• object with this interface is available on Web context via the Window.crypto
• all Web Crypto API methods are available on a new interface: SubtleCrypto, Crypto.subtle property gives access to an object implementing it
• access the following primitives
  • digest - compute a hash of an arbitrary block of data, in order to detect any change in it
  • mac - compute a message authentication code
  • sign and verify - digitally sign a document, and to verify a signature
  • encrypt and decrypt - encode or decode a document
  • import and export - import a key or export a key
  • key generation - create a cryptographically secure key, or key pair, without the use of base key, but using the available entropy of the local system
  • key wrapping and unwrapping - transmit, and to receive, a key from a third party, encoded using another key, without exposing the underlying key to JavaScript
  • random - generate cryptographically sound pseudo-random numbers
• security cant be stronger than the security of the weakest part of the overall system
• Crypto
  • properties
  • subtle - SubtleCrypto object providing access to common cryptographic primitives, like hashing, signing, encryption or decryption
  • methods
  • getRandomValues(typedArray) - fills the passed TypedArray (Int8Array|Uint8Array|Int16Array|Uint16Array|Int32Array|Uint32Array) with cryptographically sound random values
• SubtleCrypto represents a set of cryptographic primitives, available via the Crypto.subtle properties available in a window context (via Window.crypto)
  • methods (returns Promises)
  • encrypt( RsaOaepParams_obj|AesCtrParams_obj|AesCbcParams_obj|AesGcmParams_obj, CryptoKey_for_encryption, BufferSource_data ) - encrypted data corresponding to the clear text, algorithm and key given as parameters
  • decrypt( RsaOaepParams_obj|AesCtrParams_obj|AesCbcParams_obj|AesGcmParams_obj, CryptoKey_for_decryption, BufferSource_data ) - clear data corresponding to the encrypted text, algorithm and key given as parameters
  • sign({"name":"RSASSA-PKCS1-v1_5"}|RsaPssParams_obj|EcdsaParams|{"name":"HMAC"}, CryptoKey_to_sign, data_ArrayBuffer_ArrayBufferView ) - signature corresponding to the text, algorithm and key given as parameters
  • verify( "RSASSA-PKCS1-v1_5" |{"name":"RSASSA-PKCS1-v1_5"}|RsaPssParams_obj|EcdsaParams|{"name":"HMAC"}, CryptoKey_secretkey, signatures_to_verify_ArrayBuffer, signatures_whose_to_verify_ArrayBuffer ) - indicating if the signature given as parameter matches the text, algorithm and key also given as parameters
  • digest( SHA-1|SHA-256|SHA-384|SHA-512, ArrayBuffer_ArrayBufferView_to_digest ) - digest generated from the algorithm and text given as parameters
  • generateKey( RsaHashedKeyGenParams_obj | EcKeyGenParams_obj |HmacKeyGenParams_obj | AesKeyGenParams_obj , extractable_bool, encrypt|decrypt|sign|verify|deriveKey|deriveBits|wrapKey|unwrapKey ) - newly generated CryptoKey, for symmetrical algorithms, or a CryptoKeyPair, containing two newly generated keys, for asymmetrical algorithm, that matches the algorithm, the usages and the extractability given as parameters
  • deriveKey( EcdhKeyDeriveParams_obj|HkdfParams_obj|Pbkdf2Params_obj, masterkey_CryptoKey, HmacKeyGenParams_obj|AesKeyGenParams_obj, extractable_bool, encrypt|decrypt|sign|verify|deriveKey|deriveBits|wrapKey|unwrapKey ) - newly generated CryptoKey derived from a master key and a specific algorithm given as parameters
  • deriveBits() - newly generated buffer of pseudo-random bits derived from a master key and a specific algorithm given as parameters
  • importKey( raw|pkcs8|spki|jwk, ArrayBuffer|JSONWebKey, RsaHashedImportParams_obj|EcKeyImportParams_obj|HmacImportParams_obj|{"name":ALGORITHM}, extractable_bool, encrypt|decrypt|sign|verify|deriveKey|deriveBits|wrapKey|unwrapKey ) - CryptoKey corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters
  • exportKey (raw|pkcs8|spki|jwk, CryptoKey_to_export ) - buffer, containing the key in the format requested
  • wrapKey( raw|pkcs8|spki|jwk, CryptoKey_to_wrap, CryptoKey_to_use, AES-CBC|AES-CTR|AES-GCM|RSA-OAEP|AES-KW ) - wrapped symmetric key for usage (transfer, storage) in insecure environments, contains the key wrapped by the given wrapping key with the given algorithm
  • unwrapKey( raw|pkcs8|spki|jwk, wrapped_ArrayBuffer, unwrapping_CryptoKey, AES-CBC|AES-CTR|AES-GCM|RSA-OAEP|AES-KW, wrappedKeyAlgo, extractable_bool, encrypt|decrypt|sign|verify|deriveKey|deriveBits|wrapKey|unwrapKey ) - CryptoKey corresponding to the wrapped key given in parameter
• CryptoKey represents a cryptographic key derived from a specific key algorithm, can be obtained using SubtleCrypto.generateKey(), SubtleCrypto.deriveKey() or SubtleCrypto.importKey()
  • properties
  • type - enumerated value representing the type of the key, a secret key (for symmetric algorithm), a public or a private key (for an asymmetric algorithm)
  • extractable - Boolean indicating if the raw information may be exported to the application or not
  • algorithm - opaque object representing a particular cipher the key has to be used with
  • usages - array of enumerated values indicating what the key can be used for
• AES-KW is a way to use the AES cipher for key wrapping

    var crypto_tests = document.getElementById("crypto_tests");

    function getRandomNumbers() {
      var array = new Uint32Array(10);
      window.crypto.getRandomValues(array);
      crypto_tests.innerHTML = "random numbers:"
      for (var i = 0; i < array.length; i++) {
        crypto_tests.innerHTML += array[i];
      }
    }

    let text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
    async function digestMessage(message) {
      let encoder = new TextEncoder();
      let data = encoder.encode(message);
      let digest = await window.crypto.subtle.digest('SHA-256', data);
      console.log(digest.byteLength); // 32 for SHA-256
    }
    digestMessage(text);

    // RSA-OAEP ENCRYPT

    function getMessageEncoding() {
      const messageBox = document.querySelector(".rsa-oaep #message");
      let message = messageBox.value;
      let enc = new TextEncoder();
      return enc.encode(message);
    }
    function encryptMessage(publicKey) {
      let encoded = getMessageEncoding();
      return window.crypto.subtle.encrypt(
        {
          name: "RSA-OAEP"
        },
        publicKey,
        encoded
      );
    }

    // RSA-OAEP DECRYPT

    function decryptMessage(privateKey, ciphertext) {
      return window.crypto.subtle.decrypt(
        {
          name: "RSA-OAEP"
        },
        privateKey,
        ciphertext
      );
    }

    // RSA-PSS - SIGN AND VERIFY

    // Fetch the contents of the "message" textbox, and encode it
    // in a form we can use for sign operation
    function getMessageEncoding() {
      const messageBox = document.querySelector(".rsa-pss #message");
      let message = messageBox.value;
      let enc = new TextEncoder();
      return enc.encode(message);
    }
    let encoded = getMessageEncoding();
    let signature = await window.crypto.subtle.sign(
      {
        name: "RSA-PSS",
        saltLength: 32,
      },
      privateKey,
      encoded
    );

    // Fetch the contents of the "message" textbox, and encode it
    // in a form we can use for sign operation
    function getMessageEncoding() {
      const messageBox = document.querySelector(".rsa-pss #message");
      let message = messageBox.value;
      let enc = new TextEncoder();
      return enc.encode(message);
    }
    // Fetch the encoded message-to-sign and verify it against the stored signature
    // If it checks out, set the "valid" class on the signature
    // Otherwise set the "invalid" class
    async function verifyMessage(publicKey) {
      const signatureValue = document.querySelector(".rsa-pss .signature-value");
      signatureValue.classList.remove("valid", "invalid");
      let encoded = getMessageEncoding();
      let result = await window.crypto.subtle.verify(
        {
          name: "RSA-PSS",
          saltLength: 32,
        },
        publicKey,
        signature,
        encoded
      );
      signatureValue.classList.add(result ? "valid" : "invalid");
    }

    // KEY PAIR GENERATION

    // RSA-OAEP encryption key pair generation
    let keyPair = window.crypto.subtle.generateKey(
      {
        name: "RSA-OAEP",
        modulusLength: 4096,
        publicExponent: new Uint8Array([1, 0, 1]),
        hash: "SHA-256",
      },
      true,
      ["encrypt", "decrypt"]
    );

    // Elliptic curve key pair generation
    let keyPair = window.crypto.subtle.generateKey(
      {
        name: "ECDSA",
        namedCurve: "P-384"
      },
      true,
      ["sign", "verify"]
    );

    // HMAC signing key generation
    let key = window.crypto.subtle.generateKey(
      {
        name: "HMAC",
        hash: {name: "SHA-512"}
      },
      true,
      ["sign", "verify"]
    );

    // AES-GCM encryption key generation
    let key = window.crypto.subtle.generateKey(
      {
        name: "AES-GCM",
        length: 256,
      },
      true,
      ["encrypt", "decrypt"]
    );
  

Performance

• provides a monotonic clock i.e. a clock that is always increasing, Performance API defines a DOMHighResTimeStamp type rather than using the Date.now() interface
• supports a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource)
• DOMHighResTimeStamp - high resolution point in time, is a double and is used by the performance interfaces, value could be a discrete point in time or the difference in time between two discrete points in time, unit is milliseconds and should be accurate to 5 µs (microseconds), if the browser is unable to provide a time value accurate to 5 microseconds, time in milliseconds accurate to a millisecond, to offer protection against timing attacks and fingerprinting, the precision of time stamps might get rounded depending on browser settings, starting time can be either a specific time determined by the script for a site or app, or the time origin, time origin is a standard time which is considered to be the beginning of the current document lifetime
  • first one loaded in the Window, browser context was created
  • during the process of unloading the previous document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable
  • if neither of the above determines the time origin, then the time origin is the time at which the navigation responsible for creating the window current Document took place
  • for workers is time of creation
  • in all other cases, the time origin is undefined
• performance entry type names
  • frame, navigation - URL - document address
  • resource - URL - resolved URL of the requested resource, doesnt change even if the request is redirected
  • mark - string - name used when the mark was created by calling performance.mark()
  • measure - string - name used when the measure was created by calling performance.measure()
  • paint - string - either 'first-paint' or 'first-contentful-paint'
• use performance tools in browser !

    var performance_tests = document.getElementById("performance_tests");
    var performance_obj = null;
    var m1, m2, measure_marks; // for now() cases

    // performance.timeOrigin
    // performance.clearResourceTimings()
    // performance.setResourceTimingBufferSize(max_perf_entries)

    if ('serviceWorker' in navigator) {
      var performance_obj = window.performance;
    } else {
      performance_tests.innerHTML="PerformanceAPI not supported"
    }

    function create_mark(name) {
      performance.mark(name);
    }
    function mark_clear(name) {
      performance.clearMarks(name);
    }
    function create_measure(name) {
      performance.measure(
        name,
        'm1',
        'm2'
      );
    }
    function show_measure(name) {
      performance_tests.innerHTML="";
      var measures = performance.getEntriesByName('measure_marks');
      var measure = measures[0];
      if(!measure){performance_tests.innerHTML="not found...";return;}
      performance_tests.innerHTML =
        "measure.duration: " + measure.duration + "ms" +
        "measure.entryType: " + measure.entryType +
        "measure.name: " + measure.name +
        "measure.startTime: " + measure.startTime;
    }
    function measure_clear(name) {
      if (name === undefined) {
        performance.clearMeasures(); return;
      }
      performance.clearMeasures(name);
    }

    function show_performance_json() {
      performance_tests.innerHTML="";
      var pj = performance.toJSON();
      utils_show_obj(pj, performance_tests);
      performance_tests.innerHTML+=JSON.stringify(pj)+" ]";
    }

    function show_entry(obj) {
      var properties = ["name", "entryType", "startTime", "duration"];
      // var methods = ["toJSON"];
      for (var i=0; i < properties.length; i++) {
        // check each property
        var supported = properties[i] in obj;
        if (supported)
          performance_tests.innerHTML+=properties[i] +
          " = " + obj[properties[i]];
        else
          performance_tests.innerHTML+=properties[i] +
          " = Not supported";
      }
      // for (var i=0; i < methods.length; i++) {
      //   // check each method
      //   var supported = typeof obj[methods[i]] == "function";
      //   if (supported) {
      //     var js = obj[methods[i]]();
      //     performance_tests.innerHTML+=methods[i] + "() = " +
      //     JSON.stringify(js);
      //   } else {
      //     performance_tests.innerHTML+=methods[i] + " = Not supported";
      //   }
      // }
    }

    function run_tests() {
      mark_clear();
      measure_clear();
      performance_tests.innerHTML = "tests ...";

      var t0 = performance.now();
      do_work(7654321+utils_randomInt());
      var t1 = performance.now();
      performance_tests.innerHTML+="measurement with now(): "+(t1-t0)+"ms";

      performance.mark("pm1_start");
      do_work(54321+utils_randomInt());
      performance.mark("pm1_end");

      performance.mark("pm2_start");
      do_work(654321+utils_randomInt());
      performance.mark("pm2_end");

      performance.mark("pm3_start");
      do_work(7654321+utils_randomInt());
      performance.mark("pm3_end");

      // // specific entries
      // p = performance.getEntries({name : "Begin", entryType: "mark"});
      // for (var i=0; i < p.length; i++) {
      //   performance_tests.innerHTML += "Begin[" + i + "]";
      // }

      // "mark" entries
      performance_tests.innerHTML += "mark only entries:"
      var p = performance.getEntriesByType("mark");
      for (var i=0; i < p.length; i++) {
        performance_tests.innerHTML+=p[i].name+" [ start:"+p[i].startTime+
        " duration:"+p[i].duration+" ]";
      }

      // // "mark" entries named "Begin"
      // p = performance.getEntriesByName("Begin", "mark");
      // for (var i=0; i < p.length; i++) {
      //   performance_tests.innerHTML += "Mark and Begin entry[" + i + "]: name = "
      //     + p[i].name +
      //     "startTime = " + p[i].startTime +
      //     "duration  = " + p[i].duration;
      // }

      // each entry
      performance_tests.innerHTML += "all entries:"
      var p = performance.getEntries();
      for (var i=0; i < p.length; i++) {
        performance_tests.innerHTML+=p[i].name+" [ start:"+p[i].startTime+
        " duration:"+p[i].duration+" ]";
      }
    }
    function do_work(cicles) {
      for (let index = 0; index < cicles; index++) {
        var tests = (index+index)+cicles+(utils_randomInt()*cicles+cicles);
        tests*tests;
      }
    }

    function show_navigation() {
      performance_tests.innerHTML=""
      // Use getEntriesByType() to just get the "navigation" events
      var perfEntries = performance.getEntriesByType("navigation");
      for (var i=0; i < perfEntries.length; i++) {
        var p = perfEntries[i];
        performance_tests.innerHTML+="navigation entry [" + i + "]";

        // dom Properties
        performance_tests.innerHTML+="DOM content loaded = " +
          (p.domContentLoadedEventEnd - p.domContentLoadedEventStart);
        performance_tests.innerHTML+="DOM complete = " +
          p.domComplete;
        performance_tests.innerHTML+="DOM interactive = " +
          p.interactive;

        // document load and unload time
        performance_tests.innerHTML+="document load = " +
          (p.loadEventEnd - p.loadEventStart);
        performance_tests.innerHTML+="document unload = " +
          (p.unloadEventEnd - p.unloadEventStart);

        // other properties
        performance_tests.innerHTML+="type = " +
          p.type;
        performance_tests.innerHTML+="redirectCount = " +
          p.redirectCount;
      }
    }

    // interupt current flow !!!
    // var observer = new PerformanceObserver((list, obj) => {
    //   performance_tests.innerHTML="marks created";
    //   var entries = list.getEntries();
    //   for (var i=0; i < entries.length; i++) {
    //     show_entry(entries[i],performance_tests);
    //   }
    //   // observer.disconnect(); // interupt observing
    // });
    // observer.observe({entryTypes: ["mark"]});
    // // var records = observer.takeRecords();
    // // console.log(records[0].name);
    // // console.log(records[0].startTime);
    // // console.log(records[0].duration);
    // var observer2 = new PerformanceObserver((list, observer) => {
    //   performance_tests.innerHTML="measure created";
    //   var entries = list.getEntries();
    //   for (var i=0; i < entries.length; i++) {
    //     show_entry(entries[i],performance_tests);
    //   }
    // });
    // observer2.observe({entryTypes: ["measure"]});

    function show_resources() {
      performance_tests.innerHTML="";
      var p = performance.getEntriesByType("resource");
      for (var i=0; i < p.length; i++) {
        show_entry(p[i]);
        resource_props(p[i]);
      }
    }
    function resource_props(perfEntry) {
      // Print timestamps of the *start and *end properties
      properties = [
        "requestStart",
        "domainLookupStart",
        "domainLookupEnd",
        "connectStart",
        "responseStart",
        "responseEnd",
        "fetchStart",
        "connectEnd",
        "transferSize",
        "encodedBodySize",
        "decodedBodySize",
        "redirectStart",
        "redirectEnd",
        "secureConnectionStart",
        "serverTiming",
        "workerStart",
        "nextHopProtocol",
        "initiatorType"
      ];
      for (var i=0; i < properties.length; i++) {
        // check each property
        var supported = properties[i] in perfEntry;
        if (supported) {
          var value = perfEntry[properties[i]];
          performance_tests.innerHTML+=properties[i] + " = " + value;
        } else {
          performance_tests.innerHTML+=properties[i] + " = NOT supported";
        }
      }
    }
  

• Performance provides access to performance-related information for the current page, part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API, obtained by calling the Window.performance
  • properties
  • timeOrigin - high resolution timestamp of the start time of the performance measurement
  • methods
  • clearMarks([name]) - removes mark from the browser performance entry buffer
  • clearMeasures([name]) - removes measure from the browser performance entry buffer
  • clearResourceTimings() - removes all performance entries with a entryType of "resource" from the browser performance data buffer
  • getEntries({ name:"entry_name", entryType:frame|navigation|resource|mark|measure|paint }) - returns a list of PerformanceEntry objects based on the given filter
  • getEntriesByName( name [,frame|navigation|resource|mark|measure|paint] ) - returns a list of PerformanceEntry objects based on the given name and entry type
  • getEntriesByType( frame|navigation|resource|mark|measure|paint ) - returns a list of PerformanceEntry objects of the given entry type
  • mark(name) - creates a timestamp in the browser performance entry buffer with the given name
  • measure( name [,startMark,endMark] ) - creates a named timestamp in the browser performance entry buffer between two specified marks (known as the start mark and end mark, respectively)
  • now() - returns a DOMHighResTimeStamp representing the number of milliseconds elapsed since beginning of the current document lifetime
  • setResourceTimingBufferSize(max_perf_entries) - sets the browser resource timing buffer size to the specified number of "resource" type performance entry objects
  • toJSON() - jsonizer returning a json object representing the Performance object, NOT available to workers
  • event
  • resourcetimingbufferfull - when the browser resource timing performance buffer is full
• PerformanceEntry encapsulates a single performance metric that is part of the performance timeline, can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application, are also created in indirect ways such as loading a resource (such as an image), will always be one of the following subtypes: PerformanceMark, PerformanceMeasure, PerformanceFrameTiming, PerformanceNavigationTiming, PerformanceResourceTiming, PerformancePaintTiming
  • properties
  • name - value that further specifies the value returned by the PerformanceEntry.entryType property, depends on the subtype: URL, string
  • entryType - type of performance metric: frame|navigation|resource|mark|measure|paint
  • startTime - starting time for the performance metric
  • duration - time value of the duration of the performance event
  • methods
  • toJSON() - JSON representation of the PerformanceEntry object.
• PerformanceFrameTiming is an abstract interface that provides frame timing data about the browser event loop, a frame represents the amount of work a browser does in one event loop such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc.., frame rate of 60fps (frames per second) for a 60Hz refresh rate is the target for a good responsive user experience. This means the browser should process a frame in about 16.7ms, an application can register a PerformanceObserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event, this information can be used to help identify areas that take too long to provide a good user experience
  • properties (extends PerformanceEntry for "frame")
• PerformanceMark
• PerformanceMeasure
• PerformanceObserver is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser performance timeline
  • new PerformanceObserver(callback)
  • methods
  • takeRecords() - current list of performance entries stored in the performance observer, emptying it out
  • disconnect() - stop the performance observer from receiving any performance entry events
  • observe({entryTypes: ["frame|navigation|resource|mark|measure|paint",...]}) - specify the set of PerformanceEntry.entryType to observe
  • PerformanceResourceTiming methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application resources
  
  Back to Main Page