btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ PWA

Browse Source
This commit is contained in:
liyasthomas
2019-08-22 10:10:40 +05:30
parent 1619c94062
commit 5b90289dd4
2 changed files with 124 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -69,7 +69,7 @@
<main id="app"> <main id="app">
<header> <header>
<div> <div>
<a href="/"> <a href="">
<h1 class="logo">Postwoman</h1> <h1 class="logo">Postwoman</h1>
</a> </a>
<h3>API request builder</h3> <h3>API request builder</h3>

247
sw.js
View File

@@ -1,149 +1,148 @@
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'); importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) { if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`); console.log(`Yay! Workbox is loaded 🎉`);
} else { } else {
console.log(`Boo! Workbox didn't load 😬`); console.log(`Boo! Workbox didn't load 😬`);
} }
workbox.routing.registerRoute( workbox.routing.registerRoute(
new RegExp('.*\.js'), new RegExp('.*\.js'),
new workbox.strategies.NetworkFirst() new workbox.strategies.NetworkFirst()
); );
workbox.routing.registerRoute( workbox.routing.registerRoute(
// Cache CSS files. // Cache CSS files.
/\.css$/, /\.css$/,
// Use cache but update in the background. // Use cache but update in the background.
new workbox.strategies.StaleWhileRevalidate({ new workbox.strategies.StaleWhileRevalidate({
// Use a custom cache name. // Use a custom cache name.
cacheName: 'css-cache', cacheName: 'css-cache',
}) })
); );
workbox.routing.registerRoute( workbox.routing.registerRoute(
// Cache image files. // Cache image files.
/\.(?:png|jpg|jpeg|svg|gif)$/, /\.(?:png|jpg|jpeg|svg|gif)$/,
// Use the cache if it's available. // Use the cache if it's available.
new workbox.strategies.CacheFirst({ new workbox.strategies.CacheFirst({
// Use a custom cache name. // Use a custom cache name.
cacheName: 'image-cache', cacheName: 'image-cache',
plugins: [ plugins: [
new workbox.expiration.Plugin({ new workbox.expiration.Plugin({
// Cache only 20 images. // Cache only 20 images.
maxEntries: 20, maxEntries: 20,
// Cache for a maximum of a week. // Cache for a maximum of a week.
maxAgeSeconds: 7 * 24 * 60 * 60, maxAgeSeconds: 7 * 24 * 60 * 60,
}) })
], ],
}) })
); );
workbox.precaching.precacheAndRoute([ workbox.precaching.precacheAndRoute([
'/style.css', '/postwoman/style.css',
'/script.js', '/postwoman/script.js',
{ {
url: '/index.html', url: '/postwoman/index.html',
revision: '383676' revision: '383676'
}, },
]); ]);
var CACHE_VERSION = 1; var CACHE_VERSION = 1;
var CURRENT_CACHES = { var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION prefetch: 'prefetch-cache-v' + CACHE_VERSION
}; };
self.addEventListener('install', function (event) { self.addEventListener('install', function (event) {
var now = Date.now(); var now = Date.now();
var urlsToPrefetch = [ var urlsToPrefetch = [
'index.html', '/postwoman/index.html',
'manage.html'
]; ];
// All of these logging statements should be visible via the "Inspect" interface // All of these logging statements should be visible via the "Inspect" interface
// for the relevant SW accessed via chrome://serviceworker-internals // for the relevant SW accessed via chrome://serviceworker-internals
console.log('Handling install event. Resources to prefetch:', urlsToPrefetch); console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);
event.waitUntil( event.waitUntil(
caches.open(CURRENT_CACHES.prefetch).then(function (cache) { caches.open(CURRENT_CACHES.prefetch).then(function (cache) {
var cachePromises = urlsToPrefetch.map(function (urlToPrefetch) { var cachePromises = urlsToPrefetch.map(function (urlToPrefetch) {
// This constructs a new URL object using the service worker's script location as the base // This constructs a new URL object using the service worker's script location as the base
// for relative URLs. // for relative URLs.
var url = new URL(urlToPrefetch, location.href); var url = new URL(urlToPrefetch, location.href);
// Append a cache-bust=TIMESTAMP URL parameter to each URL's query string. // Append a cache-bust=TIMESTAMP URL parameter to each URL's query string.
// This is particularly important when precaching resources that are later used in the // This is particularly important when precaching resources that are later used in the
// fetch handler as responses directly, without consulting the network (i.e. cache-first). // fetch handler as responses directly, without consulting the network (i.e. cache-first).
// If we were to get back a response from the HTTP browser cache for this precaching request // If we were to get back a response from the HTTP browser cache for this precaching request
// then that stale response would be used indefinitely, or at least until the next time // then that stale response would be used indefinitely, or at least until the next time
// the service worker script changes triggering the install flow. // the service worker script changes triggering the install flow.
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now; url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
// It's very important to use {mode: 'no-cors'} if there is any chance that // It's very important to use {mode: 'no-cors'} if there is any chance that
// the resources being fetched are served off of a server that doesn't support // the resources being fetched are served off of a server that doesn't support
// CORS (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). // CORS (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
// In this example, www.chromium.org doesn't support CORS, and the fetch() // In this example, www.chromium.org doesn't support CORS, and the fetch()
// would fail if the default mode of 'cors' was used for the fetch() request. // would fail if the default mode of 'cors' was used for the fetch() request.
// The drawback of hardcoding {mode: 'no-cors'} is that the response from all // The drawback of hardcoding {mode: 'no-cors'} is that the response from all
// cross-origin hosts will always be opaque // cross-origin hosts will always be opaque
// (https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#cross-origin-resources) // (https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#cross-origin-resources)
// and it is not possible to determine whether an opaque response represents a success or failure // and it is not possible to determine whether an opaque response represents a success or failure
// (https://github.com/whatwg/fetch/issues/14). // (https://github.com/whatwg/fetch/issues/14).
var request = new Request(url, { var request = new Request(url, {
mode: 'no-cors' mode: 'no-cors'
}); });
return fetch(request).then(function (response) { return fetch(request).then(function (response) {
if (response.status >= 400) { if (response.status >= 400) {
throw new Error('request for ' + urlToPrefetch + throw new Error('request for ' + urlToPrefetch +
' failed with status ' + response.statusText); ' failed with status ' + response.statusText);
} }
// Use the original URL without the cache-busting parameter as the key for cache.put(). // Use the original URL without the cache-busting parameter as the key for cache.put().
return cache.put(urlToPrefetch, response); return cache.put(urlToPrefetch, response);
}).catch(function (error) { }).catch(function (error) {
console.error('Not caching ' + urlToPrefetch + ' due to ' + error); console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
}); });
}); });
return Promise.all(cachePromises).then(function () { return Promise.all(cachePromises).then(function () {
console.log('Pre-fetching complete.'); console.log('Pre-fetching complete.');
}); });
}).catch(function (error) { }).catch(function (error) {
console.error('Pre-fetching failed:', error); console.error('Pre-fetching failed:', error);
}) })
); );
}); });
self.addEventListener('activate', function (event) { self.addEventListener('activate', function (event) {
// Delete all caches that aren't named in CURRENT_CACHES. // Delete all caches that aren't named in CURRENT_CACHES.
// While there is only one cache in this example, the same logic will handle the case where // While there is only one cache in this example, the same logic will handle the case where
// there are multiple versioned caches. // there are multiple versioned caches.
var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) { var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
return CURRENT_CACHES[key]; return CURRENT_CACHES[key];
}); });
event.waitUntil( event.waitUntil(
caches.keys().then(function (cacheNames) { caches.keys().then(function (cacheNames) {
return Promise.all( return Promise.all(
cacheNames.map(function (cacheName) { cacheNames.map(function (cacheName) {
if (expectedCacheNames.indexOf(cacheName) === -1) { if (expectedCacheNames.indexOf(cacheName) === -1) {
// If this cache name isn't present in the array of "expected" cache names, then delete it. // If this cache name isn't present in the array of "expected" cache names, then delete it.
console.log('Deleting out of date cache:', cacheName); console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName); return caches.delete(cacheName);
} }
}) })
); );
}) })
); );
}); });
self.addEventListener('fetch', function (event) { self.addEventListener('fetch', function (event) {
console.log('Handling fetch event for', event.request.url); console.log('Handling fetch event for', event.request.url);
event.respondWith( event.respondWith(
// caches.match() will look for a cache entry in all of the caches available to the service worker. // caches.match() will look for a cache entry in all of the caches available to the service worker.
// It's an alternative to first opening a specific named cache and then matching on that. // It's an alternative to first opening a specific named cache and then matching on that.
caches.match(event.request).then(function (response) { caches.match(event.request).then(function (response) {
if (response) { if (response) {
console.log('Found response in cache:', response); console.log('Found response in cache:', response);
return response; return response;
} }
console.log('No response found in cache. About to fetch from network...'); console.log('No response found in cache. About to fetch from network...');
// event.request will always have the proper mode set ('cors, 'no-cors', etc.) so we don't // event.request will always have the proper mode set ('cors, 'no-cors', etc.) so we don't
// have to hardcode 'no-cors' like we do when fetch()ing in the install handler. // have to hardcode 'no-cors' like we do when fetch()ing in the install handler.
return fetch(event.request).then(function (response) { return fetch(event.request).then(function (response) {
console.log('Response from network is:', response); console.log('Response from network is:', response);
return response; return response;
}).catch(function (error) { }).catch(function (error) {
// This catch() will handle exceptions thrown from the fetch() operation. // This catch() will handle exceptions thrown from the fetch() operation.
// Note that a HTTP error response (e.g. 404) will NOT trigger an exception. // Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
// It will return a normal response object that has the appropriate error code set. // It will return a normal response object that has the appropriate error code set.
console.error('Fetching failed:', error); console.error('Fetching failed:', error);
throw error; throw error;
}); });
}) })
); );
}); });