Android - Support for universal link

public/index.html

@@ -74,6 +74,11 @@
 
     gtag('config', 'UA-108091601-1');
   </script>
+  <!-- Meta tag for deep link facebook app -->
+  <meta property="al:android:url" content="cboardorg:///board/root">
+  <meta property="al:android:package" content="com.unicef.cboard">
+  <meta property="al:android:app_name" content="Cboard">
+  <meta property="al:web:should_fallback" content="false" />
 
   <title>Cboard - AAC Communication Board</title>
 </head>

src/components/Board/Board.container.js

@@ -65,7 +65,8 @@ import {
 import { NOTIFICATION_DELAY } from '../Notifications/Notifications.constants';
 import { EMPTY_VOICES } from '../../providers/SpeechProvider/SpeechProvider.constants';
 import { DEFAULT_ROWS_NUMBER, DEFAULT_COLUMNS_NUMBER } from './Board.constants';
-//import { isAndroid } from '../../cordova-util';
+import { isAndroid } from '../../cordova-util';
+import queryString from 'query-string';
 
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
@@ -220,7 +221,6 @@ export class BoardContainer extends Component {
 
     const boards = this.props.boards; //see board from redux state after get ApiObjets
     let boardExists = null;
-
     if (id && board && id === board.id) {
       //active board = requested board, use that board
       boardExists = boards.find(b => b.id === board.id);
@@ -278,14 +278,15 @@ export class BoardContainer extends Component {
     // if (isAndroid()) downloadImages();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  async UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.match.params.id !== nextProps.match.params.id) {
       const {
         navHistory,
         boards,
         changeBoard,
         previousBoard,
-        historyRemoveBoard
+        historyRemoveBoard,
+        history
       } = this.props;
 
       const boardExists = boards.find(b => b.id === nextProps.match.params.id);
@@ -297,6 +298,13 @@ export class BoardContainer extends Component {
         ) {
           changeBoard(nextProps.match.params.id);
           previousBoard();
+        } else if (isAndroid() && nextProps.location !== this.props.location) {
+          //board was open from deep link and the app was running in background
+          const qs = queryString.parse(nextProps.location.search);
+          if (!!qs.deepLink) {
+            history.replace(nextProps.match.params.id);
+            changeBoard(nextProps.match.params.id);
+          }
         }
       } else {
         // Was a browser back action?
@@ -306,6 +314,18 @@ export class BoardContainer extends Component {
         ) {
           //board is invalid so we remove from navigation history
           historyRemoveBoard(nextProps.match.params.id);
+        } else if (isAndroid() && nextProps.location !== this.props.location) {
+          //board was open from deep link and the app was running in background
+          const qs = queryString.parse(nextProps.location.search);
+          if (!!qs.deepLink) {
+            try {
+              await this.tryRemoteBoard(nextProps.match.params.id);
+            } catch (err) {
+              console.log('Error: ', err);
+            } finally {
+              history.replace(nextProps.board.id);
+            }
+          }
         }
       }
     }

src/cordova-util.js

@@ -1,3 +1,5 @@
+import queryString from 'query-string';
+
 export const isCordova = () => !!window.cordova;
 
 export const isAndroid = () =>
@@ -7,7 +9,14 @@ export const isElectron = () =>
   isCordova() && window.cordova.platformId === 'electron';
 
 export const onCordovaReady = onReady =>
-  document.addEventListener('deviceready', onReady, false);
+  document.addEventListener(
+    'deviceready',
+    () => {
+      configDeepLinkPlugin();
+      onReady();
+    },
+    false
+  );
 
 export const onAndroidPause = onPause =>
   document.addEventListener('pause', onPause, false);
@@ -60,6 +69,30 @@ const configFacebookPlugin = () => {
   );
 };
 
+const configDeepLinkPlugin = () => {
+  window.IonicDeeplink.route(
+    {
+      '/board/:boardId': {
+        target: 'board',
+        parent: 'boards'
+      }
+    },
+    function(match) {
+      const regExp = /\/board\/(\w{24})$/;
+      if (!!match.$link.queryString) {
+        //deep link from facebook app
+        const qs = queryString.parse(match.$link.queryString, { decode: true });
+        if (qs.target_url.match(regExp)) {
+          const boardPath = qs.target_url.match(regExp);
+          window.location.hash = `#${boardPath[0]}?deepLink=true`;
+        }
+      } else if (match.$link.path.match(regExp))
+        window.location.hash = `#${match.$link.path}?deepLink=true`;
+    },
+    function(nomatch) {}
+  );
+};
+
 export const cvaTrackEvent = (category, action, label) => {
   try {
     window.ga.trackEvent(category, action, label);