Open file import

Summary: This change only adds the PWA as capable of handling files with the ".flipper" extension.

Reviewed By: aigoncharov

Differential Revision: D48353437

fbshipit-source-id: fd78942ac4dffb7d26d5ca5be826290018465b93

desktop/flipper-ui-browser/src/index.tsx

@@ -71,6 +71,7 @@ async function start() {
   const flipperServerConfig = await flipperServer.exec('get-config');
 
   initializeRenderHost(flipperServer, flipperServerConfig);
+  initializePWA();
 
   // By turning this in a require, we force the JS that the body of this module (init) has completed (initializeElectron),
   // before starting the rest of the Flipper process.
@@ -78,6 +79,7 @@ async function start() {
   // but not set yet, which might happen when using normal imports.
   // TODO: remove
   window.flipperShowError?.('Connected to Flipper Server successfully');
+
   // @ts-ignore
   // eslint-disable-next-line import/no-commonjs
   require('flipper-ui-core').startFlipperDesktop(flipperServer);
@@ -89,6 +91,76 @@ start().catch((e) => {
   window.flipperShowError?.('Failed to start flipper-ui-browser: ' + e);
 });
 
+async function initializePWA() {
+  console.log('[PWA] Initialization');
+
+  let cachedFile: {name: string; data: string} | undefined;
+  let rehydrated = false;
+  const openFileIfAny = () => {
+    if (!cachedFile || !rehydrated) {
+      return;
+    }
+    window.dispatchEvent(
+      new CustomEvent('open-flipper-file', {
+        detail: [cachedFile.name, cachedFile.data],
+      }),
+    );
+    cachedFile = undefined;
+  };
+
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+      .register('/service-worker.js')
+      .then(() => {
+        console.log('[PWA] Service Worker has been registered');
+      })
+      .catch((e) => {
+        console.error('[PWA] failed to register Service Worker', e);
+      });
+  }
+
+  if ('launchQueue' in window) {
+    console.log('[PWA] File Handling API is supported');
+
+    // @ts-ignore
+    window.launchQueue.setConsumer(async (launchParams) => {
+      if (!launchParams || !launchParams.files) {
+        return;
+      }
+      console.log('[PWA] Attempt to to open a file');
+      for (const file of launchParams.files) {
+        const blob = await file.getFile();
+        blob.handle = file;
+
+        const data = await blob.text();
+        const name = file.name;
+
+        cachedFile = {name, data};
+
+        openFileIfAny();
+      }
+    });
+  } else {
+    console.warn('[PWA] File Handling API is not supported');
+  }
+
+  console.log('[PWA] Add before install prompt listener');
+  window.addEventListener('beforeinstallprompt', (e) => {
+    // Prevent Chrome 67 and earlier from automatically showing the prompt.
+    e.preventDefault();
+    // Stash the event so it can be triggered later.
+    // @ts-ignore
+    global.PWAppInstallationEvent = e;
+    console.log('[PWA] Installation event has been captured');
+  });
+
+  window.addEventListener('storeRehydrated', () => {
+    console.info('[PWA] Store is rehydrated');
+    rehydrated = true;
+    openFileIfAny();
+  });
+}
+
 // getLogger() is not  yet created when the electron app starts.
 // we can't create it here yet, as the real logger is wired up to
 // the redux store and the rest of the world. So we create a delegating logger

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -153,11 +153,13 @@ export function initializeRenderHost(
     hasFocus() {
       return document.hasFocus();
     },
-    onIpcEvent(_event) {
-      // no-op
+    onIpcEvent(event, cb) {
+      window.addEventListener(event as string, (ev) => {
+        cb(...((ev as CustomEvent).detail as any));
+      });
     },
-    sendIpcEvent(_event, ..._args: any[]) {
-      // no-op
+    sendIpcEvent(event, ...args: any[]) {
+      window.dispatchEvent(new CustomEvent(event, {detail: args}));
     },
     shouldUseDarkColors() {
       return !!(