67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!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>
|
||
<div class="col s12 m4">
|
||
<img src="/imgs/vj73avvswvg11.png" style="display:block;width:100%; height: auto; margin-bottom: 10px" />
|
||
</div>
|
||
</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 doesn’t get its own unique worker.
|
||
|
||
- "scope" param specifies the subset of content controlled by worker.
|
||
***
|
||
***
|
||
*/
|
||
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.register('/cachersw.js', {scope: '/'})
|
||
.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>
|