1.7.0

* Quick test

* More testing

* More testing

* Removing transfer for now

* Changing name so it's easier to tell them apart when installed

* Disable minification to ease debugging

* Adding navigate lock

* lol oops

* Add minifying back

* Removing minification again, for debugging

* Removing broadcast channel bits, to simplify the code

* Revert "Removing broadcast channel bits, to simplify the code"

This reverts commit 0b2a3ecf2986aae0dd65fdd1ddda2bd9e4e1eac7.

* I think this fixes it

* Refactor

* Suppress flash of home screen during share target

* Almost ready, so switching to real name

* Removing log

* Ahh yes the trailing comma thing

* Removing use of BroadcastChannel

* Reducing ternary

.nvmrc

@@ -1 +1 @@
-10.15.3
+10.16.0

_headers.ejs

@@ -1,7 +1,6 @@
 # Long-term cache by default.
 /*
   Cache-Control: max-age=31536000
-  Access-Control-Allow-Origin: *
 
 # And here are the exceptions:
 /
@@ -10,9 +9,6 @@
 /serviceworker.js
   Cache-Control: no-cache
 
-/sdk.mjs
-  Cache-Control: no-cache
-
 /manifest.json
   Cache-Control: must-revalidate, max-age=3600
 

config/size-report.js

@@ -1,203 +0,0 @@
-const path = require('path');
-const { URL } = require('url');
-
-const gzipSize = require('gzip-size');
-const fetch = require('node-fetch');
-const prettyBytes = require('pretty-bytes');
-const escapeRE = require('escape-string-regexp');
-const readdirp = require('readdirp');
-const chalk = new require('chalk').constructor({ level: 4 });
-
-function fetchTravis(path, options = {}) {
-  const url = new URL(path, 'https://api.travis-ci.org');
-  url.search = new URLSearchParams(options);
-
-  return fetch(url, {
-    headers: { 'Travis-API-Version': '3' },
-  });
-}
-
-function fetchTravisBuildInfo(user, repo, branch) {
-  return fetchTravis(`/repo/${encodeURIComponent(`${user}/${repo}`)}/builds`, {
-    'branch.name': branch,
-    state: 'passed',
-    limit: 1,
-    event_type: 'push',
-  }).then(r => r.json());
-}
-
-function fetchTravisText(path) {
-  return fetchTravis(path).then(r => r.text());
-}
-
-/**
- * Recursively-read a directory and turn it into an array of { name, size, gzipSize }
- */
-async function dirToInfoArray(startPath) {
-  const results = await new Promise((resolve, reject) => {
-    readdirp({ root: startPath }, (err, results) => {
-      if (err) reject(err); else resolve(results);
-    });
-  });
-
-  return Promise.all(
-    results.files.map(async (entry) => ({
-      name: entry.path,
-      gzipSize: await gzipSize.file(entry.fullPath),
-      size: entry.stat.size,
-    })),
-  );
-}
-
-/**
- * Try to treat two entries with different file name hashes as the same file.
- */
-function findHashedMatch(name, buildInfo) {
-  const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(name);
-  if (!nameParts) return;
-
-  const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
-  const matchingEntry = buildInfo.find(entry => matchRe.test(entry.name));
-  return matchingEntry;
-}
-
-const buildSizePrefix = '=== BUILD SIZES: ';
-const buildSizePrefixRe = new RegExp(`^${escapeRE(buildSizePrefix)}(.+)$`, 'm');
-
-async function getPreviousBuildInfo() {
-  const buildData = await fetchTravisBuildInfo('GoogleChromeLabs', 'squoosh', 'master');
-  const jobUrl = buildData.builds[0].jobs[0]['@href'];
-  const log = await fetchTravisText(jobUrl + '/log.txt');
-  const reResult = buildSizePrefixRe.exec(log);
-
-  if (!reResult) return;
-  return JSON.parse(reResult[1]);
-}
-
-/**
- * Generate an array that represents the difference between builds.
- * Returns an array of { beforeName, afterName, beforeSize, afterSize }.
- * Sizes are gzipped size.
- * Before/after properties are missing if resource isn't in the previous/new build.
- */
-function getChanges(previousBuildInfo, buildInfo) {
-  const buildChanges = [];
-  const alsoInPreviousBuild = new Set();
-
-  for (const oldEntry of previousBuildInfo) {
-    const newEntry = buildInfo.find(entry => entry.name === oldEntry.name) ||
-      findHashedMatch(oldEntry.name, buildInfo);
-
-    // Entry is in previous build, but not the new build.
-    if (!newEntry) {
-      buildChanges.push({
-        beforeName: oldEntry.name,
-        beforeSize: oldEntry.gzipSize,
-      });
-      continue;
-    }
-
-    // Mark this entry so we know we've dealt with it.
-    alsoInPreviousBuild.add(newEntry);
-
-    // If they're the same, just ignore.
-    // Using size rather than gzip size. I've seen different platforms produce different zipped
-    // sizes.
-    if (
-      oldEntry.size === newEntry.size &&
-      oldEntry.name === newEntry.name
-    ) continue;
-
-    // Entry is in both builds (maybe renamed).
-    buildChanges.push({
-      beforeName: oldEntry.name,
-      afterName: newEntry.name,
-      beforeSize: oldEntry.gzipSize,
-      afterSize: newEntry.gzipSize,
-    });
-  }
-
-  // Look for entries that are only in the new build.
-  for (const newEntry of buildInfo) {
-    if (alsoInPreviousBuild.has(newEntry)) continue;
-
-    buildChanges.push({
-      afterName: newEntry.name,
-      afterSize: newEntry.gzipSize,
-    });
-  }
-
-  return buildChanges;
-}
-
-async function main() {
-  // Output the current build sizes for later retrieval.
-  const buildInfo = await dirToInfoArray(__dirname + '/../build');
-  console.log(buildSizePrefix + JSON.stringify(buildInfo));
-  console.log('\nBuild change report:');
-
-  let previousBuildInfo;
-
-  try {
-    previousBuildInfo = await getPreviousBuildInfo();
-  } catch (err) {
-    console.log(`  Couldn't parse previous build info`);
-    return;
-  }
-
-  if (!previousBuildInfo) {
-    console.log(`  Couldn't find previous build info`);
-    return;
-  }
-
-  const buildChanges = getChanges(previousBuildInfo, buildInfo);
-
-  if (buildChanges.length === 0) {
-    console.log('  No changes');
-    return;
-  }
-
-  // One letter references, so it's easier to get the spacing right.
-  const y = chalk.yellow;
-  const g = chalk.green;
-  const r = chalk.red;
-
-  for (const change of buildChanges) {
-    // New file.
-    if (!change.beforeSize) {
-      console.log(`  ${g('ADDED')}   ${change.afterName} - ${prettyBytes(change.afterSize)}`);
-      continue;
-    }
-
-    // Removed file.
-    if (!change.afterSize) {
-      console.log(`  ${r('REMOVED')} ${change.beforeName} - was ${prettyBytes(change.beforeSize)}`);
-      continue;
-    }
-
-    // Changed file.
-    let size;
-
-    if (change.beforeSize === change.afterSize) {
-      // Just renamed.
-      size = `${prettyBytes(change.afterSize)} -> no change`;
-    } else {
-      const color = change.afterSize > change.beforeSize ? r : g;
-      const sizeDiff = prettyBytes(change.afterSize - change.beforeSize, { signed: true });
-      const relativeDiff = Math.round((change.afterSize / change.beforeSize) * 1000) / 1000;
-
-      size = `${prettyBytes(change.beforeSize)} -> ${prettyBytes(change.afterSize)}` +
-        ' (' +
-        color(`${sizeDiff}, ${relativeDiff}x`) +
-        ')';
-    }
-
-    console.log(`  ${y('CHANGED')} ${change.afterName} - ${size}`);
-
-    if (change.beforeName !== change.afterName) {
-      console.log(`    Renamed from: ${change.beforeName}`);
-    }
-  }
-}
-
-main();

