64 lines
2.1 KiB
HTML
64 lines
2.1 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>
|
|||
|
|
</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>
|