As related to this documentation :
https://capacitorjs.com/docs/apis/local-notifications
It seems possible to use Capacitor local notification plugin for the web as pwa also.
I try to push "test" a local notification every 10 seconds but nothing happen even with service worker enabled
import { Plugins } from '#capacitor/core';
const { LocalNotifications } = Plugins;
const notifs = await LocalNotifications.schedule({
notifications: [
{
title: "Title",
body: "Body",
id: 1,
schedule: {
repeats: true,
every: "second",
count: 10
},
sound: null,
attachments: null,
actionTypeId: "",
extra: null
}
]
});
console.log('scheduled notifications', notifs);
In the source code of the LocalNotification plugin for web it seems as though the notification is only scheduled if the schedule option has the "at" property.
Even then I can't get it to work on chrome for android.
Notification scheduling for PWAs is currently in trial using the TimestampTrigger so I think the lack of browser support is the issue. Possibly getting out of trial during 2021. Just have to wait and see I guess.
Related
I used pusher to add real-time updates to my web app. Like if a user hits the like button on a post, the number of likes increases instantaneously in the UI.
That works fine when I run the app locally (illustrative GIF).
But when I deployed the app to Vercel, Pusher doesn't update the UI, unless I navigate to another tab and then return back to my app tab (GIF).
Vercel logs show that everything works as expected. The React component subscribes properly to Pusher channel and gets the new data. However, the UI never updates while I'm viewing the tab.
// Setting up pusher
import Pusher from "pusher";
const pusher = new Pusher({
appId: PUSHER_APP_ID,
key: PUSHER_KEY,
secret: PUSHER_SECRET,
cluster: us2,
useTLS: false,
});
export default pusher;
// Subscribing the component to Pusher channel
useEffect(
function subscribeToPusher() {
const pusher = new Pusher(PUSHER_KEY, {
cluster: us2,
forceTLS: true,
});
const channel = pusher.subscribe("reviews");
channel.bind("updated", updateReview);
},
[]
);
// Listen to MongoDB's ChangeStream
changeStream.on("change", async (change) => {
console.log("change: ", change);
switch (change.operationType) {
case "update": {
const document = change.fullDocument;
pusher.trigger(collectionName, "updated", document);
break;
}
}
});
Note: the deployed version works as expected when I run npm run dev locally which is a bit strange.
It was Vercel. It worked once I tried Heroku.
On Android, I'm utilizing the LocalNotifications API in an Ionic project with Capacitor JS (https://capacitorjs.com/docs/apis/local-notifications). So the user can respond directly to a notification, I've added some action types to the payload like this:
LocalNotifications.registerActionTypes({
types: [
{
id: "workout-1",
actions: [
{
id: ":+1:",
title: "👍",
destructive: true,
},
{
id: ":muscle:",
title: "💪",
destructive: true,
},
{
id: "free_text",
title: "Respond",
input: true,
},
],
},
This enables the message to render like this:
However, even when tapping one of emojis, it opens the app. All I'd like it to do is trigger action performed on the emoji that was tapped. It works this way on iOS. Any ideas?
You have to set up an event listener in your application setup phase:
LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
const tappedActionId = notification.actionId;
// TODO: do action depending on actionId
}
When user taps on notification or any action, app will open and this function will run. When user taps on notification (not action) actionId = 'tap'.
This has obviously been asked multiple times but I can't seem to get any of the proposed solutions working.
Push notifs work when tethered to xcode. Untethered, I get the push notification itself but none of the delegate methods are called which results in not being able to increment badge count.
I also can't get silent notifications working on untethered as well. I use silent notifications to clear a notification with a given condition.
I've tried allowing background mode in plist, changing priorities, having an empty body. I've made sure that the device background refresh is on and that notifs are fully on. I've tried a ton more things that I can't remember off the top of my head. Nothing seems to work. I added a badge increment in every one of the push notif delegate methods and it seems none of them get called.
Here is the .js code snippet for regular notif
message1 = {
notification: {
title: "stackOverFlowTitle",
body: "stackOverFlowBody"
},
apns: {
payload: {
aps : {
"content-available": 1,
"sound": "default",
"priority" : 10
},
data: {
// collection: 'TestCollection',
// document: change.after.ref.id,
timePushed: timePushed,
alertOn: alertOn,
readNotification: readNotification,
eventKey: eventKey
}
},
headers: {
"apns-expiration": "4"
}
},
topic: topic
};
Here is the .js code snippet for silent notif
var message2 = {
notification: {
body: ""
},
apns: {
payload: {
aps: {
"content-available": 1,
"priority" : 10
},
data: {
alertOn: alertOn,
eventKey: eventKey
}
},
headers: {
"apns-expiration": "4"
}
},
topic: topic
};
Anyone have any potential solutions I haven't mentioned?
I changed silent notif priority to 5 and that helped (for this post) :D
According to the docs, when non-zero the apns-expiration represents a unix timestamp. By setting it to 4, you're telling APNs to expire the notification at 1970-01-01 00:00:04.
Local notifications don't work properly (tried it with ionic 3 & 4).
The user can set a time in the app and turn the notifications on or off.
When using the following code, I always get a notification at 01:00 am although I've set it to 17:30 or something else.
I tried many variations, this is the last one:
const time = setsub.task_reminder_time.split(':');
const now = new Date();
console.log('now is', now);
const pushDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), +time[0], +time[1], 0);
const options = {
id: 1,
title: 'Time to plan your day!',
text: `Hey you! It's time to get productive by planning your day!\nTap here to open DoDay! 🤓`,
trigger: { firstAt: pushDate, every: ELocalNotificationTriggerUnit.DAY }
};
if (setsub.task_reminder) {
this.notification.requestPermission();
this.notification.schedule(options);
} else {
this.notification.clearAll();
}
time is just a string containing the notification time in HH:mm
I'm using an iOS device for testing.
So I found the solution to this one by myself. It's an error in the typings file of LocalNotifications package.
The correct usage for the options look like this:
{
id: 1,
title: 'Notification Title',
text: 'Your notification text',
foreground: true,
trigger: {
every: {
hour: 8,
minute: 15
}
}
}
Just go into your node_modules/#ionic-native/local-notifications find the index.d.ts and find the line which says every?: ELocalNotificationTriggerUnit and change it to every?: any; now it should work perfectly.
Does someone have experience with ionic 1 push notifications? Is there any alternative to cloud solution that they suggest? And can someone show example of implementatio? And please have on mind that I'm completly new in ionic
I use this plugin https://github.com/phonegap/phonegap-plugin-push to handle push notification.
var pushOptions = {
android: {
senderID: "1234567890",
icon: "push_icon",
iconColor: "#FFF"
},
ios: {
alert: true,
badge: true,
sound: true
}
};
var push = PushNotification.init(pushOptions);
push.on('registration', function () {});
push.on('notification', function () {});
After test several push servicies (ionic push service, parse, pushwoosh and one signal) we choose one signal as push notification provider. Right now we use it in 30+ production applications in our company. In 10 minutes or less you can set up an app for first push notification use in android or iOS (platforms we are working right now)
The platform has an easy set up guide.
The only code in app for basic setup is:
$ionicPlatform.ready(function() {
// Enable to debug issues.
// window.plugins.OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});
var notificationOpenedCallback = function(jsonData) {
console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
};
window.plugins.OneSignal
.startInit("YOUR_APPID")
.handleNotificationOpened(notificationOpenedCallback)
.endInit();
// Call syncHashedEmail anywhere in your app if you have the user's email.
// This improves the effectiveness of OneSignal's "best-time" notification scheduling feature.
// window.plugins.OneSignal.syncHashedEmail(userEmail);
})
Just modify "YOUR_APPID" by yours and thats all.
Follow de docs above for make it works in your desired platform.
Check out OneSignal. It's free, easy to use and multi-platform Push Notification framework.