package.json

@@ -1,15 +1,14 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "license": "apache-2.0",
   "scripts": {
-    "build:sdk": "microbundle --compress -f es -o build/sdk.mjs -i src/sdk.ts",
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
-    "build": "webpack -p && npm run build:sdk",
-    "lint": "tslint -c tslint.json -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
+    "build": "webpack -p",
+    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose",
     "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
-    "sizereport": "node config/size-report.js"
+    "sizereport": "sizereport --config"
   },
   "husky": {
     "hooks": {
@@ -17,61 +16,61 @@
     }
   },
   "devDependencies": {
-    "@types/node": "10.14.1",
+    "@types/node": "10.14.9",
     "@types/pretty-bytes": "5.1.0",
-    "@types/webassembly-js-api": "0.0.2",
-    "@webcomponents/custom-elements": "1.2.1",
-    "@webpack-cli/serve": "0.1.3",
+    "@types/webassembly-js-api": "0.0.3",
+    "@webcomponents/custom-elements": "1.2.4",
+    "@webpack-cli/serve": "0.1.8",
     "assets-webpack-plugin": "3.9.10",
     "chalk": "2.4.2",
-    "chokidar": "2.1.2",
+    "chokidar": "3.0.1",
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.1",
-    "copy-webpack-plugin": "5.0.1",
-    "comlink": "^3.2.0",
+    "comlink": "3.1.1",
+    "copy-webpack-plugin": "5.0.3",
     "critters-webpack-plugin": "2.3.0",
     "css-loader": "1.0.1",
-    "ejs": "2.6.1",
-    "escape-string-regexp": "1.0.5",
+    "ejs": "2.6.2",
+    "escape-string-regexp": "2.0.0",
     "exports-loader": "0.7.0",
     "file-drop-element": "0.2.0",
-    "file-loader": "3.0.1",
-    "gzip-size": "5.0.0",
+    "file-loader": "4.0.0",
+    "gzip-size": "5.1.1",
     "html-webpack-plugin": "3.2.0",
-    "husky": "1.3.1",
-    "idb-keyval": "3.1.0",
+    "husky": "2.4.1",
+    "idb-keyval": "3.2.0",
     "linkstate": "1.1.1",
     "loader-utils": "1.2.3",
-    "microbundle": "^0.10.1",
-    "mini-css-extract-plugin": "0.5.0",
+    "mini-css-extract-plugin": "0.7.0",
     "minimatch": "3.0.4",
-    "node-fetch": "2.3.0",
-    "node-sass": "4.11.0",
+    "node-fetch": "2.6.0",
+    "node-sass": "4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pointer-tracker": "2.0.3",
     "preact": "8.4.2",
     "prerender-loader": "1.3.0",
-    "pretty-bytes": "5.1.0",
+    "pretty-bytes": "5.2.0",
     "progress-bar-webpack-plugin": "1.12.1",
-    "raw-loader": "2.0.0",
-    "readdirp": "2.2.1",
+    "raw-loader": "3.0.0",
+    "readdirp": "3.0.2",
     "sass-loader": "7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "source-map-loader": "0.2.4",
     "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.2.3",
-    "ts-loader": "5.3.3",
-    "tslint": "5.14.0",
+    "terser-webpack-plugin": "1.3.0",
+    "travis-size-report": "1.0.1",
+    "ts-loader": "6.0.2",
+    "tslint": "5.17.0",
     "tslint-config-airbnb": "5.11.1",
-    "tslint-config-semistandard": "7.0.0",
-    "tslint-react": "3.6.0",
+    "tslint-config-semistandard": "8.0.1",
+    "tslint-react": "4.0.0",
     "typed-css-modules": "0.4.2",
-    "typescript": "3.3.3333",
-    "url-loader": "1.1.2",
+    "typescript": "3.5.2",
+    "url-loader": "2.0.0",
     "webpack": "4.28.0",
-    "webpack-bundle-analyzer": "3.1.0",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.2.1",
+    "webpack-bundle-analyzer": "3.3.2",
+    "webpack-cli": "3.3.4",
+    "webpack-dev-server": "3.7.1",
     "worker-plugin": "3.1.0"
   }
 }

