Brad Pillow pillowsoft

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Gathering.js - How to use

Keep list (and count) of online users in a Firebase web app - by isolated rooms or globally.

Live Demo

Firebase Shared Checklist is a demo application that shows the number of users joined a checklist using gathering.js. Here is a 1 minute screencast of using this application.

	/* @flow */

	// A simplified representation of types using phantom types (so that we store the Type information both at value and type level)
	class Type<T> {};
	class StringT extends Type<string> {}
	class NumberT extends Type<number> {}

	// A schema for a User
	const User = {
	name: new StringT(),


	const ttf = require('../../fonts/benguiat.json');

	//...

	render () {
	let letters = [
	Object.create(AnimatedLetter).init('S', 42, -6, -6, 10, 0.65)
	.to('home').in(7000),
	Object.create(AnimatedLetter).init('T', 100, -46, 22, 0, 0.5)

	/**
	* Sample React Native App
	* https://github.com/facebook/react-native
	* @flow
	*/

	import React, { Component } from 'react';
	import {
	AppRegistry,
	StyleSheet,

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	import { h, Component } from 'preact';
	import Markup from 'preact-markup';
	import register from './preact-custom-element';

	// just a proxy component: WC -> Preact -> WC
	const A = () => <x-b foo="initial foo from <x-a>" />;

	// stateful component that can re-render
	class B extends Component {
	render(props, state) {

	// @flow

	// partial dirty implementation of react-native Picker
	// should match http://facebook.github.io/react-native/docs/picker.html

	// https://github.com/necolas/react-native-web/issues/184
	import createDOMElement from "react-native-web/dist/modules/createDOMElement"

	import PickerItem from "./item.web.js"

	import React from 'react';
	import { shallow } from 'enzyme';
	import MyComponent from '../src/my-component';

	const wrapper = shallow(<MyComponent/>);

	describe('(Component) MyComponent', () => {
	it('renders without exploding', () => {
	expect(wrapper).to.have.length(1);
	});

	import React from 'react';

	const MIN_SCALE = 1;
	const MAX_SCALE = 4;
	const SETTLE_RANGE = 0.001;
	const ADDITIONAL_LIMIT = 0.2;
	const DOUBLE_TAP_THRESHOLD = 300;
	const ANIMATION_SPEED = 0.04;
	const RESET_ANIMATION_SPEED = 0.08;
	const INITIAL_X = 0;