Merge pull request #881 from 3box/feat/iframe-cache

feat: iframe shared ipfs and orbitdb cache/repo

Author: zachferland

package-lock.json

@@ -45,6 +45,7 @@
   "homepage": "https://github.com/3box/3box-js#readme",
   "dependencies": {
     "3box-orbitdb-plugins": "^2.1.2",
+    "3box-shared-cache": "^1.1.0",
     "3id-blockchain-utils": "^0.4.0",
     "3id-connect": "0.1.0",
     "3id-resolver": "^1.0.0",
@@ -63,6 +64,7 @@
     "ipfs-repo": "^3.0.2",
     "is-ipfs": "^1.0.3",
     "js-sha256": "^0.9.0",
+    "levelup": "^4.4.0",
     "libp2p-pubsub": "^0.4.6",
     "lodash.merge": "^4.6.2",
     "muport-did-resolver": "^1.0.2",

package.json

@@ -17,19 +17,25 @@ const IPFSRepo = require('ipfs-repo')
 const LevelStore = require('datastore-level')
 const didJWT = require('did-jwt')
 const { ThreeIdConnect } = require('3id-connect')
+const { IframeCache } = require('3box-shared-cache')
 
 const PINNING_NODE = config.pinning_node
 const ADDRESS_SERVER_URL = config.address_server_url
 const IPFS_OPTIONS = config.ipfs_options
 const RENDEZVOUS_ADDRESS = config.rendezvous_address
-const IFRAME_STORE_URL = 'https://connect.3box.io/v1/index.html'
+const THREEID_CONNECT_URL = config.threeid_connect_url
+const IFRAME_CACHE_URL = config.iframe_cache_url
 const supportAlert = 'This site uses local data storage to give you control of your data. Please enable web APIs like localstorage, indexxeddb, etc in your browser settings.'
 
-let globalIPFS, globalIPFSPromise, threeIdConnect
+let globalIPFS, globalIPFSPromise, threeIdConnect, iframeCacheService, cacheSupportedPromise
 
 const browserHuh = typeof window !== 'undefined' && typeof document !== 'undefined'
-if (browserHuh) require('./modernizr.js')
-if (browserHuh) threeIdConnect = new ThreeIdConnect(IFRAME_STORE_URL)
+if (browserHuh) {
+  require('./modernizr.js')
+  threeIdConnect = new ThreeIdConnect(THREEID_CONNECT_URL)
+  iframeCacheService = new IframeCache(IFRAME_CACHE_URL)
+  cacheSupportedPromise = iframeCacheService.connect()
+}
 /**
  * @extends BoxApi
  */
@@ -68,7 +74,17 @@ class Box extends BoxApi {
   }
 
   async _init (opts) {
-    this.replicator = await Replicator.create(this._ipfs, opts)
+    const replicatorOpts = { ...opts }
+
+    if (opts.iframeCache && iframeCacheService) {
+      const cacheSupported = await cacheSupportedPromise
+
+      if (cacheSupported) {
+        replicatorOpts.cacheProxy = iframeCacheService.getOrbitStorageProxyFactory()
+      }
+    }
+
+    this.replicator = await Replicator.create(this._ipfs, replicatorOpts)
 
     if (opts.ghostPinbot) {
       this._ghostPinbot = opts.ghostPinbot
@@ -125,10 +141,12 @@ class Box extends BoxApi {
    * @param     {String}            opts.addressServer      URL of the Address Server
    * @param     {String}            opts.ghostPinbot        MultiAddress of a Ghost Pinbot node
    * @param     {String}            opts.supportCheck       Gives browser alert if 3boxjs/ipfs not supported in browser env, defaults to true. You can also set to false to implement your own alert and call Box.support to check if supported.
+   * @param     {Boolean}           opts.iframeCache        Enable iframe cache for ipfs/orbit, defaults to true
    * @return    {Box}                                       the 3Box session instance
    */
   static async create (provider, opts = {}) {
     if (opts.supportCheck !== false && browserHuh) await this._supportAlert()
+    opts.iframeCache = typeof opts.iframeCache === 'boolean' ? opts.iframeCache : true
     const ipfs = await Box.getIPFS(opts)
     const box = new Box(provider, ipfs, opts)
     await box._setProvider(provider)
@@ -570,7 +588,7 @@ class Box extends BoxApi {
     }
 
     if (!globalIPFS && !globalIPFSPromise) {
-      globalIPFSPromise = initIPFS(opts.ipfs, opts.iframeStore, opts.ipfsOptions)
+      globalIPFSPromise = initIPFS(opts.ipfs, opts.iframeStore, opts.ipfsOptions, opts.iframeCache)
     }
     if (browserHuh) window.globalIPFSPromise = globalIPFSPromise
 
@@ -590,7 +608,7 @@ class Box extends BoxApi {
   }
 }
 
-function initIPFSRepo () {
+async function initIPFSRepo (iframeCache) {
   let repoOpts = {}
   let ipfsRootPath
 
@@ -599,7 +617,19 @@ function initIPFSRepo () {
     const sessionID = utils.randInt(10000)
     ipfsRootPath = 'ipfs/root/' + sessionID
     const levelInstance = new LevelStore(ipfsRootPath)
-    repoOpts = { storageBackends: { root: () => levelInstance } }
+
+    repoOpts = {
+      storageBackends: {
+        root: () => levelInstance
+      }
+    }
+
+    if (iframeCache && iframeCacheService) {
+      const cacheSupported = await cacheSupportedPromise
+      if (cacheSupported) {
+        repoOpts.storageBackends.blocks = iframeCacheService.getIpfsStorageProxy()
+      }
+    }
   }
 
   const repo = new IPFSRepo('ipfs', repoOpts)
@@ -610,17 +640,16 @@ function initIPFSRepo () {
   }
 }
 
-async function initIPFS (ipfs, iframeStore, ipfsOptions) {
-  // if (!ipfs && !ipfsProxy) throw new Error('No IPFS object configured and no default available for environment')
-  if (!!ipfs && iframeStore) console.warn('Warning: iframeStore true, orbit db cache in iframe, but the given ipfs object is being used, and may not be running in same iframe.')
+async function initIPFS (ipfs, iframeStore, ipfsOptions, iframeCache) {
+  if (!!ipfs && iframeCache) console.warn('Warning: Caching in iframe is true, but the given ipfs object that is being used may not be using the iframe cache')
   if (ipfs) {
     return ipfs
   } else {
-    // await iframeLoadedPromise
     // return ipfsProxy
     let ipfsRepo
     if (!ipfsOptions) {
-      ipfsRepo = initIPFSRepo()
+      if (ipfsOptions && iframeCache) console.warn('Warning: Caching in iframe is true, but received ipfs options which may not include the proper repo configuration for using the iframe cache')
+      ipfsRepo = await initIPFSRepo(iframeCache)
       ipfsOptions = Object.assign(IPFS_OPTIONS, { repo: ipfsRepo.repo })
     }
     ipfs = await IPFS.create(ipfsOptions)

src/3box.js

@@ -1,5 +1,4 @@
 const Log = require('ipfs-log')
-const IFRAME_STORE_VERSION = '0.0.3'
 
 const RENDEZVOUS_DISABLE = !(
   !process.env.RENDEZVOUS_DISABLE ||
@@ -12,8 +11,8 @@ module.exports = {
   // pinning_node: process.env.PINNING_NODE || '/dnsaddr/ipfs-dev.3box.io/tcp/443/wss/ipfs/QmZipMZjcYTjnyk4WQuV1HB5XUM98hBy3MpJmPTsVoMvW8',
   pinning_room: process.env.PINNING_ROOM || '3box-pinning',
   rendezvous_address: RENDEZVOUS_DISABLE ? '' : (process.env.RENDEZVOUS_ADDRESS || '/dns4/p2p.3box.io/tcp/9091/wss/p2p-webrtc-star/'),
-  iframe_store_version: process.env.IFRAME_STORE_VERSION || IFRAME_STORE_VERSION,
-  iframe_store_url: process.env.IFRAME_STORE_URL || `https://iframe.3box.io/${IFRAME_STORE_VERSION}/iframe.html`,
+  iframe_cache_url: process.env.IFRAME_CACHE_URL || 'https://cache.3box.io',
+  threeid_connect_url: process.env.THREEID_CONNECT_URL || 'https://connect.3box.io/v1/index.html',
   ipfs_options: {
     preload: { enabled: false },
     config: {

src/config.js

@@ -101,9 +101,11 @@ class Replicator {
     // orbitdb/ipfs id which can change on page load
     const cachePath = path.join(opts.orbitPath || './orbitdb', '/cache')
     const levelDown = OdbStorage(null, {})
-    const cacheStorage = await levelDown.createStore(cachePath)
-    const cache = new OdbCache(cacheStorage)
+    const cacheProxy = opts.cacheProxy
+      ? await opts.cacheProxy(cachePath)
+      : await levelDown.createStore(cachePath)
 
+    const cache = new OdbCache(cacheProxy)
     const keystorePath = path.join(opts.orbitPath || './orbitdb', '/keystore')
     const keyStorage = await levelDown.createStore(keystorePath)
     const keystore = new OdbKeystore(keyStorage)