We Keep Coding

Firebase dynamic links are null after new install, but work well when installed

The deep linking configuration works well for both iOS and Android when the app is installed. The configuration files seem okay for the domain https://friends.unblnd.com/dynamic.
But deep links are not recognised after an install.
So the listener works well, but getting the initial url when starting from the background isn't.
Logcat: Pixel 2, emulator
// When app is installed we get the expected behaviour:
I/ReactNativeJS: 'FIREBASE LISTENING:', { utmParameters:
{ utm_source: 'firebase',
utm_medium: 'dynamic_link',
utm_campaign: 'Online Cooking | UNBLND' },
minimumAppVersion: null,
url: 'https://unblnd.com/invite/group/eyJpdiI6IkNyMSsxTnJRWHJyQys3ZWZZd0R5Tnc9PSIsInZhbHVlIjoiRlFaQ2o3R0F0cnRpLzFvYzZ3WC9tQT09IiwibWFjIjoiOWFhZmIzZjk2MjM1MGQ5YTU5Y2M5YjBmOTIwNTdjODZkMzE3ZGY4ZTMyOTZmOTNhY2ZhZGM5NGNjNzc1NDEzYiJ9' }
// When the Firebase Dynamic Link (friends.unblnd.com/dynamic/aF8A) is clicked, and the app needs to be installed, after the install the deep link is not found:
I/ReactNativeJS: 'FIREBASE URL:', null
React Native: configuration
Deeplinking is configured within React Navigation v5. A custom function for getting the initial url is added and the subscribe function, the following const linking is added as an attribute <NavigationContainer linking={linking} ...>
const linking = {
prefixes: [
'https://friends.unblnd.com/dynamic/',
...
],
config: deepLinksConf,
// Custom function to get the URL which was used to open the app
async getInitialURL() {
// First, you may want to do the default deep link handling
// Check if app was opened from a deep link
const url = await Linking.getInitialURL();
console.log('FOUND URL:', url);
if (url != null) {
return url;
}
// Next, you would need to get the initial URL from your third-party integration
// It depends on the third-party SDK you use
const link = await dynamicLinks().getInitialLink();
for (var i = 0; i < 20; i++) {
setTimeout(async function () {
console.log('FIREBASE:', i, await dynamicLinks().getInitialLink());
}, 500 * i);
}
console.log('FIREBASE URL:', url);
return link.url;
},
// Custom function to subscribe to incoming links
subscribe(listener) {
// First, you may want to do the default deep link handling
const onReceiveURL = ({url}) => {
console.log(url);
... handle url
listener(url);
};
// Listen to incoming links from deep linking
Linking.addEventListener('url', onReceiveURL);
const unsubscribeToDynamicLinks = dynamicLinks().onLink((link) => {
console.log('FIREBASE LISTENING:', link);
onReceiveURL(link);
});
return () => {
// Clean up the event listeners
unsubscribeToDynamicLinks();
Linking.removeEventListener('url', onReceiveURL);
};
},
};
- Configuration: Firebase Dynamic Links
Open the deep link in your Android App
[APP]
If your app is not installed, send the user to
Google Play page for your app
- React Native: Info
System:
OS: macOS 11.5.2
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU # 2.30GHz
Memory: 43.73 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.15 - ~/htdocs/unblnd_app/node_modules/.bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2
System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7486908
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_265 - /usr/bin/javac
npmPackages:
#react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.2 => 0.64.2
react-native-macos: Not Found
#react-native-firebase/analytics: "^12.8.0",
#react-native-firebase/app: "^12.8.0",
#react-native-firebase/dynamic-links: "^12.8.0",
#react-navigation/native: "^5.9.4",
#react-navigation/stack: "^5.14.5",
How to make it work as expected?
Now, it has the same behaviour as internal url schemes... Maybe it is required to try Branch.io?

We started using branch.io and it works well:
npm package - react native branch

After looking up firebase documentation and other stackoverflow options, we created a piece of code that helped to resolve this issue.
You need to add "FirebaseDynamicLinksCustomDomains" parameter in info.plist file.
Dynamical URL :
https://yourapp.page.link/?link=https://yourapp.com/test=12345&isi=14602xxxxx&ibi=com.xxxx.yourapp
The important parameter in info.plist file :
<key>FirebaseDynamicLinksCustomDomains</key>
<array>
<string>https://yourapp.com</string>
<string>https://yourapp.com/link</string>
</array>
If you have a production critical app which has this issue, do not hesitate to ask me for inputs. Hit me up at https://khushalbhalsod.nl.

TypeError: Cannot read property 'whenReady' of undefined

