petebrowne

self.addEventListener('fetch', event => {
  var response = new Response('This came from the service worker!');
  event.respondWith(response);

  // Default behavior - same as not using `respondWith`
  // event.responseWith(fetch(event.request));
});

petebrowne

var CACHE_VERSION = 1;
var CACHE_NAME = `example-3_${CACHE_VERSION}`;
var CACHE_URLS = [
  'site.css',
  'site.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {

petebrowne

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('Deleting out of date cache:', cacheName);
            return caches.delete(cacheName);
          }
        })

petebrowne

var CACHE_VERSION = 1;
var CACHE_NAME = `example-4_${CACHE_VERSION}`;
var OFFLINE_URL = 'offline.html';
var CACHE_URLS = [
  OFFLINE_URL
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {

petebrowne

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

petebrowne

function isHtmlRequest(request) {
  return (
    request.method === 'GET' &&
    request.headers.get('accept').includes('text/html')
  );
}

self.addEventListener('fetch', event => {
  if (isHtmlRequest(event.request)) {
    event.respondWith(

petebrowne

npm install --save react react-dom d3-shape d3-scale

petebrowne

class App extends React.Component {
  render() {
    // For a real world project, use something like
    // https://github.com/digidem/react-dimensions
    let width = window.innerWidth;
    let height = window.innerHeight;
    let minViewportSize = Math.min(width, height);
    // This sets the radius of the pie chart to fit within
    // the current window size, with some additional padding
    let radius = (minViewportSize * .9) / 2;

petebrowne

class Pie extends React.Component {
  constructor(props) {
    super(props);
    // https://github.com/d3/d3/wiki/Ordinal-Scales#category10
    this.colorScale = d3.scale.category10();
    this.renderSlice = this.renderSlice.bind(this);
  }

  render() {
    let {x, y, data} = this.props;

petebrowne

class Slice extends React.Component {
  render() {
    let {value, fill, innerRadius = 0, outerRadius} = this.props;
    // https://github.com/d3/d3/wiki/SVG-Shapes#arc
    let arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);
    return (
      <path d={arc(value)} fill={fill} />
    );