Jefry Dewangga jefrydco

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Using OTP's observer (appmon replacement) remotely

$ ssh remote-host "epmd -names"
epmd: up and running on port 4369 with data:
name some_node at port 58769

Note the running on port for epmd itself and the port of the node you're interested in debugging. Reconnect to the remote host with these ports forwarded:

$ ssh -L 4369:localhost:4369 -L 58769:localhost:58769 remote-host

	const waitFor = (ms) => new Promise(r => setTimeout(r, ms))
	const asyncForEach = async (array, callback) => {
	for (let index = 0; index < array.length; index++) {
	await callback(array[index], index, array)
	}
	}

	const start = async () => {
	await asyncForEach([1, 2, 3], async (num) => {
	await waitFor(50)

	/**
	* Updates the passed dialog to retain focus and restore it when the dialog is closed. Won't
	* upgrade a dialog more than once. Supports IE11+ and is a no-op otherwise.
	* @param {!HTMLDialogElement} dialog to upgrade
	*/
	var registerFocusRestoreDialog = (function() {
	if (!window.WeakMap \|\| !window.MutationObserver) {
	return function() {};
	}
	var registered = new WeakMap();

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	# content has to be in .config/fish/config.fish
	# if it does not exist, create the file
	setenv SSH_ENV $HOME/.ssh/environment

	function start_agent
	echo "Initializing new SSH agent ..."
	ssh-agent -c \| sed 's/^echo/#echo/' > $SSH_ENV
	echo "succeeded"
	chmod 600 $SSH_ENV
	. $SSH_ENV > /dev/null

	<ul class="prev-next cf">
	{% set params = {section: 'blog', order: 'postDate desc', limit: null} %}
	{% set entry_prev = entry.getPrev(params) %}
	{% set entry_next = entry.getNext(params) %}
	{% if entry_prev %}<li class="prev"><a title="{{ entry_prev.title }}" href="{{entry_prev.url}}">Previous Post</a></li>{% endif %}
	{% if entry_next %}<li class="next"><a title="{{ entry_next.title }}" href="{{entry_next.url}}">Next Post</a></li>{% endif %}
	</ul>

	/**
	* Fancy ID generator that creates 20-character string identifiers with the following properties:
	*
	* 1. They're based on timestamp so that they sort after any existing ids.
	* 2. They contain 72-bits of random data after the timestamp so that IDs won't collide with other clients' IDs.
	* 3. They sort lexicographically (so the timestamp is converted to characters that will sort properly).
	* 4. They're monotonically increasing. Even if you generate more than one in the same timestamp, the
	* latter ones will sort after the former ones. We do this by using the previous random bits
	* but "incrementing" them by 1 (only in the case of a timestamp collision).
	*/