I'm pretty new to javascript programming, I managed to make a PWA type application, made with Quasar, and now I'm looking for a solution to exclude some routes. I'm trying to exclude for example "/registerWoE" from appearing the install button. My app is purposed to be a B2C app.
Case 1: If a Client wants to register on the app via path above, provided by an employee I don't want the Install button to appear.
Case 2: If an Employee access "/admin" path, the Install button can appear and the Employee can install his application in the phone / PC for easier access.
I found that I need to change to "/src-pwa/custom-service-worker.js", but I couldn't figure out how to exclude that path.
You can add this snippet to the pages you want to ignore.
See beforeinstallprompt on MDN
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e; // if you want to automate showing it later
});
Related
I made a Tauri Hello world app, using react-ts, and that contained logos for Tauri, Vite, and React, that are clickable of course, it uses an a HTML tag like <a href="https://vitejs.dev" target="_blank">, which if I click on it, opens a new tab in my default browser that loads that URL.
So naturally, I wanted to test if Tauri apps would open that link (or any other remote URL actually) inside the app's webview, so I changed that to <a href="https://vitejs.dev"> which did just that.
What I want to know is: how to configure any Tauri app to not open / load any URLs unless I specifically allow it to?
What I tried already:
I tried changing the CSP option in the tauri.conf.json file to none to not allow any remote scripts or ....
"security": {
"csp": {
"default-src": ["'none'"]
}
},
I also tried searching for some kind of allowed-navigation option that someone talked about
I also started looking into a before-navigate hook in the main.rs file but i don't know how to implement it
I would really appreciate it if you explain how to reach my objective, and I would be even more indebted to you if you can give me same better options or the ones more appropriate for a production ready app.
Regards,
zk.
This questions concernes a web app build in React that will be accessed with smartphones through their browsers. I use iPhone with both Safari and Chrome for testing.
One step involves opening a native authentication app.
According to the docs of the native app, it can be open from the browser by doing this:
const openAuthApp = () =>
(window.location = "https://app.bankid.com/?autostarttoken=&redirect=");
This works fine if I call the function when clicking a button, like this:
<button onClick={openAuthApp}>Open</button>
The above code triggers the opening of the authentication app immediately when clicking the button.
But when I trigger the function immediately after page has loaded, without using a button, like this
useEffect(() => {
openAuthApp();
}, []);
I get an error in the browser saying that the app was not found on this device.
Idk much about how browsers work but my first guess was that it takes some time for the browser to acquire information about all installed apps, so I added a timeout before executing the method:
useEffect(() => {
setTimeout(openAuthApp, 5000);
}, []);
It still failed. It works if I press the button less than 5 seconds after page load, so the time of initiation after page load shouldn't be the factor here.
I don't know how to proceed with this, and would appreciate ideas on how to move forward.
I suspect that your problem is a missing user gesture, which is common when using Claimed HTTPS Schemes - eg see this Chrome browser requirement.
There is a similar problem when using OAuth flows and the AppAuth pattern with HTTPS redirect URIs, which occurs for both iOS and Android. See the sections titled Problems Receiving Redirect Responses in my iOS and Android blog posts.
The solution for my mobile samples was to add an interstitial web page and if you do a view source you will see that it has an onclick handler that invokes a deep link after the user gesture:
document.getElementById('continueButton').onclick = () => {
const redirectUri = 'https://mobile.authsamples.com/basicmobileapp/oauth/callback';
window.location.href = redirectUri;
};
You won't need to go to these lengths of course, but I think you will need a user gesture to invoke the BankID app and do an external login reliably. In some ways this is a reasonable UX also, since you are keeping the user informed before you switch apps, rather than doing so abruptly. I would put a positive spin on it like this:
You will now be redirected to the BankID app to perform strong authentication and to provide consent. Please click Next to proceed.
Option 1:
Use window.location.href instead of window.location
const openAuthApp = () =>
(window.location.href = "https://app.bankid.com/?autostarttoken=&redirect=");
If your web app have the same domain as bankid.com use window.location.assign instead.
const openAuthApp = () =>
(window.location.assign= "https://app.bankid.com/?autostarttoken=&redirect=");
Option 2:
this will take 5 minutes, use branch.io for links (you do not need to install the SDK)
signup create new app, write the name of the app
got to "Configuration" from left menu select "I have an Android App"
add the link for your app and select it then fill other options if you like
it will give you a link "https://[YOUR_APP_ID ].app.link"
use this link instead of the default link
This should work without problem
I am implementing deep linking to my android app and it works only when clicking on a link with the desired url such as https://mydomain.co.il only outside browsers like in whatsapp etc.
I know that for making app links work from browser, the website needs to have assetlinks.json file located at https://mydomain.co.il/.well-known/assetlinks.json in order to verify that I am the owner of both the domain and the app.
So I do have the assetlinks.json file ready but does anyone know how can I put the file in that specific location (https://mydomain.co.il/.well-known/assetlinks.json) on my website when using Wix as the platform ?
Thanks in advance
I struggled to find a straightforward way to host the Android Digital Asset Links file on Wix. Found bits and pieces of help on the net. Tested my code and it seems to work.
Here it goes:
Android needs a Digital Asset Links file hosted on the website of an app to verify ownership. The link required is: https://www.yoursite.com/.well-known/assetlinks.json
Since hosting this file at that location was not a plausible solution on Wix (at least to me at the time of this post), we'll need to add a JS file which can spit out the same JSON data and then redirect the URL Google expects to our new link.
Go to Dev Mode -> Enable Developer Mode and switch on the developer mode
In the new left pane, go to {} (Public & Backend)
Next to Backend, click on +, and create a new Javascript file with the name http-functions.js
Add this code:
// Import the Wix http functions API
import {ok, notFound, serverError} from 'wix-http-functions';
// Set the assetlinks variable (between the single backticks) with the content of your assetlinks.json file
let assetlinks = `[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target" : { "namespace": "android_app", "package_name": "<Your app package>",
"sha256_cert_fingerprints": ["<Your app's SHA256>"] }
}]`
// Define http get function for your trust.txt file
export function get_assetlinks(request) {
let options = {
"headers": {
"Content-Type": "text/plain"
},
"body": assetlinks
};
return ok(options);
}
Publish your site
Test if the JSON is displayed by calling: www.yoursite.com/_functions/assetlinks
Hoping that things are great so far, we'll proceed to the last and final step - URL redirection
Go to site Settings > Marketing & SEO > SEO Tools > URL Redirect Manager
Click on New Redirect and enter for:
Old URL: /.well-known/assetlinks.json
New URL: /_functions/assetlinks
Test out the link www.yoursite.com/.well-known/assetlinks.json
Hope this helps someone! Better late than never.
I recently developed an Android App with native vue.js.
I used geolocation plugin and its works perfectly on devices with google play services but not on those where Google services are deactivated.
I am searching for a module which can make location possible on devices without Google services.
Your help is needed.
Try this,
import * as application from "application";
const PLAY_SERVICES_RESOLUTION_REQUEST = 9999;
...
isGooglePlayServicesAvailable() {
const googleApiAvailability = com.google.android.gms.common.GoogleApiAvailability.getInstance();
const resultCode = googleApiAvailability.isGooglePlayServicesAvailable(application.android.context);
if (resultCode != com.google.android.gms.common.ConnectionResult.SUCCESS) {
if (googleApiAvailability.isUserResolvableError(resultCode)) {
apiAvailability.getErrorDialog(application.android.context, resultCode, PLAY_SERVICES_RESOLUTION_REQUEST)
.show();
}
return false;
}
return true;
}
...
It would notify and install play services if not available.
As it is an android app, you can use LocationManager and set the appropriate provider, GPS or NETWORK.
I am not an expert in vue, so can not give you code but as you have access to all native APIs in nativescript, you can convert that.
Sample
LocationManager locationManager = (LocationManager) getApplicationContext().getSystemService(LOCATION_SERVICE);
Location location = locationManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
I have used it before in nativescript angular app.
For location strategies, you can refer here.
I met the same problem, and finally I fixed it, the problem is, nativescript-geolocation v3.0.1 do not deponds on google play service, but it is outdated and not work with tns v6. this is my solution:
you can get the code of nativescript-geolocation v3.0.1, modify a little, and then, depend the source code on your tns v6 project, it works. following is the details.
git#github.com:NativeScript/nativescript-geolocation.git
cd nativescript-geolocation
git checkout -b your-branch v3.0.1
next, modify the code of src/geolocation.android.ts file, just one line
- let currentContext = <android.app.Activity>androidAppInstance.currentContext;
+ let currentContext = <android.app.Activity>androidAppInstance.context;
next, use the source code dependency in your project,
tns plugin add /path/to/nativescript-geolocation/src
you can see demo/app/main-page.ts file in the git repo for how to use this plugin of this version.
After using the below code. App is launching the native android map showing the app with passed lat and long value.but my problem is after clicking on the nav option the 'from' is blank but 'to' should be coming as my passed value. But it is coming as blank value.
window.location = 'geo:40.765819,-73.975866'
If you are willing to use Cordova plugins, then I would suggest taking a look at the Launch Navigator plugin.
It allows you to do exactly what you want, but also allows you to launch other supported apps and even allows you to prompt the user with a list of applications to choose from.
There is an example in the documentation, showing how you can open a specific application, like Google Maps. For your convenience, I have also posted it below.
launchnavigator.isAppAvailable(launchnavigator.APP.GOOGLE_MAPS, function(isAvailable) {
var app;
if(isAvailable) {
app = launchnavigator.APP.GOOGLE_MAPS;
} else {
console.log("Google Maps not available - falling back to user selection");
app = launchnavigator.APP.USER_SELECT;
}
launchnavigator.navigate([40.765819, -73.975866], {
app: app
});
});
In this piece of code, the user will still be given a choice to pick another app, if Google Maps is not available.
There is also an AngularJS wrapper available for this called ngCordova, installation instructions are here and documentation about the wrapper for the Launch Navigator plugin can be found here.