mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-20 13:31:12 +02:00
add gulp task for preview sw
This commit is contained in:
@@ -18,3 +18,8 @@
|
||||
- Test out the extension by loading the `extension` folder.
|
||||
- If everything is good, push to master.
|
||||
- Zip the folder and submit to webstore.
|
||||
|
||||
## Sidenotes
|
||||
|
||||
- The /preview folder needs to hosted on separate domain (wbmakr.com on production)
|
||||
- Whenever something changes in /preview folder, the built version of /preview (inside /create) needs to re-uploaded
|
||||
|
120
gulpfile.js
120
gulpfile.js
@@ -187,6 +187,125 @@ gulp.task('generate-service-worker', function (callback) {
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* This task generates a service worker for the preview domain (inside iframe).
|
||||
* It first generates a precaching worker using sw-precache, then adds custom
|
||||
* code to handle the virtual filesystem for files mode
|
||||
*/
|
||||
gulp.task('generate-preview-service-worker', function (callback) {
|
||||
var swPrecache = require('sw-precache');
|
||||
var rootDir = `${APP_FOLDER}/preview`;
|
||||
|
||||
// First generate the base service worker with sw-precache
|
||||
swPrecache.write(
|
||||
`${rootDir}/service-worker.js`,
|
||||
{
|
||||
staticFileGlobs: [
|
||||
rootDir + '/**/*.{js,html,htm,css,png,jpg,gif,svg,eot,ttf,woff}'
|
||||
],
|
||||
stripPrefix: `${rootDir}/`,
|
||||
maximumFileSizeToCacheInBytes: 29000,
|
||||
clientsClaim: true
|
||||
},
|
||||
function (error) {
|
||||
if (error) {
|
||||
callback(error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Read the generated service worker
|
||||
var swContent = fs.readFileSync(`${rootDir}/service-worker.js`, 'utf8');
|
||||
|
||||
const pattern =
|
||||
/self\.addEventListener\(\s*['"]fetch['"]\s*,\s*function\s*\(([^)]*)\)\s*\{([\s\S]*?)^\}\s*\);/m;
|
||||
|
||||
swContent = swContent.replace(pattern, function (match, args, body) {
|
||||
return `function fetchHandler(${args}) {${body}\n}`;
|
||||
});
|
||||
|
||||
// Add our custom code after the generated code
|
||||
var customCode = `
|
||||
// Custom code for handling message events and caching
|
||||
const CACHE_NAME = 'webmaker-vfiles';
|
||||
|
||||
function getContentType(url) {
|
||||
if (url.match(/\\.html$/)) {
|
||||
return 'text/html; charset=UTF-8';
|
||||
} else if (url.match(/\\.css$/)) {
|
||||
return 'text/css; charset=UTF-8';
|
||||
} else if (url.match(/\\.js$/)) {
|
||||
return 'application/javascript; charset=UTF-8';
|
||||
} else if (url.match(/\\.json$/)) {
|
||||
return 'application/json; charset=UTF-8';
|
||||
}
|
||||
return 'text/html; charset=UTF-8';
|
||||
}
|
||||
|
||||
self.addEventListener('message', function(e) {
|
||||
if (!e.data) return;
|
||||
|
||||
caches.open(CACHE_NAME).then(function(cache) {
|
||||
for (const url in e.data) {
|
||||
if (Object.prototype.hasOwnProperty.call(e.data, url)) {
|
||||
const response = new Response(e.data[url], {
|
||||
headers: {
|
||||
'Content-Type': getContentType(url)
|
||||
}
|
||||
});
|
||||
cache.put(url, response);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function(event) {
|
||||
//console.log('fetch event', event.request.url, event.request);
|
||||
// First, remove all the ignored parameters and hash fragment, and see if we
|
||||
// have that URL in our cache. If so, great! shouldRespond will be true.
|
||||
var url = stripIgnoredUrlParameters(event.request.url, ignoreUrlParametersMatching);
|
||||
const isAppFile = urlsToCacheKeys.has(url);
|
||||
|
||||
if(isAppFile){
|
||||
return fetchHandler(event);
|
||||
}
|
||||
|
||||
|
||||
event.respondWith(
|
||||
caches.open(CACHE_NAME).then(function(cache) {
|
||||
return cache
|
||||
.match(event.request)
|
||||
.then(response => {
|
||||
// console.log('responding with ', response);
|
||||
if (response !== undefined) {
|
||||
return response;
|
||||
}
|
||||
return fetch(event.request);
|
||||
})
|
||||
.catch(function(e) {
|
||||
// Fall back to just fetch()ing the request if some unexpected error
|
||||
// prevented the cached response from being valid.
|
||||
console.warn(
|
||||
'Could not serve response for "%s" from cache: %O',
|
||||
event.request.url,
|
||||
e
|
||||
);
|
||||
return fetch(event.request);
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
`;
|
||||
|
||||
// Append our custom code to the generated service worker
|
||||
swContent += customCode;
|
||||
|
||||
// Write the final service worker file
|
||||
fs.writeFileSync(`${rootDir}/service-worker.js`, swContent, 'utf8');
|
||||
callback();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
gulp.task('packageExtension', function () {
|
||||
child_process.execSync('rm -rf extension');
|
||||
child_process.execSync(`cp -R ${APP_FOLDER} extension`);
|
||||
@@ -250,6 +369,7 @@ exports.release = series(
|
||||
'concatSwRegistration',
|
||||
'minify',
|
||||
'generate-service-worker',
|
||||
'generate-preview-service-worker',
|
||||
'packageExtension',
|
||||
'buildDistFolder',
|
||||
'cleanup',
|
||||
|
Reference in New Issue
Block a user