feat(electron): add basic download functionality (#277)

package.json

@@ -7,6 +7,7 @@
     "start": "webpack-dev-server",
     "clean": "rm -rf ./dist",
     "build": "npm run clean && webpack --display=errors-only -p",
+    "build:electron": "npm run clean && webpack --config webpack.config.electron.js --display=errors-only -p",
     "test": "npm run stylint && npm run eslint && npm run license-check",
     "eslint": "eslint . --ext .ts,.tsx,.js",
     "stylint": "stylint",
@@ -20,7 +21,7 @@
     "electron:start": "electron .",
     "electron:install": "electron-builder install-app-deps",
     "electron:clean": "rm -rf ./dist-electron",
-    "electron:build": "npm run electron:clean && npm run electron:install && npm run build && electron-builder -mwl --x64 --config electron-builder.json",
+    "electron:build": "npm run electron:clean && npm run electron:install && npm run build:electron && electron-builder -mwl --x64 --config electron-builder.json",
     "upload-storage": "gsutil rsync -r -x \".DS_Store\" ./storage gs://esa-cfs-storage && gsutil acl ch -r -u AllUsers:R gs://esa-cfs-storage && gsutil setmeta -h \"Cache-Control: no-cache\" gs://esa-cfs-storage/**/*"
   },
   "repository": {
@@ -37,6 +38,7 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/redux-logger": "^3.0.7",
     "cesium": "^1.66.0",
+    "cross-zip": "^3.0.0",
     "framer-motion": "^1.8.4",
     "lodash.debounce": "^4.0.8",
     "react": "^16.12.0",

src/electron/download-handler.js

@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+const zip = require('cross-zip');
+const {app} = require('electron');
+
+/**
+ * Intercepts all browser downloads in the given window
+ */
+module.exports.addDownloadHandler = function(browserWindow) {
+  browserWindow.webContents.session.on('will-download', (_, item) => {
+    const downloadsPath = app.getPath('downloads');
+    const tmpFilePath = path.join(downloadsPath, `${Date.now()}.zip`);
+    item.setSavePath(tmpFilePath);
+
+    console.log(`Downloading file ${item.getURL()} to ${item.savePath}`);
+
+    item.on('updated', (event, state) => {
+      if (state === 'interrupted') {
+        console.log('Download is interrupted but can be resumed');
+      } else if (state === 'progressing') {
+        if (item.isPaused()) {
+          console.log('Download is paused');
+        } else {
+          console.log(`Received bytes: ${item.getReceivedBytes()}`);
+        }
+      }
+    });
+
+    item.once('done', (event, state) => {
+      if (state === 'completed') {
+        console.log('Download successfully', item.savePath);
+        zip.unzipSync(item.savePath, downloadsPath);
+        fs.unlinkSync(item.savePath);
+      } else {
+        console.log(`Download failed: ${state}`, item.savePath);
+      }
+    });
+  });
+};

src/electron/main.js

@@ -1,30 +1,38 @@
 const path = require('path');
 const {app, BrowserWindow} = require('electron');
+const {addDownloadHandler} = require('./download-handler.js');
+
+// future proof for electron 9 and prevent annoying deprecation warning message
+app.allowRendererProcessReuse = true;
 
 let windows = [];
 
 function createWindow() {
-  // Create the browser window.
+  // cerate a new browser window
   const window = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: false,
-      preload: path.resolve(__dirname, 'preload.js')
-    }
+    width: 1024,
+    height: 768,
+    webPreferences: {nodeIntegration: true}
   });
 
+  // save window's reference
   windows.push(window);
 
-  // and load the index.html of the app.
+  // load the index page in the window
   const indexPath = `file://${__dirname}/../../dist/index.html`;
   window.loadURL(indexPath);
 
-  // window.webContents.openDevTools();
+  window.webContents.openDevTools();
 
+  // free window reference when closed
   window.on('closed', () => {
     windows = windows.filter(w => w !== window);
   });
+
+  // add download handler
+  const downloadsPath = path.join(app.getPath('home'), '.esa-cfs', 'offline');
+  app.setPath('downloads', downloadsPath);
+  addDownloadHandler(window);
 }
 
 app.on('ready', createWindow);

src/scripts/components/layer-list-item/layer-list-item.tsx

@@ -9,12 +9,14 @@ interface Props {
   layer: LayerListItemType;
   isMainSelected: boolean;
   onSelect: (id: string, isMain: boolean) => void;
+  onDownload: null | ((id: string) => void);
 }
 
 const LayerListItem: FunctionComponent<Props> = ({
   layer,
   isMainSelected,
-  onSelect
+  onSelect,
+  onDownload
 }) => (
   <div className={styles.layerItem} onClick={() => onSelect(layer.id, true)}>
     <span className={styles.layerTitle}>{layer.name}</span>
@@ -28,6 +30,9 @@ const LayerListItem: FunctionComponent<Props> = ({
         <FormattedMessage id={'layerSelector.compare'} />
       </button>
     )}
+    {onDownload && (
+      <button onClick={() => onDownload(layer.id)}>Download</button>
+    )}
   </div>
 );
 

