1+ const version = 8 ;
2+ let staticName = `staticCache-${ version } ;
3+ let dynamicName = `dynamicCache` ;
4+ let imageName = `imageCache-${ version } ;
5+ let options = {
6+ ignoreSearch : false ,
7+ ignoreMethod : false ,
8+ ignoreVary : false ,
9+ } ;
10+ //starter html and css and js files
11+ let assets = [ '/' , '/index.html' , '/css/main.css' , '/js/app.js' , '/404.html' ] ;
12+ //starter images
13+ let imageAssets = [ '/img/1011-800x600.jpg' , '/img/distracted-boyfriend.png' ] ;
14+
15+ self . addEventListener ( 'install' , ( ev ) => {
16+ // service worker has been installed.
17+ //Extendable Event
18+ console . log ( `Version ${ version } ) ;
19+ // build a cache
20+ ev . waitUntil (
21+ caches
22+ . open ( staticName )
23+ . then ( ( cache ) => {
24+ cache . addAll ( assets ) . then (
25+ ( ) => {
26+ //addAll == fetch() + put()
27+ console . log ( `${ staticName } ) ;
28+ } ,
29+ ( err ) => {
30+ console . warn ( `failed to update ${ staticName } ) ;
31+ }
32+ ) ;
33+ } )
34+ . then ( ( ) => {
35+ caches . open ( imageName ) . then ( ( cache ) => {
36+ cache . addAll ( imageAssets ) . then (
37+ ( ) => {
38+ console . log ( `${ imageName } ) ;
39+ } ,
40+ ( err ) => {
41+ console . warn ( `failed to update ${ staticName } ) ;
42+ }
43+ ) ;
44+ } ) ;
45+ } )
46+ ) ;
47+ } ) ;
48+
49+ self . addEventListener ( 'activate' , ( ev ) => {
50+ // when the service worker has been activated to replace an old one.
51+ //Extendable Event
52+ console . log ( 'activated' ) ;
53+ // delete old versions of caches.
54+ ev . waitUntil (
55+ caches . keys ( ) . then ( ( keys ) => {
56+ return Promise . all (
57+ keys
58+ . filter ( ( key ) => {
59+ if ( key != staticName && key != imageName ) {
60+ return true ;
61+ }
62+ } )
63+ . map ( ( key ) => caches . delete ( key ) )
64+ ) . then ( ( empties ) => {
65+ //empties is an Array of boolean values.
66+ //one for each cache deleted
67+ } ) ;
68+ } )
69+ ) ;
70+ } ) ;
71+
72+ self . addEventListener ( 'fetch' , ( ev ) => {
73+ // Extendable Event.
74+ console . log ( `MODE: ${ ev . request . mode } ${ ev . request . url } ) ;
75+
76+ ev . respondWith (
77+ caches . match ( ev . request ) . then ( ( cacheRes ) => {
78+ return (
79+ cacheRes ||
80+ Promise . resolve ( ) . then ( ( ) => {
81+ let opts = {
82+ mode : ev . request . mode , //cors, no-cors, same-origin, navigate
83+ cache : 'no-cache' ,
84+ } ;
85+
86+ if ( ! ev . request . url . startsWith ( location . origin ) ) {
87+ //not on the same domain as my html file
88+ opts . mode = 'cors' ;
89+ opts . credentials = 'omit' ;
90+ }
91+ return fetch ( ev . request . url , opts ) . then (
92+ ( fetchResponse ) => {
93+ //we got a response from the server.
94+ if ( fetchResponse . ok ) {
95+ return handleFetchResponse ( fetchResponse , ev . request ) ;
96+ }
97+ //not ok 404 error
98+ if ( fetchResponse . status == 404 ) {
99+ if ( ev . request . url . match ( / \. h t m l / i) ) {
100+ return caches . open ( staticName ) . then ( ( cache ) => {
101+ return cache . match ( '/404.html' ) ;
102+ } ) ;
103+ }
104+ if (
105+ ev . request . url . match ( / \. j p g $ / i) ||
106+ ev . request . url . match ( / \. p n g $ / i)
107+ ) {
108+ return caches . open ( imageName ) . then ( ( cache ) => {
109+ return cache . match ( '/img/distracted-boyfriend.png' ) ;
110+ } ) ;
111+ }
112+ }
113+ } ,
114+ ( err ) => {
115+ //this is the network failure
116+ //return the 404.html file if it is a request for an html file
117+ if ( ev . request . url . match ( / \. h t m l / i) ) {
118+ return caches . open ( staticName ) . then ( ( cache ) => {
119+ return cache . match ( '/404.html' ) ;
120+ } ) ;
121+ }
122+ }
123+ ) ;
124+ //.catch()
125+ } )
126+ ) ;
127+ } ) //end of match().then()
128+ ) ; //end of respondWith
129+ } ) ; //end of fetch listener
130+
131+ const handleFetchResponse = ( fetchResponse , request ) => {
132+ let type = fetchResponse . headers . get ( 'content-type' ) ;
133+ // console.log('handle request for', type, request.url);
134+ if ( type && type . match ( / ^ i m a g e \/ / i) ) {
135+ //save the image in image cache
136+ console . log ( `SAVE ${ request . url } ) ;
137+ return caches . open ( imageName ) . then ( ( cache ) => {
138+ cache . put ( request , fetchResponse . clone ( ) ) ;
139+ return fetchResponse ;
140+ } ) ;
141+ } else {
142+ //save in dynamic cache - html, css, fonts, js, etc
143+ console . log ( `SAVE ${ request . url } ) ;
144+ return caches . open ( dynamicName ) . then ( ( cache ) => {
145+ cache . put ( request , fetchResponse . clone ( ) ) ;
146+ return fetchResponse ;
147+ } ) ;
148+ }
149+ } ;
150+
151+ self . addEventListener ( 'message' , ( ev ) => {
152+ //message from web page ev.data.
153+ //Extendable Event
154+ } ) ;
0 commit comments