From acc7964f0edc7b607756ef7cc284df47d735d576 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 21:21:49 -0800 Subject: [PATCH] Service worker for intercepting URLs and loading them from IPFS. --- index.html | 2 +- package.json | 2 +- src/index.js | 73 ++++++----------------------------------------- webpack.config.js | 35 ++++++++++++++--------- 4 files changed, 33 insertions(+), 79 deletions(-) diff --git a/index.html b/index.html index 8f4ad7f..5950de3 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,6 @@ - + diff --git a/package.json b/package.json index 95580f1..d182772 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,6 @@ "webpack-dev-server": "^2.4.5" }, "dependencies": { - "ipfs": "0.27.3" + "ipfs": "0.27.1" } } diff --git a/src/index.js b/src/index.js index 17bc93d..84539ca 100644 --- a/src/index.js +++ b/src/index.js @@ -3,77 +3,22 @@ const IPFS = require('ipfs') -function materialize_references_to_ipfs_content(node, element) { - // Given an IPFS node and a DOM element with a relevant attribute referring to content on IPFS, - // load that content and set it into the attribute as a blob. - // - // Return a promise for doing all of that. - for (let attribute_name of ['content', 'href', 'src', 'style']) { - let attribute_value = element.getAttribute(attribute_name) - - if (attribute_value && attribute_value.includes('./')) { - let base_hash = window.location.pathname.match(/(^\/ipfs\/\w+)/)[1] - let anchor = document.createElement('a') - let relative_url = attribute_value.match(/(.\/[^)]*)/)[1] // Match "./foo/bar/baz" - anchor.href = base_hash + relative_url.slice(1) - console.log('loading IPFS sub-content for ' + anchor.pathname) - - return node.files.cat(anchor.pathname).then(function (contents_buffer) { - let materialized_value = attribute_value.replace( - relative_url, - URL.createObjectURL(new Blob([contents_buffer])) - ) - element.setAttribute(attribute_name, materialized_value) - }) - } - } -} - - function App() { let node create() function create() { - node = new IPFS({ - config: { - Addresses: { - Swarm: [ -// '/dns4/wrtc-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star' - ] - } - } - }) - - node.on('ready', () => { - console.log('IPFS node is ready') - console.log('loading IPFS content for ' + window.location.pathname) - - // Load the page contents for the IPFS hash. - node.files.cat(window.location.pathname) - .then(function (contents_buffer) { - let iframe = document.createElement('iframe') - iframe.style = 'width: 100%; height: 100%; border: 0; overflow: hidden' - - // TODO: Should only do this if it's actually an HTML document. Need to gracefully skip this for other content types. - let contents_document = new DOMParser().parseFromString(contents_buffer.toString(), 'text/html') - let elements = contents_document.querySelectorAll('div,link,meta,script') - let promises = [] - - for (let element of elements) { - promises.push(materialize_references_to_ipfs_content(node, element)) - } - - Promise.all(promises).then(function () { - iframe.src = URL.createObjectURL( - new Blob([contents_document.documentElement.innerHTML]) - ) - - document.body.appendChild(iframe) - }) + // TODO: After initial registration, trigger a fetch event for the page in the service worker. + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/fetcher.js') + .then((registration) => { + console.log('Registered the service worker successfully') }) - }) + .catch((err) => { + console.log('Failed to register:', err) + }) + } } } diff --git a/webpack.config.js b/webpack.config.js index 9f5869e..b04e1d0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,27 +2,36 @@ var path = require('path') var webpack = require('webpack') -const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); +//const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { - devtool: 'eval', - entry: [ - './src/index' - ], + devtool: 'source-map', + entry: { + 'bundle': './src/index', + 'fetcher': './src/fetcher' + }, output: { path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' + filename: '[name].js', + sourceMapFilename: '[name].js.map', + publicPath: '/' }, plugins: [ - new UglifyJSPlugin() +// new UglifyJSPlugin() ], module: { - loaders: [{ - test: /\.js$/, -// loaders: ['babel-loader'], - include: path.join(__dirname, 'src') - }, /*{ test: /\.json$/, loader: 'json-loader' }*/] + loaders: [ + { + test: /\.js$/, +// loaders: ['babel-loader'], + include: path.join(__dirname, 'src'), + exclude: [/fetcher/] + }, /*{ test: /\.json$/, loader: 'json-loader' }*/ + { + test: /\.js$/, + include: [/fetcher/] + } + ] }, node: { fs: 'empty',