16th Javascript Project - Add Website to Cache and View Offline Tutorial with Source Code
add website to browser cache and view offline Source Code:
https://drive.google.com/open?id=1b0u...
Whats in this video
1. how to add css,js,html files in browser cache
2. how to delete old cache
3. how to preserve Log in chromeinspector
4. how to offline in chromeinspector
5. how to view cache files in chromeinspector
steps to follow:
1. register serviceworker
1.1 check if serviceworker is allowed in your chrome browser
1.2 add listener to windows
1.3 register using inbuilt function navigator.serviceWorker.register()
2. install serviceworker
2.1. add listener 'install' to self i.e registered serviceWorker
2.2. use waitUntil() function
2.3. create cache key
2.4. choose cache files and store in array
2.5. open cache using default function caches.open()
2.6. use addAll() function to load the cache files
2.7 exit from waiting using self.skipWaiting()
2.8 try adding new version - it will accept
2.9 try to go offline and check, its not activated yet
3. activate serviceworker
3.1. add listener activate' to self i.e registered serviceWorker
3.2. use waitUntil() function
3.3. get all keys in cache file
3.4 return all keys to delete the old one using promise.all()
3.5 use map() function of array to perform operation(delete old)
3.6 return and delete the old cache files using caches.delete()
3.7 try adding new version it will delete the old cache files
3.9 try to go offline and check, data is not fetched yet
4. fetch serviceworker
4.1. add listener fetch' to self i.e registered serviceWorker
4.2 use respondWith() function
4.3 fetch the request
4.4. if it fails use the cache file
This is the completed UI Design Javascript Tutorial. I created along with my 3years experience in Javascript UI Development. I have left the source code for every javascript ui tutorial for free.
contact me anytime for the source code:
[email protected]
