sohotcall

Service Worker Example - Website Works Offline

Sep 22nd, 2020 (edited)
371
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*//////////////////////////
  2. // /serviceWorker/index.html
  3. ///////////~BEGIN~////////*/
  4. <link rel=stylesheet href=style.css />
  5. <h1>Service Worker Test</h1>
  6. <div id=thediv ></div>
  7. <script src=script.js ></script>
  8. <script>
  9. if ( 'serviceWorker' in navigator ){
  10.     window.addEventListener( 'load', () => {
  11.         navigator.serviceWorker.register( "./serviceWorker.js" ).then( ( registration ) => {
  12.             console.log( `ServiceWorker registration successful with scope: ${registration.scope}.` )
  13.         }, ( err ) => {
  14.             console.log( `ServiceWorker registration failed: ${err}.` )
  15.         } )
  16.     } )
  17. }
  18. </script>
  19. /*/////////~END~//////////*/
  20.  
  21. <script>
  22.  
  23. /*////////////////////////////////
  24. // /serviceWorker/serviceWorker.js
  25. ///////////~BEGIN~//////////////*/
  26. let CACHE_VERSION = "MY-CACHE-v3";
  27. let urlsToCache = [
  28.     "/serviceWorker-test/index.html",
  29.     // "/serviceWorker-test/serviceWorker.js",
  30.     "/serviceWorker-test/script.js",
  31.     "/serviceWorker-test/style.css"
  32. ]
  33. self.addEventListener( 'install', ( event ) => {
  34.     console.log( "serviceWorker installing" );
  35.     event.waitUntil( caches.open( CACHE_VERSION ).then( ( cache ) => {
  36.         console.log( "Cache is opened." )
  37.         return cache.addAll( urlsToCache )
  38.     } ) )
  39. } )
  40. self.addEventListener( 'fetch', ( event ) => {
  41.     console.log( `serviceWorker fetching ${event.request.url}` );
  42.     event.respondWith( caches.match( event.request ).then( ( cacheResponse ) => {
  43.         //if ( cacheResponse )
  44.         //  return cacheResponse
  45.         return fetch( event.request ).then( ( response ) => {
  46.             if ( ! response || response.status !== 200 || response.type !== 'basic' )
  47.                 return cacheResponse || response
  48.             var responseToCache = response.clone()
  49.             caches.open( CACHE_VERSION ).then( ( cache ) => {
  50.                 cache.put( event.request, responseToCache )
  51.             } )
  52.             return response
  53.         } )
  54.     } ) )
  55. } )
  56. self.addEventListener( 'activate', ( event ) => {
  57.     console.log( "serviceWorker activating" );
  58.     event.waitUntil(
  59.         caches.keys().then( ( cacheNames ) => {
  60.             return Promise.all(
  61.                 cacheNames.map( ( cacheName ) => {
  62.                     if ( cacheName !== CACHE_VERSION )
  63.                         return caches.delete( cacheName )
  64.                 } )
  65.             )
  66.         } )
  67.     )
  68. } )
  69. /*////////////~END~/////////////*/
  70.  
  71. /*/////////////////////////
  72. // /serviceWorker/script.js
  73. ///////////~BEGIN~///////*/
  74. document.querySelector("#thediv").innerHTML = "Ini adalah contoh kura-kura ninja."
  75. /*//////////~END~////////*/
  76.  
  77. </script>
  78.  
  79. <style>
  80.  
  81. /*/////////////////////////
  82. // /serviceWorker/style.css
  83. //////////~BEGIN~////////*/
  84. html { font-size: 12pt; }
  85. h1 { font-size: 1.5rem; }
  86. #thediv { background-color: yellow; }
  87. /*/////////~END~/////////*/
  88.  
  89. </style>
  90.  
RAW Paste Data