Index - Learn web development
49 asynchronous javascript beginner, codingscripting, guide, javascript, landing, promises, async, asynchronous, await, callbacks, requestanimationframe, setinterval, settimeout in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
... 50 choosing the right approach beginner, intervals, javascript, learn, optimize, promises, async, asynchronous, await, requestanimationframe, setinterval, settimeout, timeouts to finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate.
... 54 introducing asynchronous javascript beginner, codingscripting, guide, introducing, javascript, learn, promises, async, asynchronous, await, callbacks in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
... 55 making asynchronous programming easier with async and await beginner, codingscripting, guide, javascript, learn, promises, async, asynchronous, await more recent additions to the javascript language are async functions and the await keyword, part of the so-called ecmascript 2017 javascript edition (see ecmascript next support in mozilla).

ContentIndex - Web APIs
// reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index.
... id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index a...
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry ...
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister content from index await registration.index.delete(article.id); } all the above methods are available within the scope of the service worker.

Content Index API - Web APIs
// reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index.
... id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index a...
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry ...
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister content from index await registration.index.delete(article.id); } all the above methods are available within the scope of the service worker.

Using Fetch - Web APIs
// example post method implementation: async function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post, put, delete, etc.
... async function* maketextfilelineiterator(fileurl) { const utf8decoder = new textdecoder('utf-8'); const response = await fetch(fileurl); const reader = response.body.getreader(); let { value: chunk, done: readerdone } = await reader.read(); chunk = chunk ?
... utf8decoder.decode(chunk) : ''; const re = /\n|\r|\r\n/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({ value: chunk, done: readerdone } = await reader.read()); chunk = remainder + (chunk ?
... utf8decoder.decode(chunk) : ''); startindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } async function run() { for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } } run(); checking that the fetch was successful a fetch() promise will reject with a typeerror when a network error is encountered or cors is misconfigured on the server-side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example.

