swcache/index.html

67 lines
2.3 KiB
HTML
Raw Permalink Normal View History

2020-11-20 15:20:23 +01:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example - Service worker for caching images</title>
<link rel="stylesheet" type="text/css" href="/css/materialize.css"/>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="main" class="container">
<h3>Service worker for caching image - Modified - Modified</h3>
<div class="row">
<div class="col s12 m4">
<img src="/imgs/180295.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
</div>
<div class="col s12 m4">
<img src="/imgs/180343.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
</div>
<div class="col s12 m4">
<img src="/imgs/180401.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
</div>
<div class="col s12 m4">
<img src="/imgs/1920x1200-Linux Widescreen705729403.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
</div>
<div class="col s12 m4">
<img src="/imgs/2551508.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
</div>
2020-11-23 13:27:17 +01:00
<div class="col s12 m4">
<img src="/imgs/vj73avvswvg11.png" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
</div>
2020-11-20 15:20:23 +01:00
</div>
</div>
<script type="text/javascript">
/***
***
***
First of all: we need to register service worker
- The first line performs a feature detection test to make sure service workers are supported before trying to register one
NOTE:
A single service worker can control many pages. Each time a page within your scope is loaded,
the service worker is installed against that page and operates on it.
Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesnt get its own unique worker.
- "scope" param specifies the subset of content controlled by worker.
***
***
*/
if ('serviceWorker' in navigator) {
2020-11-27 12:04:09 +01:00
navigator.serviceWorker.register('/cachersw.js', {scope: '/'})
2020-11-20 15:20:23 +01:00
.then((reg) => {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch((error) => {
// registration failed
console.log('Registration failed with ' + error);
});
}
</script>
</body>
</html>