Move app caching to a service worker (#5504)

* Move app caching to a webworker

* Code cleanup

* Code cleanup

* Make Codacy happy

* More parentheses
This commit is contained in:
Sulka Haro
2020-02-05 08:16:25 +02:00
committed by GitHub
parent c0f6b2245c
commit 82f00763d6
9 changed files with 840 additions and 746 deletions
+5 -5
View File
@@ -26,10 +26,10 @@
<meta name="theme-color" content="#333333">
<link rel="preload" href="/css/main.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/drawer.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/admin.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-darkness/jquery-ui.min.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-darkness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<% include preloadCSS %>
</head>
<body>
@@ -39,8 +39,8 @@
<%- include('partials/authentication-status') %>
<script src="<%= locals.bundle %>/js/bundle.app.js?v=<%= locals.cachebuster %>"></script>
<script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>
<script src="/admin/js/admin.js?v=<%= locals.cachebuster %>"></script>
<script src="<%= locals.bundle %>/js/bundle.app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/admin/js/admin.js"></script>
</body>
</html>
+1 -1
View File
@@ -40,7 +40,7 @@
<div id="staleTime"></div>
</div>
</main>
<script src="<%= locals.bundle %>/js/bundle.clock.js?v=<%= locals.cachebuster %>"></script>
<script src="<%= locals.bundle %>/js/bundle.clock.js"></script>
<script type="text/javascript">
var clockFace = "<%= face %>"; // can now be used in scripts
+5 -5
View File
@@ -24,11 +24,11 @@
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#333333">
<link rel="preload" href="/css/main.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/dropdown.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/drawer.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/food.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-darkness/jquery-ui.min.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-darkness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<% include preloadCSS %>
</head>
@@ -112,8 +112,8 @@
<%- include('partials/authentication-status') %>
<script src="<%= locals.bundle %>/js/bundle.app.js?v=<%= locals.cachebuster %>"></script>
<script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>
<script src="/food/js/food.js?v=<%= locals.cachebuster %>"></script>
<script src="<%= locals.bundle %>/js/bundle.app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/food/js/food.js"></script>
</body>
</html>
+699 -679
View File
File diff suppressed because it is too large Load Diff
-37
View File
@@ -1,37 +0,0 @@
CACHE MANIFEST
/images/launch.png
/images/apple-touch-icon-57x57.png
/images/apple-touch-icon-60x60.png
/images/apple-touch-icon-72x72.png
/images/apple-touch-icon-76x76.png
/images/apple-touch-icon-114x114.png
/images/apple-touch-icon-120x120.png
/images/apple-touch-icon-144x144.png
/images/apple-touch-icon-152x152.png
/images/apple-touch-icon-180x180.png
/images/favicon-32x32.png
/images/android-chrome-192x192.png
/images/favicon-96x96.png
/images/favicon-16x16.png
/manifest.json
/images/favicon.ico
/images/mstile-144x144.png
/css/ui-darkness/jquery-ui.min.css?v=<%= locals.cachebuster %>
/css/jquery.tooltips.css?v=<%= locals.cachebuster %>
/audio/alarm.mp3
/audio/alarm2.mp3
/css/ui-darkness/images/ui-icons_ffffff_256x240.png
/css/ui-darkness/images/ui-icons_cccccc_256x240.png
/css/ui-darkness/images/ui-bg_inset-soft_25_000000_1x100.png
/css/ui-darkness/images/ui-bg_gloss-wave_25_333333_500x100.png
/css/main.css?v=<%= locals.cachebuster %>
/bundle/js/bundle.app.js?v=<%= locals.cachebuster %>
/bundle/js/bundle.clock.js?v=<%= locals.cachebuster %>
/bundle/js/bundle.report.js?v=<%= locals.cachebuster %>
/socket.io/socket.io.js?v=<%= locals.cachebuster %>
/js/client.js?v=<%= locals.cachebuster %>
/images/logo2.png
NETWORK:
*
+5 -5
View File
@@ -25,10 +25,10 @@
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#333333">
<link rel="preload" href="/css/main.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/drawer.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/profile.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-darkness/jquery-ui.min.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-darkness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<% include preloadCSS %>
</head>
@@ -166,8 +166,8 @@
<%- include('partials/authentication-status') %>
<script src="/api/v1/status.js"></script>
<script src="<%= locals.bundle %>/js/bundle.app.js?v=<%= locals.cachebuster %>"></script>
<script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>
<script src="/profile/js/profileeditor.js?v=<%= locals.cachebuster %>"></script>
<script src="<%= locals.bundle %>/js/bundle.app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/profile/js/profileeditor.js"></script>
</body>
</html>
+8 -8
View File
@@ -23,9 +23,9 @@
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#333333">
<link rel="preload" href="/css/main.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/report.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-lightness/jquery-ui.min.css?v=<%= locals.cachebuster %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/report.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/css/ui-lightness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<% include preloadCSS %>
</head>
@@ -122,10 +122,10 @@
<%- include('partials/authentication-status') %>
<script src="<%= locals.bundle %>/js/bundle.report.js?v=<%= locals.cachebuster %>"></script>
<script src="/socket.io/socket.io.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/report.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/flotcandle.js?v=<%= locals.cachebuster %>"></script>
<script src="/report/js/loopalyzer.js?v=<%= locals.cachebuster %>"></script>
<script src="<%= locals.bundle %>/js/bundle.report.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/report/js/report.js"></script>
<script src="/report/js/flotcandle.js"></script>
<script src="/report/js/loopalyzer.js"></script>
</body>
</html>
+107
View File
@@ -0,0 +1,107 @@
'use strict';
var CACHE = '<%= locals.cachebuster %>';
const CACHE_LIST = [
'/',
'/images/launch.png',
'/images/apple-touch-icon-57x57.png',
'/images/apple-touch-icon-60x60.png',
'/images/apple-touch-icon-72x72.png',
'/images/apple-touch-icon-76x76.png',
'/images/apple-touch-icon-114x114.png',
'/images/apple-touch-icon-120x120.png',
'/images/apple-touch-icon-144x144.png',
'/images/apple-touch-icon-152x152.png',
'/images/apple-touch-icon-180x180.png',
'/images/favicon-32x32.png',
'/images/android-chrome-192x192.png',
'/images/favicon-96x96.png',
'/images/favicon-16x16.png',
'/manifest.json',
'/images/favicon.ico',
'/images/mstile-144x144.png',
'/css/ui-darkness/jquery-ui.min.css',
'/css/jquery.tooltips.css',
'/audio/alarm.mp3',
'/audio/alarm2.mp3',
'/css/ui-darkness/images/ui-icons_ffffff_256x240.png',
'/css/ui-darkness/images/ui-icons_cccccc_256x240.png',
'/css/ui-darkness/images/ui-bg_inset-soft_25_000000_1x100.png',
'/css/ui-darkness/images/ui-bg_gloss-wave_25_333333_500x100.png',
'/css/main.css',
'/bundle/js/bundle.app.js',
'/bundle/js/bundle.clock.js',
'/bundle/js/bundle.report.js',
'/socket.io/socket.io.js',
'/js/client.js',
'/images/logo2.png'
];
// Open a cache and use `addAll()` with an array of assets to add all of them
// to the cache. Return a promise resolving when all the assets are added.
function precache() {
return caches.open(CACHE).then(function (cache) {
return cache.addAll(CACHE_LIST);
});
}
// Open the cache where the assets were stored and search for the requested
// resource. Notice that in case of no matching, the promise still resolves
// but it does with `undefined` as value.
function fromCache(request) {
return caches.open(CACHE).then(function (cache) {
return cache.match(request).then(function (matching) {
return matching || Promise.reject('no-match');
});
});
}
// Update consists in opening the cache, performing a network request and
// storing the new response data.
function update(request) {
return caches.open(CACHE).then(function (cache) {
return fetch(request).then(function (response) {
return cache.put(request, response);
});
});
}
// On install, cache some resources.
self.addEventListener('install', function(evt) {
//console.log('The service worker is being installed.');
evt.waitUntil(precache());
});
function inCache(request) {
let found = false;
CACHE_LIST.forEach( function (e) {
if (request.url.endsWith(e)) {
found = true;
}
});
return found;
}
self.addEventListener('fetch', function(evt) {
if (!evt.request.url.startsWith(self.location.origin) || CACHE === 'developmentMode' || !inCache(evt.request) || evt.request.method !== 'GET') {
//console.log('Skipping cache for ', evt.request.url);
return void evt.respondWith(fetch(evt.request));
}
//console.log('Returning cached for ', evt.request.url);
evt.respondWith(fromCache(evt.request));
evt.waitUntil(update(evt.request));
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return cacheNames.filter((cacheName) => CACHE !== cacheName);
}).then((unusedCaches) => {
//console.log('DESTROYING CACHE', unusedCaches.join(','));
return Promise.all(unusedCaches.map((unusedCache) => {
return caches.delete(unusedCache);
}));
}).then(() => self.clients.claim())
);
});