How to create Android app links using branch.io in Ionic 2/3 app? - ionic-framework

I'm having a bit of difficulty understanding the implementation of some of the branch concepts for the Ionic platform Wrapper SDK .
I've generated short URLs using the SDK, but it seems to get redirected in the browser before the app is launched. Link -> Browser -> App handoff.
How do I avoid this redirection? I've enabled Android app link, added SHA 256 of certs and added all configs in config.xml as per SDK docs.
Is it possible to generate long links as using the "/a/ and the Branch Key" as in https://bnc.lt/a/key_live_kaFuWw8WvY7yn1d9yYiP8gokwqjV0Swt?foo=bar&baz=456&$fallback_url=https%3A%2F%2Fbranch.io%2F
Something like branchcordova://a/key_live_kaFuWw8WvY7yn1d9yYiP8gokwqjV0Swt?foo=bar&baz=456&$fallback_url=https%3A%2F%2Fbranch.io%2F

Looks like a configuration issue. Have you added your Link Domain on the config.xml file? You can find your Link Domain on the Link Settings page.
<!-- sample config.xml -->
<widget id="com.eneff.branch.cordovatestbed"
version="0.0.1" xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<!-- Branch -->
<plugin name="branch-cordova-sdk" spec="^2.5.0" />
<branch-config>
<branch-key value="<YOUR LIVE KEY>" />
<uri-scheme value="<YOUR URI SCHEME>" />
<link-domain value="<YOUR LINK DOMAIN>" />
<ios-team-release value="<YOUR TEAM ID>" />
</branch-config>
Long links can only be generated using your Link Domain.
Something like branchcordova://a/key_live_kaFuWw8WvY7yn1d9yYiP8gokwqjV0Swt?foo=bar&baz=456&$fallback_url=https%3A%2F%2Fbranch.io%2F is incorrect.
Someting like https://example.app.link/fzmLEhobLD?foo=bar&baz=456&$fallback_url=https%3A%2F%2Fbranch.io%2F is correct.
You should use https://link.example.com if you have a custom link domain configured.
More info on Long Links- https://docs.branch.io/pages/links/integrate/#long-links

If we use the Android app link (URI scheme), then the app would be open directly. But, it would be detected as a non-branch link and we might not get any analytics data or branch.io related features.
The redirection of short and long URLs seems to depend on the app which is opening the link. Some apps like Hangout app do the redirect thing.
If we are to open a branch link from inside our app, we could do the following to somehow skip the redirection.
const longLink = https://bnc.lt/a/key_live_kaFuWw8WvY7yn1d9yYiP8gokwqjV0Swt?foo=bar&baz=456;
window.open(longLink, '_system');

Related

Flutter web flavor

I have a Flutter web app that uses firebase and I have two firebase projects(dev and prod).
I'll like to set up Flavors for this project(just web no mobile).
In mobile, I can use different GoogleService-Info.plist or google-services.json files for either flavor but I could not find anyway to do this on the web app as the configuration is done in the index.html file. Is there any way to do this? Maybe have different HTML files and specify which of them to be bundled while running the app?
Thanks.
You can use Firebase SDK auto-configuration. By relying on the reserved Hosting URL, you can deploy the same code to multiple Firebase projects.
On each of your Firebase projects, go to Project Overview -> Project settings. See here
Under "Your apps" select your web app. If you haven't, link your web app to a firebase hosting site.
In Firebase SDK snippet, select the automatic option. See here
Replace your current firebase configuration on index.html to:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.21.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.21.0/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
That's it, this will allow you to use the same index.html for different flavors.
More Info here
See Flutter Firebase - Setting different deployment targets for iOS, Android, and Web.
This explains doing flavors for iOS and Android and Firebase SDK auto-configuration for the Web.

The 'Add to homescreen' link is not visible in Chrome Devtools - Application - Manifest

