ServiceWorkerWebTest/index.html at main · TTiVentures/ServiceWorkerWebTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <!--<link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">-->
  </head>
  <body>
    <main>
        <h1>Service Worker Test</h1>
        <br>

        <h2>Information:</h2>
        <p>When you load this web page for the first time, you will see the objects included in the index.html file.</p>
        <p>When you reload this web, you will see the objects fetched from the service worker.</p>
        <hr>
        <br>

        <h2>Fetching an iframe:</h2>
        <iframe src="iframe1.htm" height="100" width="800" title="The iframe fetched"></iframe>
        <hr>
        <br>

        <h2>Fetching an image:</h2>
        <img src="image1.png" alt="A simple image">
        <hr>
        <br>

        <h2>Fetching a video:</h2>
        <video id="videoTag" controls loop muted playsinline poster="" preload><!-- preload="none" -->
            <source src="" type="video/webm" id="VideoSource">
            Your browser does not support the video tag.
        </video>
        <p>If you are seeing the Big Buck Bunny trailer video (from <a href="https://wiki.yoctoproject.org/wiki/File:Big-buck-bunny_trailer.webm">wiki.yoctoproject.org</a>), then the onfetch function was not called and the service worker has not fetched the call.</p>
        <p>If you are seeing NASA-Imagery video (from <a href="https://file-examples.com/index.php/sample-video-files/sample-webm-files-download/">Pixabay</a>), then the service worker has fetched the call and changed the video.</p>
        <hr>
        <br>
    </main>
  </body>
</html>

<script type="application/javascript">

    window.addEventListener('load', () => {
        let videoTag = document.getElementById("videoTag");
        let videoSource = document.getElementById("VideoSource");
        videoSource.src = "big-buck-bunny_trailer.webm?t=".concat(Date.now());
        videoTag.load();
        videoTag.play();


        if (('serviceWorker' in navigator) && navigator && navigator.serviceWorker) {
            navigator.serviceWorker.register('service-worker-test.js').then(
                () => {
                    console.log("Service Worker registered!");
                },
                err => {
                    console.error('Service Worker registration failed! 😱', err);
                }
            )
        }
    });
</script>