diff --git a/docs/indexing/android.md b/docs/indexing/android.md index 282034a4..27d66608 100644 --- a/docs/indexing/android.md +++ b/docs/indexing/android.md @@ -1,11 +1,31 @@ --- -title: Android Setup -description: Manually integrate App Indexing into your iOS application. +title: Android Setup | App Indexing +description: Setup your Android application to handle app indexed URLs. --- # Android Setup -> The following steps are only required if your environment does not have access to React Native -auto-linking. +Your Android application needs to be setup to detect whether URLs which a user navigates to on your device are to be +handled by your application. -## TODO +To set this up, add a new `intent-filter` to your manifest file. The example below will trigger the app indexing module +to handle URLs from any `https://invertase.io/blog` URL. + +`android/app/src/main/AndroidManifest.xml`: +```xml + + + + + + + + + + +``` diff --git a/docs/indexing/index.md b/docs/indexing/index.md index bbf5613a..b58d1911 100644 --- a/docs/indexing/index.md +++ b/docs/indexing/index.md @@ -5,7 +5,13 @@ description: Firebase App Indexing gets your app into Google Search. # App Indexing -TODO +Firebase App Indexing gets your app into Google Search. If users have your app installed, they can launch your app and +go directly to the content they're searching for. App Indexing reengages your app users by helping them find both public +and personal content right on their device, even offering query autocompletions to help them more quickly find what they +need. If users don’t yet have your app, relevant queries trigger an install card for your app in Search results. + +React Native Firebase provides functionality to handle events such as users opening the application via a URL which +has been indexed by Firebase. @@ -18,7 +24,7 @@ TODO title="Quick Start" to="/quick-start" > - Install & start indexing your application. + Setup your application to handle indexed URLs. - TODO + Understand how to handle indexed URLs in your application in the reference documentation. diff --git a/docs/indexing/ios.md b/docs/indexing/ios.md index ebddf7c2..e1b47e1f 100644 --- a/docs/indexing/ios.md +++ b/docs/indexing/ios.md @@ -1,11 +1,50 @@ --- -title: iOS Setup -description: Manually integrate App Indexing into your iOS application. +title: iOS Setup | App Indexing +description: Setup your iOS application to handle app indexed URLs. --- # iOS Setup -> The following steps are only required if your environment does not have access to React Native -auto-linking. +To handle indexed URLs within your iOS app, the URL definition needs to be added to your project using XCode. + +## Setup up with XCode + +Depending on your setup, open the following file with XCode: + +- Using Pods: `ios/.xcworkspace` +- None Pods Setup: `ios/.xcodeproj` + +### Navigate to URL Types + +Open the URL Types configuration for your project: + +1. Select your project on left hand side file tree +2. Select the Info tab on the middle pane +3. Expand the URL Types section header + +![Example](https://prismic-io.s3.amazonaws.com/invertase%2F6b3a9afc-bb0a-44da-b642-ab0da8c48eed_navigate-to-url-types.png) + +### Create a URL Type and Scheme + +After navigating to the URL Types section of your Xcode workspace you can now add a new URL type. + +#### Add new URL type (+) + +1. Click the Add items plus (+) icon at the bottom of the URL Types section: + +![Example](https://prismic-io.s3.amazonaws.com/invertase%2F806d79c8-3208-46db-9b38-7e5b5a13d7a2_add-item.png) + +#### Configure the new URL Type + +1. Input the `Identifier` value; The Identifier is normally the same as your Bundle Identifier which is usually the reverse of the domain for your app e.g. com.mycompany.app. +2. Input the `URL Schemes` value - this can be a comma delimited list of values; For example if you set this to myapp,foobar then your app will then accept urls from myapp://* and foobar://*. + +`Icon` and `Role` can be left to use the defaults unless you need to change these. + +![Example](https://prismic-io.s3.amazonaws.com/invertase%2F5d66eb78-883f-4f87-b390-adcee22bbff0_configure-item.png) + + + + + -## TODO diff --git a/docs/indexing/quick-start.md b/docs/indexing/quick-start.md index 7aa78e00..5455d71a 100644 --- a/docs/indexing/quick-start.md +++ b/docs/indexing/quick-start.md @@ -5,9 +5,104 @@ description: Get to grips with the basics of App Indexing in React Native Fireba # App Indexing Quick Start +## Installation + +Install this module with Yarn: + +```bash +yarn add @react-native-firebase/indexing@alpha +``` + +Setup your application by following the platform specific instructions: + + + + Setup your Android application to handle app indexed URLs. + + + Setup your iOS application to handle app indexed URLs. + + + ## Module usage -TODO +The app indexing module provides functionality to hook onto a user opening your application via an app indexed URL. +Import the module: +```js +import indexing from '@react-native-firebase/indexing'; +``` + +The package also provides access to the firebase instance: + +```js +import { firebase } from '@react-native-firebase/indexing'; +``` + +### Detecting app opens from a URL + +If a has your application installed, but in a closed state, opening an app indexed URL will cause the app to +open. Once the app has loaded, the `getInitialURL()` method can be called to detected whether the app was opened +by an app indexed URL. If your application was not opened via an app indexed URL, the value will be `null`. + +Note: All URLs which trigger the app to open will be passed to this method, therefore it is important to check +the domain of the URL to check it has come from an indexed source. + +```js +import indexing from '@react-native-firebase/indexing'; + +async function bootstrapApp() { + const url = await indexing.getInitialURL(); + + if (url && url.startsWith('https://invertase.io')) { + if (url === 'https://invertase.io/offers') { + // Handle the URL, e.g. using a react-navigation custom service: + NavigationService.navigate('OffersScreen', { from: 'indexing' }); + } + } +} +``` + +### Subscribe to URL events + +If a user has opened your app and it is open or in a background state, you must subscribe and handle the URL open +event directly within your application life cycle using the `onOpenURL()` method. + +Note: All URLs which trigger the app to handle it are passed to this method, therefore it is important to check +the domain of the URL to check it has come from an indexed source. + +```jsx +import React, { useEffect } from 'react'; +import indexing from '@react-native-firebase/indexing'; + +function App({ navigation }) { + // Listen to open URL events once ready + useEffect(() => { + const unsubscribe = indexing().onOpenURL((url) => { + if (url.startsWith('https://invertase.io')) { + if (url === 'https://invertase.io/offers') { + // Handle the URL, e.g. using the react-navigation navigation prop: + navigation.navigate('OffersScreen', { from: 'indexing' }); + } + } + }); + + // Return the function to unsubscribe from + return unsubscribe; + }, []); + + return ; +} +```