jakearchibald / trained-to-thrill

Trains! Yey!

View the Trained to Thrill demo

Instructions:

1. Open Chrome
2. Click the above link
3. Turn off your network connection via wifi or Chrome DevTools Device Mode
4. Reload the page! OMG STILL WORKS!!!1
5. Read the service worker source js

Hack on the code

Prerequisites

• Node

Then clone this repo & run:

npm install

Running

npm run serve

The server will be running at http://localhost:8000/

trained-to-thrill's Issues

duplicate API requests

I think that flickrAPIResponse and flickrImageResponse will end up making duplicate API requests:

// from https://github.com/jakearchibald/trained-to-thrill/blob/master/www/static/js/sw.js#L51-L58

function flickrImageResponse(request) {
  return caches.match(request).catch(function() {
    return caches.get('content').then(function(cache) {
      // I am under the impression that internally, cache.add(request) will 
      // perform fetch(request) then add the response to the cache...
      cache.add(request);
      // will this fetch cause an additional request?
      return fetch(request);
    });
  });
}

If this is the case, presumably a fix for this might look like this:

return cache.add(request).then(function() {
  return caches.match(request);
});

"Unhandled promise rejection" due to a failing response ("No response").

@jakearchibald the demo the console shows the following error:

Unhandled promise rejection Promise {[[PromiseStatus]]:"rejected", [[PromiseValue]]: Syntax Error: Unexpected token N}

Looking at the network tab, I'm seeing 2 flickr API call. One return a correctly formatted JSON object while the other returns "No response". I think the error comes from this second request where the N of "No response" results in the Syntax Error.

I think @horo-t is looking into fixing the "No Response" issues.

Inconsistent decleration of event handlers

The way the event handlers for events like install or fetch are declerated are inconsistent between the official google developer documentation and this project:

self.onfetch = function(event) {...} vs. self.addEventListener('fetch', function (event) {...}

Why this inconsistency?

Flickr Api Key in source code

Hi,
I guess you left your flickr api key. And key is valid.
are there security implication ?

cache race helper functions

Hi,
I just wanted to share some minimal helper functions [1] that makes the "cache races against network with potential dual rendering" a little easier by having the cache reject if the network fullfills [2] and have the network reject only if the cache also rejects [3]

[1] https://gist.github.com/zerotacg/d304348cdd5d2f965901
[2] https://gist.github.com/zerotacg/d304348cdd5d2f965901#file-network-cache-race-js-L21
[3] https://gist.github.com/zerotacg/d304348cdd5d2f965901#file-network-cache-race-js-L12

just a use case for `only-if-cached`

trained-to-thrill/www/static/js-unmin/index.js

Line 70 in 3291dd4

headers: {'Accept': 'x-cache/only'}

Can we get the demo to work in IE and Safari?

@jakearchibald

The demo is currently failing on IE and Safari because it relies on Promises. From a quick look in the code, I believe that the intent was to use a polyfill for these browsers. However, the live demo is failing.

For demo purposes, we can do comparisons between say Chrome stable or vanilla Firefox and Chrome canary but it would be nice to fix this issue if possible.

Still getting "Unable to connect to the Internet"

I did everything but I still get the "Unable to connect to the Internet" after turning wifi off.

I can see the happy guy in the console:

◕‿◕ ServiceWorkerRegistration {onupdatefound: null, scope: "https://jakearchibald.github.io/trained-to-thrill/", active: null, waiting: null, installing: null…}active: nullinstalling: nullonupdatefound: nullscope: "https://jakearchibald.github.io/trained-to-thrill/"waiting: null__proto__: ServiceWorkerRegistration

And I can see stuff in the service-worker internals:

Scope: https://jakearchibald.github.io/trained-to-thrill/
Script: https://jakearchibald.github.io/trained-to-thrill/sw.js
Registration ID: 0
Active worker:
Installation Status: ACTIVATED
Running Status: RUNNING
Version ID: 0
Renderer process ID: 49
Renderer thread ID: 2
DevTools agent route ID: 4

Missing request.clone()?

It looks like there are a couple of places in where the same event.request object is used in both a fetch() and a cache.put() (https://github.com/jakearchibald/trained-to-thrill/blob/master/www/static/js-unmin/sw/index.js#L65 and https://github.com/jakearchibald/trained-to-thrill/blob/master/www/static/js-unmin/sw/index.js#L107).

@jakearchibald mentioned elsewhere that both fetch() and cache.put() consume a request, so shouldn't the request that's passed to fetch() beclone()d first?