PaymentResponse.retry() - Web APIs
async function handlepayment() { const payrequest = new paymentrequest(methoddata, details, options); try { let payresponse = await payrequest.show(); while (payresponse has errors) { /* let the user edit the payment information, wait until they submit */ await response.retry(); } await payresponse.complete("success"); } catch(err) { /* handle the exception */ } } examples try { await paymentrequest.retry(errorfields); } catch (domexception err) { ...
... } async function dopaymentrequest() { const request = new paymentrequest(methoddata, details, options); const response = await request.show(); await recursivevalidate(request, response); await response.complete("success"); } // keep validating until the data looks good!
... async function recursivevalidate(request, response) { const promisestofixthings = []; const errors = await validate(request, response); if (!errors) { return; } if (errors.shippingaddress) { // "shippingaddresschange" fired at request object const promise = fixfield(request, "shippingaddresschange", shippingvalidator); promisestofixthings.push(promise); } if (errors.payer) { // "payerdetailchange" fired at response object const promise = fixfield(response, "payerdetailchange", payervalidator); promisestofixthings.push(promise); } await promise.all([response.retry(errors), ...promisestofixthings]); await recursivevalidate(request, response); } function fixfield(requestorresponse, event, validator) { return new promise(resolve => { // browse...
... requestorresponse.addeventlistener(event, async function listener(ev) { const promisetovalidate = validator(requestorresponse); ev.updatewith(promisetovalidate); const errors = await promisetovalidate; if (!errors) { // yay!

SubtleCrypto.deriveKey() - Web APIs
name: "ecdh", public: publickey }, privatekey, { name: "aes-gcm", length: 256 }, false, ["encrypt", "decrypt"] ); } async function agreesharedsecretkey() { // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely let aliceskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivekey"] ); let bobskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivekey"] ); // alice then generates a secret key using her private key and bob's public key.
... let alicessecretkey = await derivesecretkey(aliceskeypair.privatekey, bobskeypair.publickey); // bob generates the same secret key using his private key and alice's public key.
... let bobssecretkey = await derivesecretkey(bobskeypair.privatekey, aliceskeypair.publickey); // alice can then use her copy of the secret key to encrypt a message to bob.
...*/ function getkeymaterial() { let password = window.prompt("enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await getkeymaterial(); let key = await window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "encrypt", "decrypt" ] ); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } s...

SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/ve...
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "spki", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin public key-----\n${exportedasbase64}\n-----end public key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate an encrypt/d...
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "jwk", key ); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = json.stringify(exported, null, " "); } /* generate a sign/verify key pair, then set up an event listener on the "export" button.

SubtleCrypto.sign() - Web APIs
*/ function getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "rsassa-pkcs1-v1_5", privatekey, encoded ); rsa-pss this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...*/ 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 ); ecdsa this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...*/ function getmessageencoding() { const messagebox = document.queryselector(".ecdsa #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "ecdsa", hash: {name: "sha-384"}, }, privatekey, encoded ); hmac this code fetches the contents of a text box, encodes it for signing, and signs it with a secret key.
...*/ function getmessageencoding() { const messagebox = document.queryselector(".hmac #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "hmac", key, encoded ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.sign()' in that specification.

SubtleCrypto.unwrapKey() - Web APIs
get the key material (user-supplied password) const keymaterial = await getkeymaterial(); // 2 initialize the salt parameter.
...get the unwrapping key const unwrappingkey = await getunwrappingkey(); // 2.
...get the key material (user-supplied password) const keymaterial = await getkeymaterial(); // 2 initialize the salt parameter.
...get the unwrapping key const unwrappingkey = await getunwrappingkey(); // 2.

SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ 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 ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ async function verifymessage(key) { const signaturevalue = document.queryselector(".hmac .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "hmac", key, signature, encoded ); signaturevalue.classlist.add(result ?

SubtleCrypto.wrapKey() - Web APIs
*/ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const wrappingkey = await getkey(keymaterial, salt); return window.crypto.subtle.wrapkey( "raw", keytowrap, wrappingkey, "aes-kw" ); } /* generate an encrypt/decrypt secret key, then wrap it.
...*/ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const wrappingkey = await getkey(keymaterial, salt); iv = window.crypto.getrandomvalues(new uint8array(12)); return window.crypto.subtle.wrapkey( "pkcs8", keytowrap, wrappingkey, { name: "aes-gcm", iv: iv } ); } /* generate a sign/verify key pair, then wrap the private key.
...*/ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const wrappingkey = await getkey(keymaterial, salt); iv = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.wrapkey( "spki", keytowrap, wrappingkey, { name: "aes-cbc", iv: iv } ); } /* generate an encrypt/decrypt key pair, then wrap it.
...*/ async function wrapcryptokey(keytowrap) { // get the key encryption key const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const wrappingkey = await getkey(keymaterial, salt); iv = window.crypto.getrandomvalues(new uint8array(12)); return window.crypto.subtle.wrapkey( "jwk", keytowrap, wrappingkey, { name: "aes-gcm", iv: iv } ); } /* generate a sign/verify key pair, then wrap the private key */ wind...

Audio for Web games - Game development
we can do this with javascript's async/await functionality.
... const trackels = document.queryselectorall('li'); we want to make sure each file has loaded and been decoded into a buffer before we use it, so let's create an async function to allow us to do this: async function getfile(filepath) { const response = await fetch(filepath); const arraybuffer = await response.arraybuffer(); const audiobuffer = await audioctx.decodeaudiodata(arraybuffer); return audiobuffer; } we can then use the await operator when calling this function, which ensures that we can run subsequent code when it has finished executing.
... let's create another async function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when each file is loaded and buffered: async function loadfile(filepath) { const track = await getfile(filepath); return track; } let's also create a playtrack() function, which we can call once a file has been fetched.

PaymentAddress - Web APIs
const response = await request.show(); // process payment.
... const json = response.tojson(); const httpresponse = await fetch("/pay/", { method: "post", body: json }); const result = httpresponse.ok ?
... "success" : "failure"; await response.complete(result); } dopaymentrequest(); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

PaymentRequest.canMakePayment() - Web APIs
}) canpay = await paymentrequest.canmakepayment(); returns a promise to a boolean that resolves to true if the user agent supports any of the payment methods supplied when instantiating the request using the paymentrequest constructor.
... if (await supportsapplepay) { // show apple pay logo, for instance return; } // otherwise...
... let's see if we can use basic card const supportsbasiccard = await new paymentrequest( [{ supportedmethods: "basic-card" }], details ).canmakepayment(); if (supportsbasiccard) { // show basic card support return; } // otherwise, make payments using html form element } specifications specification status comment payment request apithe definition of 'canmakepayment()' in that specification.

ReadableStreamDefaultReader.read() - Web APIs
async function* maketextfilelineiterator(fileurl) { const utf8decoder = new textdecoder("utf-8"); let response = await fetch(fileurl); let reader = response.body.getreader(); let {value: chunk, done: readerdone} = await reader.read(); chunk = chunk ?
... utf8decoder.decode(chunk) : ""; let re = /\r\n|\n|\r/gm; let startindex = 0; let result; for (;;) { let result = re.exec(chunk); if (!result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({value: chunk, done: readerdone} = await reader.read()); chunk = remainder + (chunk ?
... utf8decoder.decode(chunk) : ""); startindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } specifications specification status comment streamsthe definition of 'read()' in that specification.

Using the Screen Capture API - Web APIs
starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, ...
... async function startcapture() { logelem.innerhtml = ""; try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); dumpoptionsinfo(); } catch(err) { console.error("error: " + err); } } after clearing the contents of the log in order to get rid of any leftover text from the previous attempt to connect, startcapture() calls getdisplaymedia(), passing into it the constraints object defined by displaymediaoptions.
... using await, the following line of code does not get executed until after the promise returned by getdisplaymedia() resolves.

WebGL best practices - Web APIs
ct(); return; } if (res == gl.timeout_expired) { settimeout(test, interval_ms); return; } resolve(); } test()); }); } async function getbuffersubdataasync( gl, target, buffer, srcbyteoffset, dstbuffer, /* optional */ dstoffset, /* optional */ length) { const sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.flush(); await clientwaitasync(gl, sync, 0, 10); gl.deletesync(sync); gl.bindbuffer(target, buffer); gl.getbuffersubdata(target, srcbyteoffset, dstbuffer, dstoffset, length); gl.bindbuffer(target, null); return dest; } async function readpixelsasync(gl, x, y, w, h, format, type, dest) { const buf = gl.createbuffer(); gl.bindbuffer(gl.pixel_pack_buffer, buf); gl.bufferdata(gl.pixel_pack_buffer...
..., dest.bytelength, gl.stream_read); gl.readpixels(x, y, w, h, format, type, 0); gl.bindbuffer(gl.pixel_pack_buffer, null); await getbuffersubdataasync(gl, gl.pixel_pack_buffer, buf, 0, dest); gl.deletebuffer(buf); return dest; } canvas and webgl-related some tips are relevent to webgl, but deal with other apis.
...this can be used to build an async-but-accurate function: window.getdevicepixelsize = window.getdevicepixelsize || async function(elem) { await new promise(fn_resolve => { const observer = new resizeobserver(entries => { for (const cur of entries) { const dev_size = cur.devicepixelcontentboxsize; const ret = { width: dev_size[0].inlinesize, height: dev_size[0].blocksize, }; fn_resolve(ret); observer.disconnect(); return; ...

Using Promises - JavaScript
this is very much modeled after how synchronous code works: try { const result = syncdosomething(); const newresult = syncdosomethingelse(result); const finalresult = syncdothirdthing(newresult); console.log(`got the final result: ${finalresult}`); } catch(error) { failurecallback(error); } this symmetry with asynchronous code culminates in the async/await syntactic sugar in ecmascript 2017: async function foo() { try { const result = await dosomething(); const newresult = await dosomethingelse(result); const finalresult = await dothirdthing(newresult); console.log(`got the final result: ${finalresult}`); } catch(error) { failurecallback(error); } } it builds on promises, e.g.
...duce(applyasync, promise.resolve(x)); the composeasync() function will accept any number of functions as arguments, and will return a new function that accepts an initial value to be passed through the composition pipeline: const transformdata = composeasync(func1, func2, func3); const result3 = transformdata(data); in ecmascript 2017, sequential composition can be done more simply with async/await: let result; for (const f of [func1, func2, func3]) { result = await f(result); } /* use last result (i.e.
... using async/await addresses most, if not all of these problems—the tradeoff being that the most common mistake with that syntax is forgetting the await keyword.

Introducing asynchronous JavaScript - Learn web development
note however that synchronous try...catch won't work with promises, although it will work with async/await, as you'll learn later on.
... previous overview: asynchronous next in this module general asynchronous programming concepts introducing asynchronous javascript cooperative asynchronous javascript: timeouts and intervals graceful asynchronous programming with promises making asynchronous programming easier with async and await choosing the right approach ...

Performance best practices for Firefox front-end engineers
we could do it this way: async function nodeisdisplaynone(node) { let display = await window.promisedocumentflushed(() => { // do _not_ under any circumstances write to the dom in one of these // callbacks!
... here's an example: async function matchwidth(elem, otherelem) { let width = await window.promisedocumentflushed(() => { // do _not_ under any circumstances write to the dom in one of these // callbacks!

BluetoothCharacteristicProperties - Web APIs
let device = await navigator.bluetooth.requestdevice({ filters: [{services: ['heart_rate']}] }); let gatt = await device.gatt.connect(); let service = await gatt.getprimaryservice('heart_rate'); let characteristic = await service.getcharacteristic('heart_rate_measurement'); if (characteristic.properties.notify) { characteristics.addeventlistener('characteristicvaluechanged', function(event) { console.
...log(`received heart rate measurement: ${event.target.value}`); } await characteristic.startnotifications(); } specifications specification status comment web bluetooththe definition of 'bluetoothcharacteristicproperties' in that specification.

Clients - Web APIs
addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
... client.focus(); chatclient = client; break; } } // if we didn't find an existing chat window, // open a new one: if (!chatclient) { chatclient = await clients.openwindow('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe definition of 'clients' in that specification.

ClipboardItem - Web APIs
async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } reading from the clipboard here we're returning all items on the clipboard via the clipboard.read() method.
... async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.

ConvolverNode - Web APIs
let audioctx = new window.audiocontext(); async function createreverb() { let convolver = audioctx.createconvolver(); // load impulse response from file let response = await fetch("path/to/impulse-response.wav"); let arraybuffer = await response.arraybuffer(); convolver.buffer = await audioctx.decodeaudiodata(arraybuffer); return convolver; } ...
... let reverb = await createreverb(); // someotheraudionode -> reverb -> destination someotheraudionode.connect(reverb); reverb.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'convolvernode' in that specification.

HTMLImageElement.complete - Web APIs
these photos may be very large, so you don't want to wait for them to load, so your code uses async/await to load the images in the background.
...ryselector("#lightbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".toolbar"); async function loadimage(url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src = url; }); } async function lightbox(url) { lightboxelem.style.display = "block"; await loadimage("https://somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabled = false; } /* ...

HTMLMediaElement.srcObject - Web APIs
const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video = document.createelement('video'); video.srcobject = mediastream; in this example, a new mediasource is assigned to a newly-created <video> element.
... const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video = document.createelement('video'); if ('srcobject' in video) { video.srcobject = mediastream; } else { // avoid using this in new browsers, as it is going away.

NavigationPreloadManager - Web APIs
await self.registration.navigationpreload.enable(); } }()); }); using a preloaded response the following example shows the implementation of a fetch event that uses a preloaded response.
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.

PaymentRequest: merchantvalidation event - Web APIs
request.addeventlistener("merchantvalidation", event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }, false); }; const response = await request.show(); how merchant server handles the validation depends on the server implementation and payment method documentation.
... you can also use the onmerchantvalidation event handler property to set up the handler for this event: request.onmerchantvalidation = event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }); }; const response = await request.show(); for more information, see merchant validation in payment processing concepts.

PaymentResponse.onpayerdetailchange - Web APIs
ame = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: re...
...sponse.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); specifications specification status comment payment request apithe definition of 'onpayerdetailchange' in that specification.

PaymentResponse: payerdetailchange event - Web APIs
ame = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: re...
...sponse.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); addeventlistener equivalent you could also set up the event handler using the addeventlistener() method: response.addeventlistener("payerdetailchange", async ev => { ...

RTCPeerConnection.addTrack() - Web APIs
here's an example showing a function that uses getusermedia() to obtain a stream from a user's camera and microphone, then adds each track from the stream to the peer connection, without specifying a stream for each track: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track); } } the result is a set of tracks being sent to the remote peer, with no stream associations.
... for example, consider this function that an application might use to begin streaming a device's camera and microphone input over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.srcobject = stream; this sets the video element's current stream to the one that contains the ...

RTCPeerConnection.setLocalDescription() - Web APIs
pc.addeventlistener("negotiationneeded", async (event) => { await pc.setlocaldescription(); signalremotepeer({ description: pc.localdescription }); }); other than error handling, that's about it!
... async function handlenegotiationneededevent() { try { await offer = pc.createoffer(); pc.setlocaldescription(offer); signalremotepeer({ description: pc.localdescription }); } catch(err) { reporterror(err); } } this begins by creating an offer by calling createoffer(); when that succeeds, we call setlocaldescription().

RTCRemoteOutboundRtpStreamStats.localId - Web APIs
let startreport; async function networkteststart(pc) { if (pc) { startreport = await pc.getstats(); } } given an rtcpeerconnection, pc, this calls its getstats() method to obtain a statistics report object, which it stores in startreport for use once the end-of-test data has been collected by networkteststop().
... async function networkteststop(pc) { if (pc) { let statsbox = document.queryselector(".stats-box"); let endreport = await pc.getstats(); for (let endremoteoutbound of endreport.values()) { if (endremoteoutbound.type === "remote-outbound-rtp") { let startremoteoutbound = startreport.get(endremoteoutbound.id); if (startremoteoutbound) { let startinboundstats = findreportentry(startreport, "remoteid", startremoteoutbound.id); let endinboundstats = findreportentry(endrepor...

Screen Wake Lock API - Web APIs
// create a reference for the wake lock let wakelock = null; // create an async function to request a wake lock const requestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // change up our interface to reflect wake lock active statuselem.textcontent = 'wake lock is active!'; } catch (err) { // if wake lock request fails - usually system related, such as battery statuselem.textcontent = `${err.name}, ${err.message}`; } } releasing wake lock the following example shows how to release the previously acqui...
... document.addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all together you can find the complete code on github here.

SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { shareds...
...*/ async function getderivedbits() { const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bi...

SubtleCrypto.digest() - Web APIs
the inhabitants refer to it as the planet earth.'; async function digestmessage(message) { const encoder = new textencoder(); const data = encoder.encode(message); const hash = await crypto.subtle.digest('sha-256', data); return hash; } const digestbuffer = await digestmessage(text); console.log(digestbuffer.bytelength); converting a digest to a hex string the digest is returned as an arraybuffer, but for comparison and display digests are often represented as hex strings.
...the inhabitants refer to it as the planet earth.'; async function digestmessage(message) { const msguint8 = new textencoder().encode(message); // encode as (utf-8) uint8array const hashbuffer = await crypto.subtle.digest('sha-256', msguint8); // hash the message const hasharray = array.from(new uint8array(hashbuffer)); // convert buffer to byte array const hashhex = hasharray.map(b => b.tostring(16).padstart(2, '0')).join(''); // convert bytes to hex string return hashhex; } const digesthex = await digestmessage(text); console.log(digesthex); specifications specification ...

USBDevice.clearHalt() - Web APIs
while (true) { let result = await data.transferin(1, 6); if (result.data && result.data.bytelength === 6) { console.log('channel 1: ' + result.data.getuint16(0)); console.log('channel 2: ' + result.data.getuint16(2)); console.log('channel 5: ' + result.data.getuint16(4)); } if (result.status === 'stall') { console.warn('endpoint stalled.
... clearing.'); await device.clearhalt('in', 1); } } specifications specification status comment webusbthe definition of 'clearhalt()' in that specification.

WebGLRenderingContext.makeXRCompatible() - Web APIs
*/ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { try { await gl.makexrcompatible(); } catch(err) { switch(err) { case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; ...
... } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which starts the game normally and the other which starts the game in vr mode.

WebGLRenderingContext.vertexAttribPointer() - Web APIs
//load geometry with fetch() and response.json() const response = await fetch('assets/geometry.json'); const vertices = await response.json(); //create array buffer const buffer = new arraybuffer(20 * vertices.length); //fill array buffer const dv = new dataview(buffer); for (let i = 0; i < vertices.length; i++) { dv.setfloat32(20 * i, vertices[i].position[0], true); dv.setfloat32(20 * i + 4, vertices[i].position[1], true); dv.setfloat32(20 * i + 8, vertices[i...
...then we could load the binary file and interpret it as an array buffer: const response = await fetch('assets/geometry.bin'); const buffer = await response.arraybuffer(); consume array buffer with webgl first, we create a new vertex buffer object (vbo) and supply it with our array buffer: //bind array buffer to a vertex buffer object const vbo = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vbo); gl.bufferdata(gl.array_buffer, buffer, gl.static_draw); then, we specify the memory l...

Writing WebSocket client applications - Web APIs
to do this, simply call the websocket object's send() method for each message you want to send: examplesocket.send("here's some text that the server is urgently awaiting!"); you can send data as a string, blob, or arraybuffer.
...we can at least be sure that attempting to send data only takes place once a connection is established by defining an onopen event handler to do the work: examplesocket.onopen = function (event) { examplesocket.send("here's some text that the server is urgently awaiting!"); }; using json to transmit objects one handy thing you can do is use json to send reasonably complex data to the server.

Advanced techniques: Creating and sequencing audio - Web APIs
loading the sample we want to make sure our file has loaded and been decoded into a buffer before we use it, so let's create an async function to allow us to do this: async function getfile(audiocontext, filepath) { const response = await fetch(filepath); const arraybuffer = await response.arraybuffer(); const audiobuffer = await audiocontext.decodeaudiodata(arraybuffer); return audiobuffer; } we can then use the await operator when calling this function, which ensures that we can only run subsequent code when it has finished executing.
... let's create another async function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when this file is loaded and buffered: async function setupsample() { const filepath = 'dtmf.mp3'; const sample = await getfile(audioctx, filepath); return sample; } note: you can easily modify the above function to take an array of files and loop over them to load more than one sample.

Symbol.asyncIterator - JavaScript
if this property is set on an object, it is an async iterable and can be used in a for await...of loop.
... const myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected output: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations.

async function expression - JavaScript
examples simple example function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); }; const add = async function(x) { // async function expression assigned to a variable let a = await resolveafter2seconds(20); let b = await resolveafter2seconds(30); return x + a + b; }; add(10).then(v => { console.log(v); // prints 60 after 4 seconds.
... }); (async function(x) { // async function expression used as an iife let p_a = resolveafter2seconds(20); let p_b = resolveafter2seconds(30); return x + await p_a + await p_b; })(10).then(v => { console.log(v); // prints 60 after 2 seconds.

JavaScript reference - JavaScript
webassembly.linkerror webassembly.runtimeerror statements javascript statements and declarations control flowblock break continue empty if...else switch throw try...catch declarations var let const functions and classes function function* async function return class iterations do...while for for each...in for...in for...of for await...of while other debugger import label with expressions and operators javascript expressions and operators.
... primary expressionsthis function class function* yield yield* async function await [] {} /ab+c/i ( ) null left-hand-side expressions property accessors new new.target super ...obj increment & decrement a++ a-- ++a --a unary operators delete void typeof + - ~ !

Compiling an Existing C Module to WebAssembly - WebAssembly
luckily, the canvas api has canvasrenderingcontext2d.getimagedata — that gives you an uint8clampedarray containing the image data in rgba: async function loadimage(src) { // load image const imgblob = await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas = document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only...
...after exposing the function to javascript using cwrap, you can use that number to find the start of our buffer and copy the image data: const api = { version: module.cwrap('version', 'number', []), create_buffer: module.cwrap('create_buffer', 'number', ['number', 'number']), destroy_buffer: module.cwrap('destroy_buffer', '', ['number']), }; const image = await loadimage('./image.jpg'); const p = api.create_buffer(image.width, image.height); module.heap8.set(image.data, p); // ...

Enhanced Extension Installation - Archive of obsolete content
finalization for themes, the item is immediately installed fully, rather than awaiting the next restart, since themes do not supply xpcom components, preferences defaults etc.

CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

Index - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

The new nsString class implementation (1999) - Archive of obsolete content
(these are stubbed out today awaiting their review and implementation).

ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
includes() (firefox 43) exponentiation operator (firefox 52) ecmascript 2017 object.values() (firefox 47) object.entries() (firefox 47) string.prototype.padstart() (firefox 48) string.prototype.padend() (firefox 48) object.getownpropertydescriptors() (firefox 50) async functions async function (firefox 52) async function expression (firefox 52) asyncfunction (firefox 52) await (firefox 52) trailing commas in function parameter lists (firefox 52) ecmascript 2018 spread in object literals and rest parameters (firefox 55) for await...of (firefox 57) global_objects/sharedarraybuffer (firefox 57, with flags) global_objects/promise/finally (firefox 58) global_objects/regexp/dotall (not yet implemented; in other browsers) regexp lookbehind assertions (not yet ...

Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

General asynchronous programming concepts - Learn web development
in this module general asynchronous programming concepts introducing asynchronous javascript cooperative asynchronous javascript: timeouts and intervals graceful asynchronous programming with promises making asynchronous programming easier with async and await choosing the right approach ...

Graceful asynchronous programming with Promises - Learn web development
note: you can make further improvements with async/await syntax, which we'll dig into in the next article.

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
previous overview: asynchronous next in this module general asynchronous programming concepts introducing asynchronous javascript cooperative asynchronous javascript: timeouts and intervals graceful asynchronous programming with promises making asynchronous programming easier with async and await choosing the right approach ...

Asynchronous JavaScript - Learn web development
making asynchronous programming easier with async and await promises can be somewhat complex to set up and understand, and so modern browsers have implemented async functions and the await operator.

Server-side web frameworks - Learn web development
first-class await mechanism.

Ember resources and troubleshooting - Learn web development
using the design patterns provided by the framework, a route using fetch() would look something like this: import route from '@ember/routing/route'; export default class myroute extends route { async model() { let response = await fetch('some/url/to/json/data'); let json = await response.json(); return { data: json }; } } see more information on specifying the route's model here.

Getting started with Svelte - Learn web development
<main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
first of all, import tick at the top of the <script> section alongside your existing import: import { tick } from 'svelte' next, call tick() with await from an async function; update onedit() like so: async function onedit() { editing = true // enter editing mode await tick() nameel.focus() } if you try it now you'll see that everything works as expected.

AddonManager
this doesn't include add-ons that were awaiting installation the last time the application was running.

Mozilla Development Strategies
having parallel trees should allow you to work on other items while you are awaiting reviews.

TPS Tests
for example, consider the first action in the phase above: [bookmarks.add, bookmarks_initial] you could rewrite this as a custom function so as to add some custom logging: [async () => { logger.loginfo("adding bookmarks_initial"); await bookmarks.add(bookmarks_initial); }] note that this is probably best used for debugging, and new tests that want custom behavior should add it to the tps addon so that other tests can use it.

AudioContext.close() - Web APIs
}); await audioctx.close(); returns a promise that resolves with void.

AudioParamDescriptor - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(...

AudioWorkletGlobalScope.registerProcessor - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const node = new audioworkletnode(audiocontext, 'test-processor') node.connect(audiocontext.destination) specifications specification status comment web audio apithe definition of 'registerprocessor()' in that specification.

AudioWorkletGlobalScope - Web APIs
we should see the output of console.log calls in the console: const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor') testnode.connect(audiocontext.destination) specifications specification status comment web audio apithe definition of 'audioworkletglobalscope' in that specification.

AudioWorkletNode.parameters - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(...

AudioWorkletNode.port - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('ping-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(a...

AudioWorkletNode - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status comment web audio apithe definition of 'audioworkletnode' in that specification.

AudioWorkletProcessor() - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor', { processoroptions: { someusefulvariable: new map([[1, 'one'], [2, 'two']]) } }) the console output will be as follows: > 1 // audioworkletnode options.numberofinputs set to default > map(2) {1 => "one", 2 => "two"} // a cloned map under someusefulvariable sp...

AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(...

AudioWorkletProcessor.port - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('ping-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(a...

AudioWorkletProcessor - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status comment web audio apithe definition of 'audioworkletprocessor' in that specification.

Blob.arrayBuffer() - Web APIs
syntax var bufferpromise = blob.arraybuffer(); blob.arraybuffer().then(buffer => /* process the arraybuffer */); var buffer = await blob.arraybuffer(); parameters none.

Blob.text() - Web APIs
syntax var textpromise = blob.text(); blob.text().then(text => /* do something with the text */); var text = await blob.text(); parameters none.

Blob - Web APIs
the following code reads the content of a blob as text: const text = await (new response(blob)).text(); or by using blob.prototype.text(): const text = await blob.text(); by using other methods of filereader, it is possible to read the contents of a blob as a string or a data url.

Client.postMessage() - Web APIs
const client = await clients.get(event.clientid); // exit early if we don't get the client.

Clients.claim() - Web APIs
syntax await clients.claim(); parameters none.

ClipboardItem() - Web APIs
async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in t...

ClipboardItem.getType() - Web APIs
async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsth...

ClipboardItem.types - Web APIs
async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsth...

ContentIndex.add() - Web APIs
id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope.

ContentIndex.delete() - Web APIs
async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister content from index await registration.index.delete(article.id); } the delete method can also be used within the service worker scope.

ContentIndex.getAll() - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no art...

CustomElementRegistry.whenDefined() - Web APIs
await promise.all(promises); container.removechild(placeholder); specifications specification status comment html living standardthe definition of 'customelements.whendefined()' in that specification.

Document.hasFocus() - Web APIs
html <p id="log">awaiting focus check.</p> <button onclick="openwindow()">open a new window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the foc...

EffectTiming.fill - Web APIs
elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.

ExtendableEvent.waitUntil() - Web APIs
example using waituntil() within a service worker's install event: addeventlistener('install', event => { const precache = async () => { const cache = await caches.open('static-v1'); return cache.addall([ '/', '/about/', '/static/styles.css' ]); }; event.waituntil(precache()); }); specifications specification status comment service workersthe definition of 'waituntil()' in that specification.

FetchEvent.preloadResponse - Web APIs
addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.

FetchEvent.navigationPreload - Web APIs
addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.

FetchEvent.respondWith() - Web APIs
const cachedresponse = await caches.match(event.request); // return it if we found one.

FetchEvent - Web APIs
const cache = await caches.open('dynamic-v1'); const cachedresponse = await cache.match(event.request); if (cachedresponse) { // if we found a match in the cache, return it, but also // update the entry in the cache in the background.

FontFace.FontFace() - Web APIs
it can have the following keys: family: family style: style weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface constructor' in that specification.

HTMLMediaElement.play() - Web APIs
example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("playbutton"); playbutton.addeventlistener("click", handleplaybutton, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } else { videoelem.pause(); playbutton.classlist.remove("playing"); } } in this example, playback of video is toggled off and on by the async playvideo() function.

HTMLMediaElement.setSinkId() - Web APIs
exceptions exception explanation domexception no permission to use the requested device examples const devices = await navigator.mediadevices.enumeratedevices(); const audiodevices = devices.filter(device => device.kind === 'audiooutput'); const audio = document.createelement('audio'); await audio.setsinkid(audiodevices[0].deviceid); console.log('audio is being played on ' + audio.sinkid); specifications specification status comment audio output devices apithe definition of 'sinkid' in ...

LockManager.query() - Web APIs
example const state = await navigator.locks.query(); for (const lock of state.held) { console.log(`held lock: name ${lock.name}, mode ${lock.mode}`); } for (const request of state.pending) { console.log(`requested lock: name ${request.name}, mode ${request.mode}`); } specifications specification status comment web locks apithe definition of 'query()' in that specification.

MediaDevices.getDisplayMedia() - Web APIs
async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } this uses await to asynchronously wait for getdisplaymedia() to resolve with a mediastream which contains the display contents as requested by the specified options.

MediaDevices.getUserMedia() - Web APIs
generally, you will access the mediadevices singleton object using navigator.mediadevices, like this: async function getmedia(constraints) { let stream = null; try { stream = await navigator.mediadevices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.mediadevices.getusermedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ }); note: if the current document isn't loaded secu...

createMediaKeys() - Web APIs
syntax var mediakeys = await mediakeysystemaccess.createmediakeys(); specifications specification status comment encrypted media extensionsthe definition of 'createmediakeys()' in that specification.

MediaRecorder: error event - Web APIs
examples using addeventlistener to listen for error events: async function record() { const stream = await navigator.mediadevices.getusermedia({audio: true}); const recorder = new mediarecorder(stream); recorder.addeventlistener('error', (event) => { console.error(`error recording stream: ${event.error.name}`) }); recorder.start(); } record(); the same, but using the onerror event handler property: async function record() { const stream = await navigator.mediadevices.get...

MediaTrackSupportedConstraints.cursor - Web APIs
async function capturewithcursor() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.cursor' in that specification.

MediaTrackSupportedConstraints.displaySurface - Web APIs
async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.displaysurface' in that specification.

MediaTrackSupportedConstraints.logicalSurface - Web APIs
async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.logicalsurface' in that specification.

Navigator.share() - Web APIs
the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().

PaymentMethodChangeEvent.methodDetails - Web APIs
ev.updatewith(newstuff); }; const response = await request.show(); note that the methoddetails property is being used by the calculatediscount() function to compute any payment discount, then updatewith() is called to update the event with the computed update.

PaymentMethodChangeEvent.methodName - Web APIs
ev.updatewith(newstuff); }; const response = await request.show(); specifications specification status comment payment request apithe definition of 'paymentmethodchangeevent.methodname' in that specification.

PaymentRequest.prototype.id - Web APIs
const response = await request.show(); console.log(response.requestid === request.id); // and in serialized form too const json = response.tojson(); console.log(json.requestid,response.requestid, request.id); syntax var id = paymentrequest.id value a domstring.

PaymentRequest.onmerchantvalidation - Web APIs
examples an example merchant validation handler for the paymentrequest object request looks like this: request.onmerchantvalidation = ev => { ev.complete(async () => { const merchantserverurl = window.location.origin + '/validation?url=' + encodeuricomponent(ev.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(r => r.text()); }) }; const response = await request.show(); for more information, see merchant validation in payment processing concepts.

PaymentRequest.onpaymentmethodchange - Web APIs
ev.updatewith(newstuff); }; const response = await request.show(); specifications specification status comment payment request apithe definition of 'onpaymentmethodchange' in that specification.

PaymentRequest.shippingOption - Web APIs
t.onshippingoptionchange = ev => { const shippingoption = shippingoptions.find( option => option.id === request.id ); const newtotal = { currency: "usd", label: "total due", value: calculatenewtotal(shippingoption), }; ev.updatewith({ ...details, total: newtotal }); }; async function checkshipping(request) { try { const json = request.shippingaddress.tojson(); await ensurecanshipto(json); const { shippingoptions, total } = await calculateshipping(json); return { ...details, shippingoptions, total }; } catch (err) { return { ...details, error: `sorry!

Web Push API Notifications best practices - Web APIs
in our above example, the program manager is awaiting your response and so a push notification is appropriate.

RTCPeerConnection.peerIdentity - Web APIs
*/ async function getidentityassertion(pc) { try { const identity = await pc.peeridentity; return identity; } catch(err) { console.log("error identifying remote peer: ", err); return null; } } specifications specification status comment identity for webrtc candidate recommendation initial specification.

RTCPeerConnection.setRemoteDescription() - Web APIs
this lets you simplify code such as the following: mypeerconnection.setremotedescription(new rtcsessiondescription(description)) .then(function () { return createmystream(); }) to simply be: mypeerconnection.setremotedescription(description) .then(function () { return createmystream(); }) using async/await syntax, you can further simplify this to: await mypeerconnection.setremotedescription(description); createmystream(); since it's unnecessary, the rtcsessiondescription() constructor is deprecated.

Screen Capture API - Web APIs
to start capturing video from the screen, you call getdisplaymedia() on the instance of media navigator.mediadevices: capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); the promise returned by getdisplaymedia() resolves to a mediastream which streams the captured media.

ServiceWorkerContainer: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples in this example the service worker get the client's id from a fetch event and then sends it a message using client.postmessage: // in the service worker async function messageclient(clientid) { const client = await clients.get(clientid); client.postmessage('hi client!'); } addeventlistener('fetch', (event) => { messageclient(event.clientid); event.respondwith(() => { // ...

ServiceWorkerRegistration.index - Web APIs
here is an example from the main script: // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } from the service worker: // service worker script const contentindex = self.registration.index; specifications specification status comment unknownthe definition of 'index' in that specification.

SourceBuffer.appendBufferAsync() - Web APIs
async function fillsourcebuffer(buffer, msbuffer) { try { while(true) { await msbuffer.appendbufferasync(buffer); } } catch(e) { handleexception(e); } } specifications not currently part of any specification.

SourceBuffer.removeAsync() - Web APIs
async function emptysourcebuffer(msbuffer) { await msbuffer.removeasync(0, infinity).catch(function(e) { handleexception(e); } } specifications not currently part of the mse specification.

SubtleCrypto.encrypt() - Web APIs
); // counter will be needed for decryption counter = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(12345); //crypto functions are wrapped in promises so we have to use await and make sure the function that //contains this code is an async function //encrypt function wants a cryptokey object const key_encoded = await crypto.subtle.importkey( "raw", key.buffer, 'aes-ctr' , false, ["encrypt", "decrypt"]); const encrypted_content = await window.crypto.subtle.encrypt( { name: "aes-ctr", counter: iv, length: 128 }, key_encoded, da...

TransformStream - Web APIs
async transform(chunk, controller) { chunk = await chunk switch (typeof chunk) { case 'object': // just say the stream is done i guess if (chunk === null) controller.terminate() else if (arraybuffer.isview(chunk)) controller.enqueue(new uint8array(chunk.buffer, chunk.byteoffset, chunk.bytelength)) else if (array.isarray(chunk) && chunk.every(value => typeof value === 'number')) control...

URL - Web APIs
const response = await fetch(new url('http://www.example.com/démonstration.html')); specifications specification status comment file apithe definition of 'url' in that specification.

USBDevice.claimInterface() - Web APIs
async function connectdevice(usbdevice) { await usbdevice.open(); if (usbdevice.configuration === null) await usbdevice.selectconfiguration(1); await usbdevice.claiminterface(0); } specifications specification status comment webusbthe definition of 'claiminterface()' in that specification.

USBDevice.configuration - Web APIs
async function connectdevice(usbdevice) { await usbdevice.open(); if (usbdevice.configuration === null) await usbdevice.selectconfiguration(1); await usbdevice.claiminterface(0); } specifications specification status comment webusbthe definition of 'configuration' in that specification.

USBDevice.opened - Web APIs
let payload = new uint8array([r, g, b]); await usbdevice.controltransferout({ requesttype: 'vendor', recipient: 'device', request: 1, value: 0, index: 0, }, payload); } } specifications specification status comment webusbthe definition of 'opened' in that specification.

WakeLock.request() - Web APIs
const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } catch (err) { // the wake lock request fails - usually system related, such low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specifications specification status comment screen wake lock apithe definition of 'request()' in that specification.

WakeLock - Web APIs
const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } catch (err) { // the wake lock request fails - usually system related, such low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specifications specification status comment screen wake lock apithe definition of 'wakelock' in that specification.

WakeLockSentinel.type - Web APIs
const requestwakelock = async () => { wakelock = await navigator.wakelock.request('screen'); console.log(wakelock.type); // logs 'screen' }; requestwakelock(); specifications specification status comment screen wake lock apithe definition of 'wakelocktype' in that specification.

WakeLockSentinel - Web APIs
// create a reference for the wake lock let wakelock = null; // create an async function to request a wake lock const requestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // listen for our release event wakelock.addeventlistener('release', () => { // if wake lock is released alter the ui accordingly }); } catch (err) { // if wake lock request fails - usually system related, such as battery } } wakelockonbutton.addeventlistener('click', () => { requestwakelock(); }) wakelockoffbutton.addeventlis...

Compressed texture formats - Web APIs
no examples async function getcompressedtextureifavailable(gl) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // create texture object on gpu const ext = gl.getextension('webgl_compressed_texture_s3tc'); // will be null if not supported if (ext) { // the file is already in the correct compressed format const dataarraybuffer = await fetch('/textures/foobar512x512.rgba_s3tc_dxt1') .then(response => response.arraybuffer()); gl.compressedteximage2d(gl.texture_2d, 0, // set the base image level ext.compressed_rgba_s3tc_dxt1_ext, // the compressed format we are using 512, 512, // width, height of the image 0, // border, always 0 new dataview(dataarraybuffer)); gl.generatemipmap(); // cr...

Movement, orientation, and motion: A WebXR example - Web APIs
async function onxrbuttonclick(event) { if (!xrsession) { navigator.xr.requestsession(session_type) .then(sessionstarted); } else { await xrsession.end(); if (xrsession) { sessionended(); } } } this begins by looking at the value of xrsession to see if we already have a xrsession object representing an ongoing webxr session.

Rendering and the WebXR frame animation callback - Web APIs
kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representi...

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
let viewerpose = frame.getviewerpose(worldreferencespace); let newsession = navigator.xr.requestsession("immersive-vr", { requiredfeatures: "unbounded" }); worldreferencespace = await newsession.requestreferencespace("unbounded"); viewerpose = worldreferencespace.getoffsetreferencespace(viewerpose.transform); here, the viewer pose is obtained, with its transform defined relative to worldreferencespace, the current session's global reference space.

Background audio processing using AudioWorklet - Web APIs
to use an audio worklet processor, you can use code similar to the following: let audiocontext = null; async function createmyaudioprocessor() { if (!audiocontext) { try { audiocontext = new audiocontext(); await audiocontext.resume(); await audiocontext.audioworklet.addmodule("module-url/module.js"); } catch(e) { return null; } } return new audioworkletnode(audiocontext, "processor-name"); } this createmyaudioprocessor() function creates and returns a new instance of audioworkletnode configured to use your audio processor.

Worklet.addModule() - Web APIs
examples audioworklet example const audioctx = new audiocontext(); const audioworklet = audioctx.audioworklet; await audioworklet.addmodule('modules/bypassfilter.js', { credentials: 'omit', }); paintworklet example css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); once a paintworklet is included, the css paint() function can be used to include the image created by the worklet: @supports (background-image: paint(id)) { h1 { background-image: pa...

Overview of events and handlers - Developer guides
some notable events are: note: this list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents.

A re-introduction to JavaScript (JS tutorial) - JavaScript
it is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await.

Method definitions - JavaScript
// using a named property const obj3 = { f: async function () { await some_promise } } // the same object using shorthand syntax const obj3 = { async f() { await some_promise } } async generator methods generator methods can also be async.

Array.prototype.forEach() - JavaScript
example code let ratings = [5, 4, 5]; let sum = 0; let sumfunction = async function (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 14 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 // 3 // 7 // numcallbackruns: 3 // comment...

AsyncFunction - JavaScript
examples creating an async function from an asyncfunction() constructor function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); } let asyncfunction = object.getprototypeof(async function(){}).constructor let a = new asyncfunction('a', 'b', 'return await resolveafter2seconds(a) + await resolveafter2seconds(b);'); a(10, 20).then(v => { console.log(v); // prints 30 after 4 seconds }); specifications specification ecmascript (ecma-262)the definition of 'asyncfunction object' in that specification.

Atomics.wait() - JavaScript
the static atomics.wait() method verifies that a given position in an int32array still contains a given value and if so sleeps, awaiting a wakeup or a timeout.

Atomics - JavaScript
atomics.wait() verifies that the specified index of the array still contains a value and sleeps awaiting or times out.

Symbol - JavaScript
used by for await...of.

Lexical grammar - JavaScript
these are always reserved: enum the following are only reserved when they are found in strict mode code: implements interface let package private protected public static the following are only reserved when they are found in module code: await future reserved keywords in older standards the following are reserved as future keywords by older ecmascript specifications (ecmascript 1 till 3).

Operator precedence - JavaScript
… bitwise not ~ … unary plus + … unary negation - … prefix increment ++ … prefix decrement -- … typeof typeof … void void … delete delete … await await … 16 exponentiation right-to-left … ** … 15 multiplication left-to-right … * … division … / … remainder … % … 14 addition left-to-right … + … subtraction … - … 13 bitwise left shift left-to-right … << … bitwise right shift … >> … ...

Expressions and operators - JavaScript
await pause and resume an async function and wait for the promise's resolution/rejection.

Statements and declarations - JavaScript
for await...of iterates over async iterable objects, array-like objects, iterators and generators, invoking a custom iteration hook with statements to be executed for the value of each distinct property.

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
if not, we initialize a new subscription: const response = await fetch('./vapidpublickey'); const vapidpublickey = await response.text(); const convertedvapidkey = urlbase64touint8array(vapidpublickey); the app fetches the server's public key and converts the response to text; then it needs to be converted to a uint8array (to support chrome).

Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).