diff --git a/gulp/backbone.js b/gulp/backbone.js index 4909391..7165024 100644 --- a/gulp/backbone.js +++ b/gulp/backbone.js @@ -35,7 +35,8 @@ gulp.task('bundleBackbone', function () { gulp.task('bump', function() { gulp.src('src/service-worker.js') .pipe(bump({ 'key': 'version' })) - .pipe(gulp.dest('src')); + .pipe(gulp.dest('src')) + .pipe(gulp.dest('live')); }); gulp.task('buildBackbone', ['bump', 'bundleBackbone'], function() { diff --git a/package-lock.json b/package-lock.json index b3ed402..f50c4eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,7 @@ }, "@sinonjs/formatio": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz", "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==", "dev": true, "requires": { @@ -11959,9 +11959,9 @@ } }, "whatwg-fetch": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz", - "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", + "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" }, "when": { "version": "3.7.8", diff --git a/package.json b/package.json index 60d71e7..0731001 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,6 @@ "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", "watchify": "^3.11.0", - "whatwg-fetch": "^2.0.3" + "whatwg-fetch": "^2.0.4" } } diff --git a/serverHTTP2.js b/serverHTTP2.js new file mode 100644 index 0000000..3ded013 --- /dev/null +++ b/serverHTTP2.js @@ -0,0 +1,19 @@ +const http2 = require('http2'); +const fs = require('fs'); + +const server = http2.createSecureServer({ + key: fs.readFileSync('localhost-privkey.pem'), + cert: fs.readFileSync('localhost-cert.pem') +}); +server.on('error', (err) => console.error(err)); + +server.on('stream', (stream, headers) => { + // stream is a Duplex + stream.respond({ + 'content-type': 'text/html', + ':status': 200 + }); + stream.end('

Hello World

'); +}); + +server.listen(8110); diff --git a/src/service-worker.js b/src/service-worker.js index 67961ca..c425891 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -11,10 +11,11 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -const CACHE_VERSION = { 'version': '0.0.707' }; -const dataCacheName = 'jubileeData-v1'; -const cacheName = 'jubilee-final-1'; -const filesToCache = [ +const CACHE_VERSION = { 'version': '0.0.771' }; +const PRECACHE = `jubileeData-${CACHE_VERSION.version}`; +const RUNTIME = 'runtime'; + +const PRECACHE_URLS = [ '/', '/index.html', '/service-worker.js', @@ -66,77 +67,76 @@ const filesToCache = [ ]; -self.addEventListener('install', function(e) { - console.log('[ServiceWorker] Install'); - e.waitUntil( - caches.open(cacheName).then(function(cache) { - console.log('[ServiceWorker] Caching app shell'); +const liveData = ['news', 'agenda']; - return cache.addAll(filesToCache); - }) +self.addEventListener('install', event => { + console.warn('Installing...'); + event.waitUntil( + caches.open(PRECACHE) + .then(cache => cache.addAll(PRECACHE_URLS)) + .then(self.skipWaiting()) ); }); -self.addEventListener('activate', function(e) { - console.log('[ServiceWorker] Activate'); - e.waitUntil( - caches.keys().then(function(keyList) { - return Promise.all(keyList.map(function(key) { - if (key !== cacheName && key !== dataCacheName) { - console.log('[ServiceWorker] Removing old cache', key); - - return caches.delete(key); - } +// The activate handler takes care of cleaning up old caches. +self.addEventListener('activate', event => { + console.warn('Activate...'); + const currentCaches = [PRECACHE, RUNTIME]; + event.waitUntil( + caches.keys().then(cacheNames => { + return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); + }).then(cachesToDelete => { + return Promise.all(cachesToDelete.map(cacheToDelete => { + return caches.delete(cacheToDelete); })); - }) + }).then(() => self.clients.claim()) ); - - /* - * Fixes a corner case in which the app wasn't returning the latest data. - * You can reproduce the corner case by commenting out the line below and - * then doing the following steps: 1) load app for first time so that the - * initial New York City data is shown 2) press the refresh button on the - * app 3) go offline 4) reload the app. You expect to see the newer NYC - * data, but you actually see the initial data. This happens because the - * service worker is not yet activated. The code below essentially lets - * you activate the service worker faster. - */ - return self.clients.claim(); }); -self.addEventListener('fetch', function(e) { - console.warn('[Service Worker] Fetch', e.request.url); - const dataUrl = '/getnexttraintimes?'; - if (e.request.url.indexOf(dataUrl) > -1) { - console.log('!'); +// The fetch handler serves responses for same-origin resources from a cache. +// If no response is found, it populates the runtime cache with the response +// from the network before returning it to the page. +self.addEventListener('fetch', event => { + console.warn('Fetch', event.request.url); + // Skip cross-origin requests, like those for Google Analytics. + if (event.request.url.startsWith(self.location.origin)) { + console.log('One of our requests..'); + event.respondWith( + caches.match(event.request).then(cachedResponse => { + if (cachedResponse) { + return cachedResponse; + } - /* - * When the request URL contains dataUrl, the app is asking for fresh - * weather data. In this case, the service worker always goes to the - * network and then caches the response. This is called the "Cache then - * network" strategy: - * https://jakearchibald.com/2014/offline-cookbook/#cache-then-network - */ - e.respondWith( - caches.open(dataCacheName).then(function(cache) { - return fetch(e.request).then(function(response) { - cache.put(e.request.url, response.clone()); - - return response; + return caches.open(RUNTIME).then(cache => { + return fetch(event.request).then(response => { + // Put a copy of the response in the runtime cache. + return cache.put(event.request, response.clone()).then(() => { + return response; + }); + }); }); }) ); } - else - /* - * The app is asking for app shell files. In this scenario the app uses the - * "Cache, falling back to the network" offline strategy: - * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network - */ - e.respondWith( - caches.match(e.request).then(function(response) { - return response || fetch(e.request); + if (event.request.url.startsWith('https://maps.googleapis.com')) { + const url = new URL(event.request.url); + const locCache = `loc-${url.searchParams.get('latlng')}`; + event.respondWith( + caches.match(locCache).then(cachedResponse => { + if (cachedResponse) { + return cachedResponse; + } + + return caches.open(RUNTIME).then(cache => { + return fetch(event.request).then(response => { + // Put a copy of the response in the runtime cache. + return cache.put(locCache, response.clone()).then(() => { + return response; + }); + }); + }); }) ); + } }); diff --git a/src/v1/js/Nearby.js b/src/v1/js/Nearby.js index f811c6c..8475f94 100644 --- a/src/v1/js/Nearby.js +++ b/src/v1/js/Nearby.js @@ -24,6 +24,7 @@ const NearbyModel = Backbone.Model.extend({ this.tick(); this.set('totalResults', 0); this.listenTo(this, 'change:llFixed change:atHome change:section change:update', this.onChange); + this.throttledGetNearby = _.throttle(this.getNearby, 6000); }, 'tick': function() { const hour = parseInt((new Date()).getHours().toString(), 10); @@ -41,8 +42,8 @@ const NearbyModel = Backbone.Model.extend({ console.log('At home, so no fetching...'); this.logUpdate(); } - else - this.getNearby(); + else + this.throttledGetNearby(); }, 'getNearby': function() { const llFixed = this.get('llFixed'); @@ -54,22 +55,24 @@ const NearbyModel = Backbone.Model.extend({ const lastUpdate = time - (this.get('time') || 0); console.log('>> Nearby section:', hour, section); - console.info('>> Nearby:request'); + console.info('>> Nearby:request V2'); console.log(`>> Nearby last fetch: ${TimeFormat.fromMs(lastUpdate, 'hh:mm')} ago`); - if (lastUpdate > 120000) - request({ - 'url': `${window.loc}/fsexplore`, - 'method': 'GET', - 'qs': { - 'll': llFixed, - 'section': section - } - }, function(err, res, body) { - if (err) - console.error(err); - else { + if (lastUpdate > 120000) { + const url = new URL(`${window.loc}/fsexplore`); + + url.searchParams.append('ll', llFixed); + url.searchParams.append('section', section); + + fetch(url) + .then(res => { console.log('statusCode', res.statusCode); + + console.warn(res.status); + + return res.text(); + }) + .then(function(body) { const fsJSON = JSON.parse(body); const groups = get(fsJSON, 'response.groups'); const items = groups[0].items; @@ -80,8 +83,11 @@ const NearbyModel = Backbone.Model.extend({ this.fsCollection.reset(newItems); this.logUpdate(); - } - }.bind(this)); + }.bind(this)) + .catch(function(error) { + console.error(error); + }); + } }, 'logUpdate': function() { console.log('Nearby logging:'); @@ -184,7 +190,7 @@ const NearbyView = Backbone.View.extend({ const section = this.model.get('section'); const data = { llFixed, section, 'limit':20 }; - // console.log('Data', data); + // console.log('Data', data); this.eventBus.trigger('showNearbyList', data); } diff --git a/src/v1/js/Traffic.js b/src/v1/js/Traffic.js index ed16715..d56d64c 100644 --- a/src/v1/js/Traffic.js +++ b/src/v1/js/Traffic.js @@ -55,7 +55,7 @@ const TrafficModel = Backbone.Model.extend({ 'getTraffic': function() { console.log('Get Traffic'); // olat, olon, dlat, dlon - const override = true; + const override = false; const time = new Date().getTime() ; const hour = (new Date()).getHours(); const latlong = this.get('latlong'); diff --git a/src/v1/js/app.js b/src/v1/js/app.js index 0dd446c..9f24af4 100644 --- a/src/v1/js/app.js +++ b/src/v1/js/app.js @@ -21,23 +21,43 @@ const { NearbyListModel, NearbyListView } = require('./NearbyList'); const { NearbyPlacesView } = require('./NearbyPlaces'); var app = app || {}; -const live = false; +const live = true; if (live) { window.loc = 'https://jubilee.silvrtree.co.uk'; - if ('serviceWorker' in navigator) - navigator.serviceWorker - .register('./service-worker.js') - .then(function() { - console.log('Service Worker Registered'); - }); -} -else window.loc = 'http://localhost:8110'; + if ('serviceWorker' in navigator) { + // + navigator.serviceWorker.ready.then(function(reg) { + console.warn('Ready??', reg); + main(); + }); -(function () { + window.addEventListener('load', function() { + navigator.serviceWorker + .register('./service-worker.js') + .then(function(r) { + console.warn('Service Worker Registered', r.scope); + }) + .catch(function(error) { + // registration failed + console.error(`Registration failed with ${ error}`); + }); + }); + + // + } +} +else { + window.loc = 'http://localhost:8110'; + main(); +} + +function main() { const offline = false; + console.log('>>> START!!! <<<'); + /* var myRouter = Backbone.Router.extend({ // @@ -102,4 +122,4 @@ else window.addEventListener('online', app.updateOnlineStatus); window.addEventListener('offline', app.updateOnlineStatus); -})(); +}