sizereport.config.js

@@ -0,0 +1,14 @@
+const escapeRE = require("escape-string-regexp");
+
+module.exports = {
+  repo: "GoogleChromeLabs/squoosh",
+  path: "build/**/!(*.map)",
+  branch: "master",
+  findRenamed(path, newPaths) {
+    const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
+    if (!nameParts) return;
+
+    const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
+    return newPaths.find(newPath => matchRe.test(newPath));
+  }
+};

src/components/App/client-api.ts

@@ -1,106 +0,0 @@
-import App from './index';
-import { SquooshStartEventType, SquooshSideEventType } from '../compress/index';
-
-import { expose } from 'comlink';
-
-export interface ReadyMessage {
-  type: 'READY';
-  version: string;
-}
-
-export function exposeAPI(app: App) {
-  if (window === top) {
-    // Someone opened Squoosh in a window rather than an iframe.
-    // This can be deceiving and we won’t allow that.
-    return;
-  }
-  self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION }, '*');
-  self.addEventListener('message', (event: MessageEvent) => {
-    if (event.data !== 'READY?') {
-      return;
-    }
-    event.stopImmediatePropagation();
-    self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION } as ReadyMessage, '*');
-  });
-  expose(new API(app), self.parent);
-}
-
-function addRemovableGlobalListener<
-  K extends keyof GlobalEventHandlersEventMap
->(name: K, listener: (ev: GlobalEventHandlersEventMap[K]) => void): () => void {
-  document.addEventListener(name, listener);
-  return () => document.removeEventListener(name, listener);
-}
-
-/**
- * The API class contains the methods that are exposed via Comlink to the
- * outside world.
- */
-export class API {
-  /**
-   * Internal constructor. Do not call.
-   */
-  constructor(private _app: App) {}
-
-  /**
-   * Loads a given file into Squoosh.
-   * @param blob The `Blob` to load
-   * @param name The name of the file. The extension of this name will be used
-   * to deterime which decoder to use.
-   */
-  setFile(blob: Blob, name: string) {
-    return new Promise((resolve) => {
-      document.addEventListener(SquooshStartEventType.START, () => resolve(), {
-        once: true,
-      });
-      this._app.openFile(new File([blob], name));
-    });
-  }
-
-  /**
-   * Grabs one side from Squoosh as a `File`.
-   * @param side The side which to grab. 0 = left, 1 = right.
-   */
-  async getBlob(side: 0 | 1) {
-    if (!this._app.state.file || !this._app.compressInstance) {
-      throw new Error('No file has been loaded');
-    }
-    if (
-      !this._app.compressInstance!.state.loading &&
-      !this._app.compressInstance!.state.sides[side].loading
-    ) {
-      return this._app.compressInstance!.state.sides[side].file;
-    }
-
-    const listeners: ReturnType<typeof addRemovableGlobalListener>[] = [];
-
-    const r = new Promise((resolve, reject) => {
-      listeners.push(
-        addRemovableGlobalListener(SquooshSideEventType.DONE, (event) => {
-          if (event.side !== side) {
-            return;
-          }
-          resolve(this._app.compressInstance!.state.sides[side].file);
-        }),
-      );
-      listeners.push(
-        addRemovableGlobalListener(SquooshSideEventType.ABORT, (event) => {
-          if (event.side !== side) {
-            return;
-          }
-          reject(new DOMException('Aborted', 'AbortError'));
-        }),
-      );
-      listeners.push(
-        addRemovableGlobalListener(SquooshSideEventType.ERROR, (event) => {
-          if (event.side !== side) {
-            return;
-          }
-          reject(event.error);
-        }),
-      );
-    });
-    r.then(() => listeners.forEach(remove => remove()));
-    return r;
-  }
-}

