I am creating an app using Angular 4, that should receive push notifications from time to time. I have managed to make the notification appear, but I wasn't able to customize its styles and its content.
What I am looking for is a way to change the background color of my notifications so that I can make them blink to call the user's attention.
Here is my code:
public showNotification(title: string, text: string): Notification {
// Check if notifications are supported
const notificationOptions = {
body: `<div style="color:red"><p>${text}</p></div>`,
icon: 'assets/img/logo_onyo-simples.png',
badge: 'assets/img/logo_onyo-simples.png',
vibrate: [200, 100, 200]
};
try {
// Throws an exception if the browser doesn't support a notification.
const notification = new Notification(title, notificationOptions);
notification.onclick = (e: any) => {
window.focus();
notification.close();
};
return notification;
}
catch (e) {
if (e.name === 'TypeError') {
this.raven.captureBreadcrum({
message: 'This browser does not support notifications',
level: 'warning',
category: 'notification'
});
}
else {
this.raven.captureException(e);
throw e;
}
}
}
I've tried to add a test HTML tag to the notification body, but that didn't work. Is there a way to do this?
Note: the reason because I am not using Toastr notifications is because I want the user to receive my notifications even if the browser is minimized or behind another application.
Note 2: here is an example of the type of notification that I am using: https://tests.peter.sh/notification-generator/.
I believe that what you're trying to do is not possible, at least according to the spec. There are no properties nor methods for passing / setting of visual presentation.
I'm speculating here, but it could be because browser vendors want to prevent exactly the type of behavior you're trying to create. Maybe you can style a notification with good taste and design. However, this would also open the door to people creating bad, annoying and straight up predatory notifications. It would open the door to dark patterns.
Although, it's possible that this kind of stylistic flexibility will be added in the future. I just don't think so.
Related
I am testing a staking dapp. Using cypress with the synpress plugin, that makes Metamask interactions easy. https://github.com/Synthetixio/synpress
Now the dapp works. When it goes to confirmMetamaskSignatureRequest, metamask just stays open. I tried cy.switchToMetamaskWindow();, cy.rejectMetamaskSignatureRequest(). The picture shows where the test is idling and eventually failing. Any ideas?
halting at this picture
it('test', () => {
// imports a custom address
cy.importMetamaskAccount(Cypress.env('PRIVATE_KEY'))
// open the staking tab
cy.visit('/staking', {
auth: {
username: Cypress.env('URL_USERNAME'),
password: Cypress.env('URL_PASSWORD')
},
});
// connect wallet to dapp
cy.contains('Connect Wallet').click();
cy.contains('MetaMask').click();
cy.switchToMetamaskWindow();
cy.acceptMetamaskAccess().should("be.true");
// check if address is recognised by dapp
cy.getMetamaskWalletAddress().then(address => {
cy.switchToCypressWindow();
cy.get('p').contains('WALLET:').should('exist');
console.log(address);
cy.get('p').contains(address).should('exist');
cy.get('p').contains('DISCONNECT').should('exist');
});
// input the amount to stake
cy.get('input[name="Token[enter image description here][1]Value"]').type('1');
// choose the time to stake
cy.contains('10 days').click();
// confirm staking
cy.contains('confirm Staking').click();
// should sign metamask tx but its only metamask window is open
cy.confirmMetamaskSignatureRequest().should("be.true");
});
Solved:
Instead of...
cy.confirmMetamaskSignatureRequest().should("be.true");
...you should use this:
cy.confirmMetamaskTransaction().should("be.true");
I have been using Expo to develop a react-native app, The functionality I am currently trying to implement is to share a link with friends on platforms such as fb messenger/whatapp or even normal texts and when they click this link it will launch my app to a specific page using the parameters.
After extensive research online - I’ve come to a blocker, following expo’s documentation I defined a scheme for my app - when I press share everything works correctly a message is created and I’m able to share content but only as string.
I am using react-natives Share library to share to an app and I’m using Expo to provide me with the link.
Ideally my first goal is to get the app opening using the Expo Link before I explore further into adding more functionality to the link.
Share.share({
message: "Click Here to View More! " + Linking.makeUrl( ' ' , { postkey : "7a5d6w2x9d6s3a28d8d});
url: Linking.makeUrl( ' ' , { pkey : gkey });
title: 'This post is amazing',
})
.then((result) =>{
console.log(result)
if(result === 'dismissedAction'){
return
}
})
.catch((error) => console.log(error))
In the root of my app I have also defined the event handlers: App.js
_handleRedirect=(event)=> {
let {path,queryParams} = Linking.parse(event);
Alert.alert(`queryparams : ${event} path : ${path} `)
this.props.navigation.navigate("Post_Detail",{key:queryParams.postkey})
}
}
componentDidMount() {
let scheme = 'nxet'
Linking.getInitialURL()
.then(url => {
console.log("App.js getInitialURL Triggered")
// this.handleOpenURL({ url });
})
.catch(error => console.error(error));
Linking.addEventListener('url', ({url}) => this._handleRedirect(url));;
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
When I share the link to Whatsapp, Facebook Messenger or even just messages or notes it appears as myapplink://, I try to enter this into the browser and instead of asking me to open my app - it does a google search.
Please note I am attempting to have this working on Android Device and facing this issue
Is there something I am doing incorrectly?
Any help is much appreciated. Thanks.
You can not open external links, means other than http, https on Android. But you can on iOS. In order to be able to open your expo links, you need proper anchor tags on android. You can create html mails and give it a try, you will see it is gonna work on Android as well.
I am implementing push notifications in my application using the react-native-firebase library, but I have a question. I need to mount custom notifications in my app, and assemble them from React without the server sending me Title / Body, I need these notifications with the app in the background and fully closed.
I made the following attempt, but to no avail.
In my index I registered my class
AppRegistry.registerHeadlessTask(
"RNFirebaseBackgroundMessage",
() => bgMessaging
);
In my JS class, I treat the following way
import firebase from "react-native-firebase";
import type { NotificationOpen } from "react-native-firebase";
export default async (notificationOpen: NotificationOpen) => {
if (notificationOpen) {
const notification = new firebase.notifications.Notification()
.setTitle("Android Notification Actions")
.setBody("Action Body")
.setNotificationId("notification-action")
.setSound("default")
.android.setChannelId("notification-action")
.android.setPriority(firebase.notifications.Android.Priority.Max);
// Build an action
const action = new firebase.notifications.Android.Action(
"snooze",
"ic_launcher",
"My Test Action"
);
// This is the important line
action.setShowUserInterface(false);
// Add the action to the notification
notification.android.addAction(action);
// Display the notification
firebase.notifications().displayNotification(notification);
}
return Promise.resolve();
};
But I was not successful. Push notifications sent from firebase with fixed title and body work normally.
Thanks and sorry for my english.
Hi Please try with below,
Change .setNotificationId("notification-action") to .setNotificationId(notificationOpen.notification.notificationId)
Change .android.setChannelId("notification-action") to .android.setChannelId(notificationOpen.notification.android.channelId)
Ok, I believe I am VERY close to having my first working Vue JS application but I keep hitting little snag after little snag. I hope this is the last little snag.
I am using vue-async-computed and axios to fetch a customer object from my API.
I am then passing that property to a child component and rendering to screen like: {{customer.fName}}.
As far as I can see, the ajax call is being made and the response coming back is expected, the problem is there is nothing on the page, the customer object doesnt seem to update after the ajax call maybe.
Here is the profile page .vue file I'm working on
http://pastebin.com/DJH9pAtU
The component has a computed property called "customer" and as I said, I can see in the network tab, that request is being made and there are no errors. The response is being sent to the child component here:
<app-customerInfo :customer="customer"></app-customerInfo>
within that component I am rendering the data to the page:
{{customer.fName}}
But, the page shows no results. Is there a way to verify the value of the property "customer" in inspector? is there something obvious I am missing?
I've been using Vue for about a year and a half, and I realize the struggle that is dealing with async data loading and that good stuff. Here's how I would set up your component:
<script>
export default {
components: {
// your components were fine
},
data: () => ({ customer: {} }),
async mounted() {
const { data } = await this.axios.get(`/api/customer/get/${this.$route.params.id}`);
this.customer = data;
}
}
</script>
so what I did was initialize customer in the data function for your component, then when the component gets mounted, send an axios call to the server. When that call returns, set this.customer to the data. And like I said in my comment above, definitely check out Vue's devtools, they make tracking down variables and events super easy!
I believed your error is with naming. The vue-async-computed plugin needs a new property of the Vue object.
computed: {
customer: async function() {
this.axios.get('/api/customer/get/' + this.$route.params.id).then(function(response){
return(response.data);
});
}
}
should be:
asyncComputed: {
async customer() {
const res = await this.axios.get(`/api/customer/get/${this.$route.params.id}`);
return res.data;
}
}
I'm using both Google Analytics and branch.io in this website.
The website is designed for mobile.
The problem is that when clicking the banner with text "OPEN", the app cannot be opened.
Here is the code for the click:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
ga('send', 'event', 'homepage', 'download', {
hitCallback() {
open();
}
});
};
If I get rid of the GA code, it works fine:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
open();
};
The reason I put open() in hitCallback is to make sure GA sends out the hit because open() will redirect to another page.
Can you help me?
Alex from Branch.io here:
The Branch deepviewCta() function works on iOS 9+ by triggering an automatic redirect to a Universal Link URL (which opens the app) and then going to a fallback URL if that fails. But Apple is very specific about the situations in which a Universal Link is allowed to launch the app (including things like how long of a pause is allowed before redirection). Of course these restrictions are not public, so all we can do is guess. My suspicion is that putting the deepviewCta() function inside a GA callback is falling outside of Apple’s rules, so the app never opens and you are instead being sent to the fallback URL.
I can think of two options here:
You can build some way to trigger the GA and Branch functions separately so that they don’t conflict with Apple’s requirements.
We actually have a brand new, one-click integration with Google Analytics, which you can read about here and here. If you set that up, you’ll get all Branch-related events automatically instead of needing to manually collect link click data.
Hopefully that helps!