src/scripts/components/layer-list/layer-list.tsx

@@ -11,12 +11,14 @@ interface Props {
   selectedLayerIds: SelectedLayerIdsState;
   layers: LayerListItemType[];
   onSelect: (id: string, isMain: boolean) => void;
+  onDownload: null | ((id: string) => void);
 }
 
 const LayerList: FunctionComponent<Props> = ({
   selectedLayerIds,
   layers,
-  onSelect
+  onSelect,
+  onDownload
 }) => {
   const {mainId} = selectedLayerIds;
   const isMainSelected = Boolean(mainId);
@@ -30,6 +32,7 @@ const LayerList: FunctionComponent<Props> = ({
             <LayerListItem
               onSelect={(id, isMain) => onSelect(id, isMain)}
               isMainSelected={isMainSelected}
+              onDownload={onDownload}
               layer={layer}
             />
           </li>

src/scripts/components/layer-selector/layer-selector.tsx

@@ -10,6 +10,10 @@ import showLayerSelectorAction from '../../actions/show-layer-selector';
 import LayerList from '../layer-list/layer-list';
 import SelectedLayerListItem from '../selected-layer-list-item/selected-layer-list-item';
 import {layersSelector} from '../../selectors/layers/list';
+import {replaceUrlPlaceholders} from '../../libs/replace-url-placeholders';
+import config from '../../config/main';
+// @ts-ignore
+import {isElectron, downloadUrl} from 'electronHelpers'; // this is an webpack alias
 
 import styles from './layer-selector.styl';
 import setSelectedLayerIdsAction from '../../actions/set-selected-layer-id';
@@ -27,6 +31,13 @@ const LayerSelector: FunctionComponent = () => {
     layer => layer.id === selectedLayerIds.compareId
   );
 
+  const onDownload = isElectron()
+    ? (layerId: string) =>
+        downloadUrl(
+          replaceUrlPlaceholders(config.api.layerOfflinePackage, {id: layerId})
+        )
+    : null;
+
   return (
     <AnimatePresence>
       {showLayerSelector ? (
@@ -66,6 +77,7 @@ const LayerSelector: FunctionComponent = () => {
               onSelect={(layerId, isMain) =>
                 dispatch(setSelectedLayerIdsAction(layerId, isMain))
               }
+              onDownload={onDownload}
             />
           </div>
         </motion.div>

src/scripts/config/main.ts

@@ -31,6 +31,8 @@ export default {
       'https://storage.googleapis.com/esa-cfs-tiles/test/{id}/{timeIndex}/{z}/{y}/{x}.png',
     layerSingleImage:
       'https://storage.googleapis.com/esa-cfs-tiles/test/{id}/{timeIndex}.jpg',
+    layerOfflinePackage:
+      'https://storage.googleapis.com/esa-cfs-tiles/generated/{id}/package.zip',
     stories:
       'https://storage.googleapis.com/esa-cfs-storage/stories/stories-{lang}.json',
     story:

src/scripts/libs/electron-helpers-mock.ts

@@ -0,0 +1,7 @@
+/**
+ * Webpack will only include this module when building for web
+ */
+
+export function isElectron() {
+  return false;
+}

src/scripts/libs/electron-helpers.ts

@@ -0,0 +1,15 @@
+/**
+ * Webpack will only include this module when building for electron
+ */
+
+import {remote} from 'electron';
+
+const webContents = remote.getCurrentWebContents();
+
+export function isElectron() {
+  return true;
+}
+
+export function downloadUrl(url: string) {
+  webContents.downloadURL(url);
+}

webpack.config.electron.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const webConfigFn = require('./webpack.config.js');
+
+module.exports = (env, {mode} = {}) => {
+  const config = webConfigFn(env, mode);
+
+  config.target = 'electron-renderer';
+  config.resolve.alias.electronHelpers = path.resolve(
+    __dirname,
+    './src/scripts/libs/electron-helpers.ts'
+  );
+
+  return config;
+};

webpack.config.js

@@ -22,6 +22,17 @@ module.exports = (env, {mode} = {}) => {
         new OptimizeCSSAssetsPlugin({})
       ]
     },
+    target: 'web',
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.styl'],
+      alias: {
+        // use an empty mock module for web
+        electronHelpers: path.resolve(
+          __dirname,
+          './src/scripts/libs/electron-helpers-mock.ts'
+        )
+      }
+    },
     module: {
       unknownContextCritical: false,
       rules: [
@@ -79,9 +90,6 @@ module.exports = (env, {mode} = {}) => {
         }
       ]
     },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js', '.styl']
-    },
     output: {
       filename: 'bundle.[hash].js',
       path: path.resolve(__dirname, 'dist'),