I am trying to simulate the 'Add to Homescreen' event as described in this guide from google. But, that blue link 'Add to homescreen' that they have in their screenshot under DevTools - Application - Manifest simply isn't there on my Chrome Dev Tools. I've tried it on several PWAs (including the Google I/O 2016 progressive web app PWA suggested as a page to try the feature on in the first link). No luck. That link simply isn't there.
Ultimately, I want to catch the event, prevent the default and then show the user a custom 'Install this app' message, as suggested in this guide. But to test it, I need this Chrome DevTools feature.
My Chrome DevTools version is 76.
Link the web manifest and add a link for the website in the html file
https://openclassrooms.com/en/courses/2479876-build-your-website-with-html5-and-css3/2490386-creating-links
For example
<p>This is the homescreenlink ?<br />
</p>
In Running the chrome development tools,
it is important to check what is the error maessage in the application list.
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
What are the error messages you get when you work on this?
https://developers.google.com/web/fundamentals/app-install-banners/
One can debug with this tutorial.
https://developers.google.com/web/tools/chrome-devtools/javascript/reference

Ionic app: some native plugin dont work on UWP

I don't know if I ask this in the right place. I Ask it on global furum but didn't get any response.
I have an app that run well on an droid. I want to build it on UWP as well. I have been able to build the app and make it run but some plug-in that use native resource do not work.
For one, native storage,
the second I notice by now is network resource (HTTP request and websocket client).
Those was working well under android. e.i.:
getData(): Observable<AlarmData> {
return this.http.get<AlarmData>(this.server.url() + '/ajax_alarms');
}
I have seen that UWP need some certificate, I found in my app at least one related to network:
<Capabilities>
<Capability Name="internetClient" />
</Capabilities>
But I have not found if and how should I add more...
I tested it on a windows10 machine,
ionic 4.0.6
Take a look on MS own sample:
https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/HttpClient
You have to allow the app to use a resource before you have access.

sencha touch debug emulator failures

I have a sencha touch example application which works fine on browser (using sencha web start) and iOS and Android simulators (built with phonegap and launched using sencha app build -run native).
I made few changes and was testing in browser alone, unfortunately. When I finally launched the app in simulators, app does not launch. I do not see the main view corresponding screen. It shows a blank screen on app launch. Application works fine in simulator browser as well. App based launch alone fails.
How do I troubleshoot the app failures on simulator? Are there any logs I need to look at? Have no clue.
I have Sencha Touch 2.3.1 and Sencha Cmd v4.0.4.84 on ubuntu OS.
No IDE as of now.
UPDATE
Was able to narrow it down to the store problem. I am trying to launch the First App in sencha docs. Store is making ajax call to googleapis. Not sure if this is causing the problem. I changed this to use local store and app launch worked fine. No idea why app is not able to get the data from googleapis. Simulator browser is able to get the data but just not the app.
As mentioned in the update, app tried to access google api url to get the json data. config.xml in project's root folder prevented access to external domains. As a result app failed to render the view. Fixing it as mentioned in Error: Whitelist rejection in Phonegap to allow required domains worked.
<!--
Define access to external domains.
<access /> - a blank access tag denies access to all external resources.
<access origin="*" /> - a wildcard access tag allows access to all external resource.
Otherwise, you can specify specific domains:
-->
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
Change <access origin= to <access origin="*"/> to allow all domains or use your specific domains.

Phonegap App : External URL don't open in InApp Browser of IOS

External URLs don't open in the system's browser in my PhoneGap IOS application. I'm using PhoneGap Build 2.7.0.
Javascript:
window.open(myURL, '_blank', 'location=yes');
Config.xml
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<access origin="*" />
How to solve this? when i using the url "www.google.com" it works fine but when i used required url for my app it did not worked even that url works fine in browser.
Javascript:
myURL = encodeURI(myURL);
window.open(myURL, '_blank', 'location=yes');
Using of encodeURI method fix the above issue
Take reference from this link.
I have used this plugin for my IOS application development way back. It works like a charm.
Also, it is easy to integrate.
Hope it helps !