Service Worker Example - Website Works Offline

/*//////////////////////////
// /serviceWorker/index.html
///////////~BEGIN~////////*/
<link rel=stylesheet href=style.css />
<h1>Service Worker Test</h1>
<div id=thediv ></div>
<script src=script.js ></script>
<script>
if ( 'serviceWorker' in navigator ){
    window.addEventListener( 'load', () => {
        navigator.serviceWorker.register( "./serviceWorker.js" ).then( ( registration ) => {
            console.log( `ServiceWorker registration successful with scope: ${registration.scope}.` )
        }, ( err ) => {
            console.log( `ServiceWorker registration failed: ${err}.` )
        } )
    } )
}
</script>
/*/////////~END~//////////*/

<script>

/*////////////////////////////////
// /serviceWorker/serviceWorker.js
///////////~BEGIN~//////////////*/
let CACHE_VERSION = "MY-CACHE-v3";
let urlsToCache = [
    "/serviceWorker-test/index.html",
    // "/serviceWorker-test/serviceWorker.js",
    "/serviceWorker-test/script.js",
    "/serviceWorker-test/style.css"
]
self.addEventListener( 'install', ( event ) => {
    console.log( "serviceWorker installing" );
    event.waitUntil( caches.open( CACHE_VERSION ).then( ( cache ) => {
        console.log( "Cache is opened." )
        return cache.addAll( urlsToCache )
    } ) )
} )
self.addEventListener( 'fetch', ( event ) => {
    console.log( `serviceWorker fetching ${event.request.url}` );
    event.respondWith( caches.match( event.request ).then( ( cacheResponse ) => {
        //if ( cacheResponse )
        //  return cacheResponse
        return fetch( event.request ).then( ( response ) => {
            if ( ! response || response.status !== 200 || response.type !== 'basic' )
                return cacheResponse || response
            var responseToCache = response.clone()
            caches.open( CACHE_VERSION ).then( ( cache ) => {
                cache.put( event.request, responseToCache )
            } )
            return response
        } )
    } ) )
} )
self.addEventListener( 'activate', ( event ) => {
    console.log( "serviceWorker activating" );
    event.waitUntil(
        caches.keys().then( ( cacheNames ) => {
            return Promise.all(
                cacheNames.map( ( cacheName ) => {
                    if ( cacheName !== CACHE_VERSION )
                        return caches.delete( cacheName )
                } )
            )
        } )
    )
} )
/*////////////~END~/////////////*/

/*/////////////////////////
// /serviceWorker/script.js
///////////~BEGIN~///////*/
document.querySelector("#thediv").innerHTML = "Ini adalah contoh kura-kura ninja."
/*//////////~END~////////*/

</script>

<style>

/*/////////////////////////
// /serviceWorker/style.css
//////////~BEGIN~////////*/
html { font-size: 12pt; }
h1 { font-size: 1.5rem; }
#thediv { background-color: yellow; }
/*/////////~END~/////////*/

</style>