src/components/App/index.tsx

@@ -14,9 +14,10 @@ const ROUTE_EDITOR = '/editor';
 const compressPromise = import(
   /* webpackChunkName: "main-app" */
   '../compress');
-const offlinerPromise = import(
-  /* webpackChunkName: "offliner" */
-  '../../lib/offliner');
+
+const swBridgePromise = import(
+  /* webpackChunkName: "sw-bridge" */
+  '../../lib/sw-bridge');
 
 function back() {
   window.history.back();
@@ -25,6 +26,7 @@ function back() {
 interface Props {}
 
 interface State {
+  awaitingShareTarget: boolean;
   file?: File | Fileish;
   isEditorOpen: Boolean;
   Compress?: typeof import('../compress').default;
@@ -32,11 +34,11 @@ interface State {
 
 export default class App extends Component<Props, State> {
   state: State = {
+    awaitingShareTarget: new URL(location.href).searchParams.has('share-target'),
     isEditorOpen: false,
     file: undefined,
     Compress: undefined,
   };
-  compressInstance?: import('../compress').default;
 
   snackbar?: SnackBarElement;
 
@@ -49,7 +51,15 @@ export default class App extends Component<Props, State> {
       this.showSnack('Failed to load app');
     });
 
-    offlinerPromise.then(({ offliner }) => offliner(this.showSnack));
+    swBridgePromise.then(async ({ offliner, getSharedImage }) => {
+      offliner(this.showSnack);
+      if (!this.state.awaitingShareTarget) return;
+      const file = await getSharedImage();
+      // Remove the ?share-target from the URL
+      history.replaceState('', '', '/');
+      this.openEditor();
+      this.setState({ file, awaitingShareTarget: false });
+    });
 
     // In development, persist application state across hot reloads:
     if (process.env.NODE_ENV === 'development') {
@@ -70,14 +80,6 @@ export default class App extends Component<Props, State> {
     });
 
     window.addEventListener('popstate', this.onPopState);
-    import(
-      /* webpackChunkName: "client-api" */
-      './client-api').then(m => m.exposeAPI(this));
-  }
-
-  @bind openFile(file: File | Fileish) {
-    this.openEditor();
-    this.setState({ file });
   }
 
   @bind
@@ -90,7 +92,8 @@ export default class App extends Component<Props, State> {
 
   @bind
   private onIntroPickFile(file: File | Fileish) {
-    return this.openFile(file);
+    this.openEditor();
+    this.setState({ file });
   }
 
   @bind
@@ -111,20 +114,18 @@ export default class App extends Component<Props, State> {
     this.setState({ isEditorOpen: true });
   }
 
-  render({}: Props, { file, isEditorOpen, Compress }: State) {
+  render({}: Props, { file, isEditorOpen, Compress, awaitingShareTarget }: State) {
+    const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
+
     return (
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {!isEditorOpen
-            ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
-            : (Compress)
-              ? <Compress
-                  ref={i => this.compressInstance = i}
-                  file={file!}
-                  showSnack={this.showSnack}
-                  onBack={back}
-              />
-              : <loading-spinner class={style.appLoader}/>
+          {
+            showSpinner
+              ? <loading-spinner class={style.appLoader}/>
+              : isEditorOpen
+                ? Compress && <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+                : <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />
         </file-drop>

src/components/Options/index.tsx

@@ -178,6 +178,7 @@ export default class Options extends Component<Props, State> {
           {encoderSupportMap ?
             <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
               {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
+                // tslint:disable-next-line:jsx-key
                 <option value={encoder.type}>{encoder.label}</option>
               ))}
             </Select>

src/components/compress/index.tsx

@@ -32,51 +32,6 @@ import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
 import SnackBarElement from '../../lib/SnackBar';
 import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
 
-// Safari and Edge don't quite support extending Event, this works around it.
-function fixExtendedEvent(instance: Event, type: Function) {
-  if (!(instance instanceof type)) {
-    Object.setPrototypeOf(instance, type.prototype);
-  }
-}
-export enum SquooshStartEventType {
-  START = 'squoosh:start',
-}
-export class SquooshStartEvent extends Event {
-  constructor(init?: EventInit) {
-    super(SquooshStartEventType.START, init);
-    fixExtendedEvent(this, SquooshStartEvent);
-  }
-}
-
-export const enum SquooshSideEventType {
-  DONE = 'squoosh:done',
-  ABORT = 'squoosh:abort',
-  ERROR = 'squoosh:error',
-}
-export interface SquooshSideEventInit extends EventInit {
-  side: 0|1;
-  error?: Error;
-}
-export class SquooshSideEvent extends Event {
-  public side: 0|1;
-  public error?: Error;
-  constructor(name: SquooshSideEventType, init: SquooshSideEventInit) {
-    super(name, init);
-    fixExtendedEvent(this, SquooshSideEvent);
-    this.side = init.side;
-    this.error = init.error;
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    [SquooshStartEventType.START]: SquooshStartEvent;
-    [SquooshSideEventType.DONE]: SquooshSideEvent;
-    [SquooshSideEventType.ABORT]: SquooshSideEvent;
-    [SquooshSideEventType.ERROR]: SquooshSideEvent;
-  }
-}
-
 export interface SourceImage {
   file: File | Fileish;
   decoded: ImageData;
@@ -289,7 +244,7 @@ export default class Compress extends Component<Props, State> {
     this.widthQuery.addListener(this.onMobileWidthChange);
     this.updateFile(props.file);
 
-    import('../../lib/offliner').then(({ mainAppLoaded }) => mainAppLoaded());
+    import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
   }
 
   @bind
@@ -440,7 +395,8 @@ export default class Compress extends Component<Props, State> {
     // Either processor is good enough here.
     const processor = this.leftProcessor;
 
-    this.setState({ loadingCounter, loading: true }, this.signalLoadingStart);
+    this.setState({ loadingCounter, loading: true });
+
     // Abort any current encode jobs, as they're redundant now.
     this.leftProcessor.abortCurrent();
     this.rightProcessor.abortCurrent();
@@ -518,35 +474,6 @@ export default class Compress extends Component<Props, State> {
     );
   }
 
-  @bind
-  private dispatchSideEvent(type: SquooshSideEventType, init: SquooshSideEventInit) {
-    document.dispatchEvent(
-      new SquooshSideEvent(type, init),
-    );
-  }
-
-  @bind
-  private signalLoadingStart() {
-    document.dispatchEvent(
-      new SquooshStartEvent(),
-    );
-  }
-
-  @bind
-  private signalProcessingDone(side: 0|1) {
-    this.dispatchSideEvent(SquooshSideEventType.DONE, { side });
-  }
-
-  @bind
-  private signalProcessingAbort(side: 0|1) {
-    this.dispatchSideEvent(SquooshSideEventType.ABORT, { side });
-  }
-
-  @bind
-  private signalProcessingError(side: 0|1, msg: string) {
-    this.dispatchSideEvent(SquooshSideEventType.ERROR, { side, error: new Error(msg) });
-  }
-
   private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
     const {
       skipPreprocessing = false,
@@ -608,13 +535,8 @@ export default class Compress extends Component<Props, State> {
           });
         }
       } catch (err) {
-        if (err.name === 'AbortError') {
-          this.signalProcessingAbort(index as 0|1);
-          return;
-        }
-        const errorMsg = `Processing error (type=${settings.encoderState.type}): ${err}`;
-        this.signalProcessingError(index as 0|1, errorMsg);
-        this.props.showSnack(errorMsg);
+        if (err.name === 'AbortError') return;
+        this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
         throw err;
       }
     }
@@ -637,7 +559,7 @@ export default class Compress extends Component<Props, State> {
       encodedSettings: settings,
     });
 
-    this.setState({ sides }, () => this.signalProcessingDone(index as 0|1));
+    this.setState({ sides });
   }
 
   render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
@@ -645,6 +567,7 @@ export default class Compress extends Component<Props, State> {
     const [leftImageData, rightImageData] = sides.map(i => i.data);
 
     const options = sides.map((side, index) => (
+      // tslint:disable-next-line:jsx-key
       <Options
         source={source}
         mobileView={mobileView}
@@ -660,6 +583,7 @@ export default class Compress extends Component<Props, State> {
       (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
 
     const results = sides.map((side, index) => (
+      // tslint:disable-next-line:jsx-key
       <Results
         downloadUrl={side.downloadUrl}
         imageFile={side.file}

src/components/intro/index.tsx

@@ -53,11 +53,17 @@ export default class Intro extends Component<Props, State> {
   state: State = {};
   private fileInput?: HTMLInputElement;
 
+  @bind
+  private resetFileInput() {
+    this.fileInput!.value = '';
+  }
+
   @bind
   private onFileChange(event: Event): void {
     const fileInput = event.target as HTMLInputElement;
     const file = fileInput.files && fileInput.files[0];
     if (!file) return;
+    this.resetFileInput();
     this.props.onFile(file);
   }
 

src/lib/sw-bridge.ts

@@ -40,6 +40,23 @@ async function updateReady(reg: ServiceWorkerRegistration): Promise<void> {
   });
 }
 
+/** Wait for a shared image */
+export function getSharedImage(): Promise<File> {
+  return new Promise((resolve) => {
+    const onmessage = (event: MessageEvent) => {
+      if (event.data.action !== 'load-image') return;
+      resolve(event.data.file);
+      navigator.serviceWorker.removeEventListener('message', onmessage);
+    };
+
+    navigator.serviceWorker.addEventListener('message', onmessage);
+
+    // This message is picked up by the service worker - it's how it knows we're ready to receive
+    // the file.
+    navigator.serviceWorker.controller!.postMessage('share-ready');
+  });
+}
+
 /** Set up the service worker and monitor changes */
 export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
   // This needs to be a typeof because Webpack.

src/manifest.json

@@ -12,5 +12,18 @@
       "type": "image/png",
       "sizes": "1024x1024"
     }
-  ]
+  ],
+  "share_target": {
+    "action": "/?share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "files": [
+        {
+          "name": "file",
+          "accept": ["image/*"]
+        }
+      ]
+    }
+  }
 }

src/missing-types.d.ts

@@ -34,7 +34,6 @@ declare module 'url-loader!*' {
 }
 
 declare var VERSION: string;
-declare var MAJOR_VERSION: string;
 
 declare var ga: {
   (...args: any[]): void;

src/sdk.ts

@@ -1,41 +0,0 @@
-import { proxy, ProxyResult } from 'comlink';
-
-import { API, ReadyMessage } from './components/App/client-api';
-
-// @ts-ignore
-import { version } from '../package.json';
-const MAJOR_VERSION = (version.split('.')[0] as string);
-
-/**
- * This function will load an iFrame
- * @param {HTMLIFrameElement} ifr iFrame that will be used to load squoosh
- * @param {string} src URL of squoosh instance to use
- */
-export default async function loader(
-  ifr: HTMLIFrameElement,
-  src: string = 'https://squoosh.app',
-): Promise<ProxyResult<API>> {
-  ifr.src = src;
-  await new Promise(resolve => (ifr.onload = resolve));
-  ifr.contentWindow!.postMessage('READY?', '*');
-  await new Promise((resolve) => {
-    window.addEventListener('message', function l(ev) {
-      const msg = ev.data as ReadyMessage;
-      if (!msg || msg.type !== 'READY') {
-        return;
-      }
-      if (msg.version !== MAJOR_VERSION) {
-        throw Error(
-          `Version mismatch. SDK version ${MAJOR_VERSION}, Squoosh version ${
-            msg.version
-          }`,
-        );
-      }
-      ev.stopPropagation();
-      window.removeEventListener('message', l);
-      resolve();
-    });
-  });
-
-  return proxy(ifr.contentWindow!);
-}

src/sw/index.ts

@@ -1,5 +1,6 @@
 import {
   cacheOrNetworkAndCache, cleanupCache, cacheOrNetwork, cacheBasics, cacheAdditionalProcessors,
+  serveShareTarget,
 } from './util';
 import { get } from 'idb-keyval';
 
@@ -40,14 +41,23 @@ self.addEventListener('activate', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
-  // We only care about GET.
-  if (event.request.method !== 'GET') return;
-
   const url = new URL(event.request.url);
 
   // Don't care about other-origin URLs
   if (url.origin !== location.origin) return;
 
+  if (
+    url.pathname === '/' &&
+    url.searchParams.has('share-target') &&
+    event.request.method === 'POST'
+  ) {
+    serveShareTarget(event);
+    return;
+  }
+
+  // We only care about GET from here on in.
+  if (event.request.method !== 'GET') return;
+
   if (url.pathname.startsWith('/demo-') || url.pathname.startsWith('/wc-polyfill')) {
     cacheOrNetworkAndCache(event, dynamicCache);
     cleanupCache(event, dynamicCache, BUILD_ASSETS);

src/sw/util.ts

@@ -1,8 +1,11 @@
 import webpDataUrl from 'url-loader!../codecs/tiny.webp';
 
+// Give TypeScript the correct global.
+declare var self: ServiceWorkerGlobalScope;
+
 export function cacheOrNetwork(event: FetchEvent): void {
   event.respondWith(async function () {
-    const cachedResponse = await caches.match(event.request);
+    const cachedResponse = await caches.match(event.request, { ignoreSearch: true });
     return cachedResponse || fetch(event.request);
   }());
 }
@@ -29,6 +32,23 @@ export function cacheOrNetworkAndCache(event: FetchEvent, cacheName: string): vo
   }());
 }
 
+export function serveShareTarget(event: FetchEvent): void {
+  const dataPromise = event.request.formData();
+
+  // Redirect so the user can refresh the page without resending data.
+  // @ts-ignore It doesn't like me giving a response to respondWith, although it's allowed.
+  event.respondWith(Response.redirect('/?share-target'));
+
+  event.waitUntil(async function () {
+    // The page sends this message to tell the service worker it's ready to receive the file.
+    await nextMessage('share-ready');
+    const client = await self.clients.get(event.resultingClientId);
+    const data = await dataPromise;
+    const file = data.get('file');
+    client.postMessage({ file, action: 'load-image' });
+  }());
+}
+
 export function cleanupCache(event: FetchEvent, cacheName: string, keepAssets: string[]) {
   event.waitUntil(async function () {
     const cache = await caches.open(cacheName);
@@ -104,3 +124,26 @@ export async function cacheAdditionalProcessors(cacheName: string, buildAssets:
   const cache = await caches.open(cacheName);
   await cache.addAll(toCache);
 }
+
+const nextMessageResolveMap = new Map<string, (() => void)[]>();
+
+/**
+ * Wait on a message with a particular event.data value.
+ *
+ * @param dataVal The event.data value.
+ */
+function nextMessage(dataVal: string): Promise<void> {
+  return new Promise((resolve) => {
+    if (!nextMessageResolveMap.has(dataVal)) {
+      nextMessageResolveMap.set(dataVal, []);
+    }
+    nextMessageResolveMap.get(dataVal)!.push(resolve);
+  });
+}
+
+self.addEventListener('message', (event) => {
+  const resolvers = nextMessageResolveMap.get(event.data);
+  if (!resolvers) return;
+  nextMessageResolveMap.delete(event.data);
+  for (const resolve of resolvers) resolve();
+});

webpack.config.js

@@ -263,7 +263,6 @@ module.exports = async function (_, env) {
       // Inline constants during build, so they can be folded by UglifyJS.
       new webpack.DefinePlugin({
         VERSION: JSON.stringify(VERSION),
-        MAJOR_VERSION: JSON.stringify(VERSION.split(".")[0]),
         // We set node.process=false later in this config.
         // Here we make sure if (process && process.foo) still works:
         process: '{}'