Last active
June 19, 2018 10:38
-
-
Save desinas/5c97b26c7b3a72e964d9870999e11fc0 to your computer and use it in GitHub Desktop.
Wittr app for Service Worker intro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('install', function(event) { | |
| event.waitUntil( | |
| caches.open('wittr-static-v1').then(function(cache) { | |
| return cache.addAll([ | |
| '/', | |
| 'js/main.js', | |
| 'css/main.css', | |
| 'imgs/icon.png', | |
| 'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff', | |
| 'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff' | |
| ]); | |
| }) | |
| ); | |
| }); | |
| // TODO: respond with an entry from the cache if there is one. | |
| // If there isn't, fetch from the network. | |
| self.addEventListener('fetch', function(event) { | |
| event.respondWith(caches.match(event.request) | |
| .then(function(response) { | |
| if (response) return response; | |
| return fetch(event.request); | |
| })); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import PostsView from './views/Posts'; | |
| import ToastsView from './views/Toasts'; | |
| import idb from 'idb'; | |
| export default function IndexController(container) { | |
| this._container = container; | |
| this._postsView = new PostsView(this._container); | |
| this._toastsView = new ToastsView(this._container); | |
| this._lostConnectionToast = null; | |
| this._openSocket(); | |
| this._registerServiceWorker(); | |
| } | |
| IndexController.prototype._registerServiceWorker = function() { | |
| if (!navigator.serviceWorker) return; | |
| navigator.serviceWorker.register('/sw.js').then(function() { | |
| console.log('Registration of Service Worker done!'); | |
| }).catch(function() { | |
| console.log('Registration of Service Worker FAILED.'); | |
| }); | |
| }; | |
| // open a connection to the server for live updates | |
| IndexController.prototype._openSocket = function() { | |
| var indexController = this; | |
| var latestPostDate = this._postsView.getLatestPostDate(); | |
| // create a url pointing to /updates with the ws protocol | |
| var socketUrl = new URL('/updates', window.location); | |
| socketUrl.protocol = 'ws'; | |
| if (latestPostDate) { | |
| socketUrl.search = 'since=' + latestPostDate.valueOf(); | |
| } | |
| // this is a little hack for the settings page's tests, | |
| // it isn't needed for Wittr | |
| socketUrl.search += '&' + location.search.slice(1); | |
| var ws = new WebSocket(socketUrl.href); | |
| // add listeners | |
| ws.addEventListener('open', function() { | |
| if (indexController._lostConnectionToast) { | |
| indexController._lostConnectionToast.hide(); | |
| } | |
| }); | |
| ws.addEventListener('message', function(event) { | |
| requestAnimationFrame(function() { | |
| indexController._onSocketMessage(event.data); | |
| }); | |
| }); | |
| ws.addEventListener('close', function() { | |
| // tell the user | |
| if (!indexController._lostConnectionToast) { | |
| indexController._lostConnectionToast = indexController._toastsView.show("Unable to connect. Retrying…"); | |
| } | |
| // try and reconnect in 5 seconds | |
| setTimeout(function() { | |
| indexController._openSocket(); | |
| }, 5000); | |
| }); | |
| }; | |
| // called when the web socket sends message data | |
| IndexController.prototype._onSocketMessage = function(data) { | |
| var messages = JSON.parse(data); | |
| this._postsView.addPosts(messages); | |
| }; |
Author
desinas
commented
Jun 19, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment