Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

serviceWorker.js 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. 'use strict';
  2. // NOTE: CacheKey & FilesToCache Lists
  3. const cacheKey = 'omapp-';
  4. const staticCacheKey = cacheKey + 's-v' + '1';
  5. const dataCacheKey = casheKey + 'd-v' + '1';
  6. const staticFilesToCache = [
  7. '/',
  8. '/manifest.json',
  9. '/index.html',
  10. '/message.html',
  11. '/bookmark.js',
  12. '/createMessage.js',
  13. '/files.js',
  14. '/home.js',
  15. '/main.js',
  16. '/profil.js',
  17. '/favicon.ico',
  18. '/img/th_nbg_ohmicon_amp.png',
  19. '/lib/jquery-3.3.1.min.js',
  20. '/lib/vue.js',
  21. '/lib/vue-router.js',
  22. '/style/style.css',
  23. ];
  24. const dataFilesToCache = [
  25. '',
  26. ];
  27. // NOTE: Registration done in main.js
  28. // NOTE: Install and activate: Populating cache
  29. // Install new service worker even when old version still in use.
  30. // Install happens only once a lifetime of a service worker.
  31. self.addEventListener('install', function(event) {
  32. console.log('[ServiceWorker] Install');
  33. // don't wait
  34. self.skipWaiting();
  35. // cache static files
  36. event.waitUntil(
  37. caches.open(staticCacheKey).then(function(cache) {
  38. console.log('[ServiceWorker] Cache static files.');
  39. return cache.addAll(staticFilesToCache);
  40. }),
  41. caches.open(dataCacheKey).then(function(cache) {
  42. console.log('[ServiceWorker] Cache data files.');
  43. return cache.addAll(dataFilesToCache);
  44. })
  45. );
  46. });
  47. // NOTE: Activate structure and delete older cache versions
  48. // Activates new version of service worker.
  49. // No fetch or pull is called before succesfull activate event.
  50. self.addEventListener('activate', function(event) {
  51. clients.claim();
  52. var cacheWhitelist = [staticCacheKey, dataCacheKey];
  53. event.waitUntil(
  54. caches.keys().then(function(cacheKeyList) {
  55. return Promise.all(
  56. cacheKeyList.map(function(key) {
  57. if (cacheWhitelist.indexOf(key) === -1) {
  58. console.log('[ServiceWorker] Removing old cache', key);
  59. return caches.delete(key);
  60. }
  61. })
  62. );
  63. }).then(() => {
  64. console.log('[ServiceWorker] Activate');
  65. })
  66. );
  67. // Shorten activation time for initial [ServiceWorker] call.
  68. //return self.clients.claim();
  69. });
  70. // NOTE: Fetch structure // TODO: Setup fetching method
  71. self.addEventListener('fetch', function(event) {
  72. const dataUrl = ' localhost:8888/'; // Provide HTTPS URL for query data.
  73. // const url = new URL(event.request.url);
  74. console.log('[ServiceWorker] Fetch', event.request.url);
  75. //if (event.request.url.indexOf(dataUrl) > -1) {
  76. /*
  77. * When the request URL contains dataUrl, the app is asking for fresh
  78. * data. In this case, the service worker always goes to the network
  79. * and then caches the response. This is called
  80. * the "Cache then network" strategy:
  81. * https://jakearchibald.com/2014/offline-cookbook/#cache-then-network
  82. */
  83. /*event.respondWith(
  84. caches.open(staticCacheKey).then(function(cache) {
  85. return fetch(event.request).then(function(response) {
  86. cache.put(event.request.url, response.clone());
  87. return response;
  88. });
  89. })
  90. );
  91. } else {
  92. */
  93. /*
  94. * The app is asking for app shell files. In this scenario the app uses the
  95. * "Cache, falling back to the network" offline strategy:
  96. * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network
  97. */
  98. /*
  99. // serve the cat SVG from the cache if the request is
  100. // same-origin and the path is '/dog.svg'
  101. if (url.origin == location.origin && url.pathname == '/dog.svg') {
  102. event.respondWith(caches.match('/cat.svg'));
  103. }
  104. */
  105. event.respondWith(
  106. caches.match(event.request)
  107. .then(function(response) {
  108. if (response) {
  109. return response;
  110. }
  111. return fetch(event.request).then(
  112. function(response) {
  113. // Check if we received a valid response
  114. // - Ensure the response is valid.
  115. // - Check the status is 200 on the response.
  116. // - Make sure the response type is basic, which indicates that it's a request from our origin.
  117. // This means that requests to third party assets aren't cached as well.
  118. if(!response || response.status !== 200 || response.type !== 'basic') {
  119. return response;
  120. }
  121. // IMPORTANT: Clone the response. A response is a stream
  122. // and because we want the browser to consume the response
  123. // as well as the cache consuming the response, we need
  124. // to clone it so we have two streams.
  125. // - Reason: response is a stream and object can only consumed once
  126. var responseToCache = response.clone();
  127. caches.open(staticCacheKey)
  128. .then(function(cache) {
  129. cache.put(event.request, responseToCache);
  130. });
  131. return response;
  132. }
  133. );
  134. })
  135. );
  136. //}
  137. /*
  138. caches.match(event.request).then(cachedResponse => {
  139. if (cachedResponse) {
  140. return cachedResponse;
  141. }
  142. return caches.open(shellCacheKey).then(cache => {
  143. return fetch(event.request).then(response => {
  144. // Put a copy of the response in the runtime cache.
  145. return cache.put(event.request, response.clone()).then(() => {
  146. return response;
  147. });
  148. });
  149. });
  150. })*/
  151. });