React Native - Dynamic link not persisting through install process - firebase

I have a small React Native app for which I have a series of Firebase dynamic links. When the app is installed, the links work perfectly in directing users to the relevant screen defined in the dynamic link
However, if the user does not have the app installed when the dynamic link is followed, the route defined in the dynamic link does not persist.
Is it possible to persist the deep link during the installation process?
I've tried a basic deep link URL like https://fakedomain.org/upload as well as using the ?link=https://fakedomain.org/upload param and neither seem to work.

To answer your question, it is possible to persist the link after installs but it won't be %100 successful because of some limitations on the iOS side. You can check the flowcharts in here
There could be a couple of reasons for it not to work after the app installation. Since no code is provided I'll assume you are listening to the dynamic link with onLink for the app's active state and checking the initial link with getInitialLink when your app is in the quit state.
Persisting the link after app installation involves the clipboard in iOS so make sure the problem is not related to new iOS 16 copy/paste permissions.
Your navigation library might be trying to navigate to the route from the link before your navigation stack is initialized.
If the problem occurs only in one platform it might indicate a problem in your native setup like maybe related to LinkingManager etc.
If you are using a custom domain, you should double check your Associated Domains and AndroidManifest settings.

Related

Alternative to iframes to make a split screen admin area

I am developing an admin dashboard where I want to have a files navigation system that shall be always available from the main admin area and stay independently loaded from the main admin area.
What's the problem?
While interacting with the dashboard, since the approach is SSR with PHP, the user will be executing page requests to update a post, go to a different view, etc. So the files navigation area will have to be reloaded on every request and I don't want that, since the backend PHP will have to fetch all files and build the files tree over and over again for each request.
I though about doing the following:
The wrapper page (admin dashboard) contains two iframes in a split viewport:
iframe MAIN
iframe FILE-NAVIGATOR
The user can use and navigate on each side of the viewport without affecting the other area.
For example, navigate through files and folders without moving away from an open editor on the main iframe.
Or save the editor contents and go do something else without having to constantly refresh and re-render the files navigation area.
Both iframe contents will be hosted under the same domain, so communication between them won't be an issue.
I want to go the SSR route via PHP, since this project does not deserve the effort of building a modern SPA and I need to reuse a lot of already existing PHP code.
But still, I want to do it as good as possible.
So the question is:
Do you know if there is a cleaner/better way to achieve this, better than iframes?
I am a bit worried about all browsers supporting iframes since it's in fact an old thing.
I think your best bet would be to go with a single page application; like React or Angular. This would somehow force you to build your backend system as an API server and letting most of the heavy UI lifting to JavaScript running in the client.
Some time ago I started working on a side project that would be an Amazon S3 Browser. The application runs in the browser, the main entrypoint is here but you'd be interested in looking at the Browser part itself.
You'll notice the BucketBrowser component accessible here is composed of 2 parts: the BucketList and the BucketContent, similarly to what you want to achieve.
The main advantage of working it as React (or Angular) and a neat Backend API is the separation of concerns and the opportunity to create also a Mobile or native client for other platforms that would leverage your Backend API.
I'm not a React expert, the links I've shared are part of an experiment not ready for production usage; but will help you visualize how you could achieve your idea by leveraging React.
Use SingleSPA https://single-spa.js.org/ framework and create Container app using React. Then keep your PhP code as it is and display it as child page inside Container app page. All new modules you can create as separate module. It is kind of FE microservices. We tried it using React and Vue js but I am sure it will work for PHP too.
You can open your admin releated stuff on own workspace = virtual desktop
Thats supported on Linux, on Window and perhaps on other OS too
The follow some hints how to to some thing on Linux:
Check how many workspaces are configured on your system:
wmctrl -d
You can set a different count of workspaces if you like:
wmctrl -d | wc -l
# or on follow way:
wmctrl -n 1
Open a program in foreground on current active workspace and move to 2`nd workspace:
wmctrl -s 1 ; xed & sleep 3; wmctrl -s 0;
Open a program in background on current active workspace and move to what ever your prefered workspace is:
Thats possible too.
You can display what you want on your background picture of your screen:
on Linux systems you can use p.e. Conky
Conky: http://conky.sourceforge.net/
Conky-Optionen: http://conky.sourceforge.net/config_settings.html
Conky-Variablen: http://conky.sourceforge.net/variables.html
Conky-colors: http://helmuthdu.deviantart.com/art/CONKY-COLORS-244793180?
Wettercodes: http://edg3.co.uk/snippets/weather-location-codes/germany/
https://www.linuxmintusers.de/index.php?topic=33952.0
https://www.linuxmintusers.de/index.php?topic=11139.0
on Windows systems, you can use p.e. bginfo
It can be they are like this on other OS too.

My Angular 10 App deployed in Azure is loosing its styles when refreshed

I have started working on an Angular 10 application using DevExtreme UI Widgets. I deployed a demo version in our Azure Cloud but while I was playing with it, I noticed a strange behavior. It seems that I lose my styles when I refresh.
For example, this is how the login page should be displayed:
If I refresh the URL without entering my login credentials, the page changes and gets displayed like this:
When I login, the bad or good styles are carried over. For example, the landing page should be displayed like this:
If I refresh the screen here, I also see the styles being altered. This is how the landing page gets displayed when the styling is lost:
When I lose the styling if I keep refreshing the page over and over again, eventually I regain the styles and my application starts being displayed as intended.
Any idea what causes the styles to be lost? Any suggestion would be greatly appreciated.
Thanks,
Ed
Regarding the deployment of Angular projects, I have encountered various problems. I am willing to share it with you and hope it will help you.
Troubleshooting steps:
Solution 1.
You can deploy it via Azure Pipelines CI/CD without using the vscode to deploy webapp.
Maybe smth wrong with VS Code plugin, as it is in preview
Solution 2.
Use github for continuous deployment. It is recommended to create a webapp and choose the Linux operating system.
Solution 3.
It is recommended to use FTP to publish the build folder after the project npm build.
This issue was resolved. After further investigation, it turns out that the problem had nothing to do with Azure Cloud deployment. I use DevExtreme UI widgets in my application and the application is based on their Angular Template.
I tried the website using Chrome, Edge and Firefox. The issue described above only happened in Chrome. DevExpress tech support pointed me to this support ticket.
After following the recommendations in the workaround and a redeployment, my app looks fine even in Chrome.
Thanks for everyone trying to help.
Ed

Action URL changing based on ActionCode settings when sending passwordless login email

I have 2 frontend interfaces for my firebase project (both housed in the same firebase app in the backend). One is web and one is for iOS.
I'm trying to create passwordless sign-in functionality for the iOS app and have gone through all setup guides regarding setting up dynamic links, custom domains etc.
I have gotten to the point where both the web and iOS apps can both send the email successfully, however the root domain changes between the emails sent from each platform. An example is below:
Web App: Sends login email via firebase.auth().sendSignInLinkToEmail and the resulting root domain in the email is https://app.domainname.com (this is correct and is what is set up as a whitelisted domain/dynamic link domain in firebase)
iOS App: Using the same function, the resulting root domain is https://domainname.com (incorrect). This results in the link going to the non-firebase, generic website and breaking the flow.
If I add the app subdomain back to the link generated by the iOS email, the dynamic link does then work, so the issue seems to be isolated to this root domain change specifically.
Upon further investigation, the issue seems to be related to the action code settings.
When the iOS.bundleId property is set, or handleCodeInApp is true, the incorrect root domain is used. This is true for either the web app or the iOS app.
I have done a project find on domainname.com in both projects (my iOS app is an ejected expo app so the search included Xcode files for this one) and can't find any instance of the subdomain being missing in either codebase (or the backend codebase for that matter) and am therefore at a loss.
I've looked throughout my firebase settings and can't find any instance of the incorrect one appearing, but am unaware of a search functionality on the platform to be certain. The Action URL (%LINK%) setting in Authentication->Templates appears to be the correct URL.
I am hoping to get to the point where irrespective of the action code settings, the same, correct root domain is used. I assume this is a configuration issue but am at a total loss about how to resolve it, so any help would be appreciated.
For reference, the action code settings in use are below:
var actionCodeSettings = {
url: 'https://app.domainname.com',
iOS: {
bundleId: 'com.domainname.app'
},
handleCodeInApp: true
}
Thanks!
In case anyone finds this in the future, it turned out for me that the issue was due to a combination of an undocumented lack of support for custom domains in dynamic links in react-native-firebase, alongside the fact that the library will only send the email links using the first selected domain in your Firebase Dynamic Links settings.
At the time of writing, the solution was to simply delete all other domains from my Dynamic Links settings, leaving only PROJECTNAME.page.link, so that this was the one that got used by the library. From there everything worked as expected.

Should I use Firebase Dynamic Links over Universal and App Links?

Im building an app for iOS and Android and need to open urls in the app on mobile and in the browser on desktop.
All links should open in the app if possible, so I cant generate one link for each possible url.
Can I do this in Firebase or do I have to create links in advance?
I'm not sure this question is related specifically to Firebase, or a general one.
I can try answering about the general case:
For opening in App:
In order to use Universal Links in iOS and AppLinks in Android, you'll need your click server to host Apple's AASA file or Android's asset file. This means that you'll need to serve that file for the operating system.
For opening in browser on desktop:
You'll need your click server to be able to detect desktop user agent and redirect you to store.
I didn't understand your question about: All links should open in the app if possible, so I cant generate one link for each possible url. Actually one link can fit all use cases, but you'll need to develop that capability in your own click server.

Firebase database empty tab, rules load indefinitely

I just created a firebase project. And the database in the console appears empty. On previous projects, when you clicked on the empty white area, you were able to create database items by hand.
But clicking it doesn't do anything.
The rules tab is loading indefinitely, and i can't type anything.
I'm on Chrome last version, do you encounter such problems by creating new projects?
Here are some screenshots:
Ok, quick answer to my own question as i wasn't able, from my Angular2 App, to interact with database as well via websocket.
I'm working in a company with a (strong) proxy setup file. Disabled it on windows settings and all works now perfectly. Firebase website appears to rely on websockets.
Hope this information can be useful to someone else!

Resources