Deep Linking Cross-Platform Mobile Apps Hosted in AWS
Deep linking is a great way to improve user experience and flow by routing users directly to the in-app content they want to see. When users tap a deep link, they are sent directly into your app, without routing through the device’s web browser first. If the app isn’t installed, the user can be directed to a website, or the device’s app store. Deep links are a great feature for cross-platform apps, and provide a seamless mobile experience with increased ease for users to successfully access the intended content.
Although the benefits of deep links are significant, set up can be a bit daunting. Between AWS set up, iOS and Android configuration, and app set up and routing, there are a lot of pieces to account for. Don’t worry though, this step by step guide will help you to successfully set up deep linking in your mobile app.
iOS Configuration
Log into the Apple Developer Site. Navigate to the ‘Certificates, Identifiers, & Profiles' section. Select your app’s identifier. Toggle to enable “Associated Domains”, and save. Be sure to take note of your App ID Prefix and Bundle ID on this page as well.
Create the site association file, titled apple-app-site-association. It is important the file has this specific title with no ending or extension. Populate your appId with your App ID and Bundle ID.
3. Create an index.html file.
4. Open Xcode and navigate to 'Signing & Capabilities’. Click ‘+ Capability’, and choose Associated Domains. In the Domains entry, add your domain with the format applinks:yourdomain.com.
In AWS
Create the domain. Sign into AWS and get a domain via Route 53. We’ll say this is example.com.
Create your S3 bucket. S3 is simple storage in AWS. Think of it like a folder on your Desktop that can be easily accessed in AWS for your project. We’ll use this for our two newly created files. Navigate to the S3 page, select ‘Create Bucket’, and follow the steps. The name of your bucket should match your Route 53, example.com. Be sure to uncheck ‘Block all public access’ to make this publicly available.
Upload both the apple-app-site-association and index.html files to your newly created S3 bucket.
Within your bucket, select the ‘Properties’ tab, then click ‘Static Website Hosting’, and ’Edit’. Choose ‘Enable’, and ‘Host a static website’. For the index.html option, input ‘index.html’ and save. Once saved, this will give you a domain that can be used in the Route 53.
Create a Custom SSL Certificate via Certificate Manager. Select ‘Request certificate’ and follow the steps to create. For the domain name, use your same example.com. Once created, click ‘Create records in Route 53’. This can take up to 15 minutes to certify.
Set up Cloudfront to redirect to your S3 bucket. Using Cloudfront allows us to redirect all traffic from our domain to https and our S3 bucket. Once in the Cloudfront section, select ‘Create Distribution’. For the 'Origin Domain Name’ input the endpoint found in the static web hosting section of the S3 bucket, which will look something like http://example.com.s3-website-us-east-1.amazonaws.com. Under ‘Viewer Protocol Policy’ select Redirect HTTP to HTTPS. Under the Settings section, find ‘Alternate domain name (CNAME)’. Here, use the domain name used in the naming of the S3 bucket, example.com. Select the Custom SSL Certificate created in the previous step, and Save.
Configure Route 53 to redirect domain to Cloudfront. Select your hosted domain in Route 53, and select ‘Create Record’. For the ‘Record Name’ use the same domain used for your S3 bucket, example.com. Select option Record Type ‘A’. Enable Alias, and select the option of ‘Alias to CloudFront distribution’, US-East-1, and finally enter your Cloudfront distribution domain name you just created.
Android Configuration
Open your project in Android Studio. Under ‘Tools’, select ‘App Links Assistant’.
Click ‘Open URL Mapping Editor’, then the ‘+’ to add your Url Mapping. Provide the url and path. Select ‘OK’.
Click ‘Select Activity’. Select your Activity and click ‘Insert Code’.
Create Digital Asset Links JSON file. First, get the fingerprint from your keystore file. Then generate the content for your assetlinks file by using this site: https://developers.google.com/digital-asset-links/tools/generator. Create a file titled assetlinks.json. Copy the content you just generated into your newly created assetlinks.json.
In AWS S3 bucket, add a folder titled .well-known. Upload your assetlinks.json file into this folder.
App Routing
Lastly, update the routing in your Angular app. In app.component.ts, add a listener that will redirect when a deep link is found.
And there you have it! A step by step guide to create a deep link for your cross-platform mobile app hosted in AWS.