How to load a PWA in a React Native app
React Native Webview is the most popular way to open/display a webpage inside a mobile app developed using React Native. In most cases where the developers just want to display the content of a webpage or use its functionality as a part of the app, this “react-native-webview” package works just fine since it is compatible for both Android as well as iOS. Unfortunately, there are some limitations in webview which you may encounter when you are trying to use special features of a Progressive Web App (PWA) from the mobile app it is being loaded.
This article elaborates how we can load a PWA in a mobile app developed using react native without compromising the unique features of the PWA.
When do we want to open a PWA in another mobile app?
Although PWAs are designed and developed to function as stand-alone mobile apps, there may be situations where developers might want to use the functionality of a previously developed PWA within a new mobile app or develop a new PWA to replace a webview of a current mobile app, providing the native-like features of the PWA to the existing app.
PWA Feature support by webviews
The “react-native-webview” package uses WebView class in Android and WKWebView API in iOS to view the target webpage. However, these web views do not support most of the functionalities of a PWA. The following table shows a feature test conducted by Thomas Steiner for the features of PWAs supported by the web views of the two platforms.
According to the above results, it can be seen that the web view techniques used in “react-native-webview” do not fully support the features of a PWA. Therefore we have to use an alternative to accommodate these features in our react native app.
Trusted Web Activity (TWA)
Trusted Web Activities are a new way to integrate Webapp content such as PWAs with Android apps. They can be instantiated with the TrustedWebUtils and use a communication protocol based on Chrome Custom Tabs. Content in a Trusted Web Activity is trusted; the app and the site it opens are expected to come from the same developer.
Note: TWA is specific only to Android and there is no similar feature available in iOS. Therefore, in a react native app, we could only use this feature for the android version.
Step 1: Build the PWA
The first step would be to build the Progressive Web App that we want to open from the mobile app. As mentioned in the previous section, it is necessary that the PWA is developed by ourselves (the same developer or team who develops the mobile app) since it is a primary requirement for the web app to be opened as a TWA.
You can follow the tutorial below to learn and build a PWA in quick time.
Step 2: Creating and adding the Asset Links file
To make your PWA trusted to the mobile app, you have to generate a assetlinks.json file and save it in the root of your web application. The association is created via Digital Asset Links and the association must be established in both ways, from the app to the website and from the website to the app.
There is a tool that can be used to generate the assetlinks.json file.
Set the App package name to the package name of your app and App package fingerprint to the SHA256 fingerprint of the key that you are using sign the release apk.
The resulting assetlinks.json file will look something like this,
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target" : { "namespace": "android_app", "package_name": "com.example.app",
"sha256_cert_fingerprints": ["hash_of_app_certificate"] }
}]Next, create in root: .well-known/assetlinks.json. (do not forget the dot at the beginning!) This file must be accessible at https://www.example.com/.well-known/assetlinks.json.
Step 3: Configuring the react native app
Now we move onto the react native project to add the TWA to the mobile app.
- Install the react-native-trusted-web-activity package by typing the following line on your console.
$ npm install react-native-trusted-web-activity --save
- In your
android/app/src/main/AndroidManifest.xmlfile add the following inside the<application>tag,
<activity android:name="android.support.customtabs.trusted.LauncherActivity">
<meta-data
android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="${defaultUrl}"/> <intent-filter>
<action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/> <data
android:host="${hostName}"
android:scheme="https"/>
</intent-filter>
</activity>
- In your
android/app/build.gradle, add the following lines
defaultConfig {
...
manifestPlaceholders = [
hostName : "www.example.com",
//replace with the url of your PWA
defaultUrl : "https://www.example.com", //replace with the url of your PWA
assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' + '"target": {"namespace": "web", "site": "https://www.example.com"}}]'] //replace with the url of your PWA
buildConfigField "String", "DEFAULT_URL", "\"${manifestPlaceholders.defaultUrl}\""
multiDexEnabled true
...
}and
dependencies{
...
implementation "com.github.GoogleChrome.custom-tabs- client:customtabs:3a71a75c9f"
...
}Step 4: Usage in react native code
After the configurations are done you can import the package and use it in your code as below to open the PWA from the app as a TWA.
import RNTrustedWebActivity from 'react-native-trusted-web-activity';//Replace the url with your PWA's URLRNTrustedWebActivity.goToPWA('https://www.example.com');
Step 5: Signing the app
The final step is to build a signed apk from your react native project. Here, it is important to remember that you should use the same key that you used when generating the assetlinks.json file in step 2.
The following tutorial guides you to generate a signed apk from your react native project.
Conclusion
From this article, we have discussed how we can use Android’s Trusted Web Activity feature to load a PWA within a react native mobile app. Although there is no workaround for iOS to perform similar functionality, we can use this technique to open a PWA within a react native app, without compromising its features if the requirement allows having the functionality for android version only. I believe this article will be helpful for the react-native developers who want to integrate this feature to their react-native apps.
Good Luck! 😊
