Add share target (#469)

* 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

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,6 +34,7 @@ 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,
@@ -48,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') {
@@ -103,15 +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 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>