i have a problem with electron.
TypeError: Cannot read property 'whenReady' of undefined
i use
node 14.0.1
electron 10.1.2
i run my app
"electron:serve": "vue-cli-service electron:serve",
my background.js
const { app, BrowserWindow } = require('electron')
const { server } = require('feature-server-core')
server.start();
function createWindow () {
// Создаем окно браузера.
const win = new BrowserWindow({
width: 1400,
height: 900,
minWidth: 1280,
minHeight: 800,
closable: true,
center: true,
type: "tool",
titleBarStyle: "hidden",
})
win.menuBarVisible = false;
// и загружаем index.html в приложении.
win.loadURL("google.com")
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

This is the problem related to directly calling the 'index.js' with node like node index.js.
You need to use electron index.js or electron .(if your file is index.js)
electron is building your app.

i solved the same problem just typing in the folder's terminal
npm start

You can use npm start instead of node . to execute your application. If you are using an IDE you have to configure npm with the start option.

I had the same symptom but the underlying problem was completely different from what you find elsewhere on the Internet. Normally, this issue comes from accidentally running main.js with node instead of electron. But in my case the problem was that the NTFS case sensitivity flag was set on the project folder and some subfolders because they were initially created using WSL. This lead to weird things like electron.cmd not being found due to Windows looking for electron.CMD with upper-case extension, etc., and apparently also some similar problem inside Electron itself which made it think we are not inside Electron after all, giving us the non-Electron version of electron which has no app.
The solution was to create a copy of the whole project folder using Windows Explorer, and using that one instead of the original folder. Windows Explorer doesn't preserve the case sensitivity flag, thus creating a copy of the folder clears the flag in all subfolders too. (You can then just delete the old folder.)
More information about case sensitivity in NTFS: https://www.howtogeek.com/354220/how-to-enable-case-sensitive-folders-on-windows-10/
Another cause could be having the environment variable ELECTRON_RUN_AS_NODE=1 set, maybe from some experiment or test a long time ago. Make sure this variable isn't set.

Preload scripts not being executed in webview iframes

Webview tag that is present in the renderer process, somewhere in <body>:
<webview src="http://somewebpage.com" preload="somescript.js">
somescript.js is executed in somewebpage, but if somewebpage has <iframe>s in it, the script will not run in the iframe.
How can I make it run? And before any other script in the iframe?
I found this issue on github that seems related:
https://github.com/electron/electron/pull/19260
but it doesn't make any sense...
I tried adding nodeintegrationinsubframes and changing values from false to true
<webview src="somewebpage" preload="somescript.js" nodeintegrationinsubframes="false">
but it has no effect :(

main.js
mainWindow = new BrowserWindow({
width: 1024,
height: 728,
webPreferences: {
nodeIntegrationInSubFrames: true,
webviewTag: true,
nodeIntegration: true
}
});
renderer
<webview
src="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe"
preload="./preload.js"
style='width: 100%; height: 800px'
nodeIntegrationInSubFrames
/>
preload.js
process.once("loaded", () => {
alert(window.location);
});
You can specify where you are going to execute javascript based on the window.location This above code will show the locations of every sub iframes.
This works for me very well.

I was having the same problems with my project and updating the electron to the latest beta version solved for me.
I assume you know how to do this:
npm install electron#11.0.0-beta.6
You still have to consider the stability concerns of using a development version of the package.

By scratching on electron's documentation perhaps this could be helpful as an alternative.
app.js
let win
app.whenReady().then(() => {
win = new BrowserWindow({
webPreferences: {
nodeIntegrationInSubFrames: true,
webviewTag: true,
nodeIntegration: false,
preload: path.join(app.getAppPath(), 'preload.js') // Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope.
}
})
...
})
renderrer
<webview
src="https://somewebpage.com"
preload="./preload.js"
nodeintegrationinsubframes>
preload.js
/* It can be used by the preload script to add removed Node global symbols back to the global scope when node integration is turned off */
const _setImmediate = setImmediate
const _clearImmediate = clearImmediate
process.once('loaded', () => {
global.setImmediate = _setImmediate
global.clearImmediate = _clearImmediate
})
My answer is based on the following resources:
Electron Documentation: Tag
Electron Documentation:
BrowserWindow
Electron Documentation: process
Electron
Documentation: Web embeds in Electron - WebViews
Electron
Documentation: Preload Example

Electron.js Uncaught ReferenceError: require is not defined

I am trying to make a new Electron desktop app.
by the way, when I insert electron module, I get this error.
If you are familiar with electron, can you help me to resolve this error?
I already tried to fix it.
include require.js.
but not working yet.
<script>
const electron = require('electron'); // I get error at this line.
const {ipcRenderer} = electron;
const form = document.querySelector('form');
form.addEventListener('submit', submitForm);
function submitForm(e) {
e.preventDefault();
}
</script>

If you are using Electron 5.0, then nodeIntegration is false by default in BrowserWindows so you need to specify it explicitly when you create your window:
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

You need to install electron
npm install electron --save-dev
--save-dev because electron is an development dependency.

BrowserSync Gulp doesn't open in Chrome

I try to open my website on localhost using BrowserSync and Gulp in Chrome, but it doesn't work. Default, it open in Firefox and everything works well. But, when I change params in gulpfile.js to open website in Chrome - I have this information:
[Browsersync] Couldn't open browser (if you are using BrowserSync in a
headless environment, you might want to set the open option to false)
My config in gulpfile.js:
// browser-sync options
// see: https://www.browsersync.io/docs/options/
var browserSyncOptions = {
browser: "google chrome",
proxy: "localhost",
notify: false
};
I tried "chrome", "chrome-browser", nothing happend. What I should to do?
Notice: I have Ubuntu 17.04, Chrome is my default browser.

I think the issue is with your port, try to change your proxy to below :
var browserSyncOptions = {
browser: "google chrome",
proxy: "localhost:3001",
notify: false
};
and check your website in chrome with this port :
http://localhost:3001
Update :
Also try to use the same port in browserSync :
browserSync({
proxy: 'localhost:3001'
});

Try dropping Google from browser sync call...
var browserSyncOptions = {
browser: "google chrome",
proxy: "localhost:3001",
notify: false
};
So you just have chrome.
var browserSyncOptions = {
browser: "chrome",
proxy: "localhost:3001",
notify: false
};