I have implemented web push notifications using twilio. It works well on desktop and mobile phones.But, I am struggling to handle clicks on the notification on mobile. For desktop it works fine with the following code in the service worker
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(
clients.openWindow('https://example.com')
);
});
On mobile on clicking on the message nothing happens. I want to open a url in the browser when the user clicks on the message. Better if I can directly open the progressive web app.
Please suggest how to proceed.
The code in the question is correct. The problem was with the domain. The domain name should be same as the domain of the pwa. Since I was testing it on dev environment, the domain did not match.
Related
I successfully open a web app using an in-line button from my Telegram bot. When the "work" is complete in the web app, it persists the data to a DB via an API call and then closes itself (the web app) using Telegram.WebApp.close(). Upon the closing of the Web app my bot then needs to automatically refresh some information shown in the private chat from where the web app was launched.
Question: How can my bot know that the web app has been closed? Or how can I send a "notification" from the web app to the bot to let it know that it should refresh the data.
Supposedly I should be using answerWebAppQuery but search as I may, I cannot find any examples of how to use this. The closest example I could find is "In our case, we need to send data via answerWebAppQuery, without any servers, using the bot API: https://api.telegram.org/${yourBotToken}/answerWebAppQuery, options.
You will need query_id from initData to send data using this approach.". I tried it and it just gives a 404 error.
I would appreciate any help or pointers to where I can find the info I need.
I am looking for a solution to fetch geolocation periodically (every 1 minute) on mobile browser. I did some research and came to know that fetching geolocation in background (when phone is locked or webapp not active) is impossible. In foreground it works ok.
I am making a web app where I fetch user location and send it to my server. All works ok, until the point where user locks his/her phone. I tried many things for workarounds:
setInterval to get geolocation, works fine in foreground but fails in background
converted my web app into Android using cordova, but same problem existed
used https://github.com/mauron85/cordova-plugin-background-geolocation this plugin for android
works good in both foreground and background
but the same plugin does not work in iPhone (I did not tested it, I searched in Google before moving ahead)
Its not good to release my app with just one platform (android) support, thus this workaround also failed for me.
I also considered using serviceworkers for my web app but it seems issue persist for background
https://github.com/w3c/ServiceWorker/issues/745
I have another solution in mind, but before investing time in it, I wish to know if someone has tried it already.
I learnt about Push notifications:
Web app client registers to Push notification
It sends
subscriber object to my server
My server using this object sends
message to Push notification server
Push notification server
sends messages to my web app client
My web app client wakes up my
service worker for a brief period to show the notification message
As per google documentation:
Note: In the current implementation
of Chrome, whenever we receive a push message and we don't have our
site visible in the browser we must display a notification. That is,
we can't do it silently without the user knowing. If we don't
display a notification the browser automatically creates one to let
the user know that the app is doing work in the background.
I won't mind showing a permanent notification to users until my app is running. I am ready for this trade-off.
Now, my question is, at step 5, when I wake up the service worker **is there a chance I call my main.js (main web app) which might be running in background **, will fetch the geolocation and update it to my server?
Has someone tried this solution already with success or failure, please inform.
Can you try Page visibility Api, which listens for visibilitychange of a browser tab is hidden or switched to other tab (in case of browser). For mobiles, it's just a try.
src : https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
or You can look into this answer too..
Detecting when screen is locked
I'm trying to implement Firebase Cloud Messaging in a web-app (with Polymer and a service-worker and using the custom-sw of the SDK).
It is working great (on both desktop and android) but when the user click on the notification it is always opening the click_action in a new tab even if a tab of the same origin is opened (but not focused).
click_action = "https://example.firebaseapp.com/demo/command"
Url of inactive tab = "https://example.firebaseapp.com/demo"
It seems that the getWindowClient_ method of the FCM SDK is not parsing correctly the URL of active clients and so can't call focus() on the inactive tab.
Any idea how to resolve this ?
That is how it is designed. It caught me off guard at first, but after I thought about it, the new tab/window made sense.
1) the service worker is a separate process from the browser.
2) when a notification displays it is not associated with a browser tab/window.
3) changing the url in an existing window would most likely confuse/irritate the user.
When the user clicks your button the notification assumes no active tab on the origin. So it opens a new window.
I want to play audio like whatsapp web push notification or telegram web notification. I already able received push notification in service worker, the problem is how to play audio when push notification received ?
I already read the documentation of Notification API on here :https://developer.mozilla.org/en-US/docs/Web/API/notification/sound
Based the documentation, Notification have parameter Sound (Notification.sound) .
I already implement that parameter to my syntax :
self.registration.showNotification(title, {
body: body,
icon: icon,
tag:tag,
data: data,
sound: 'http://127.0.0.1/myfolder/audio/alert.mp3'
})
But still can't play the audio when receied push message in service worker, how to make play ?
Thanks.
As indicated on that MDN page:
Note: This property is not currently supported in any browser.
I don't know of any browser vendors who are planning on adding in support at this time; the way you'd normally determine that is to visit the feature status page for a given browser and see what's on the public list. Chrome and Firefox, which are the most relevant browsers when it comes to service worker notifications, official feature trackers are hosted at
https://www.chromestatus.com/features
https://wiki.mozilla.org/Features/Release_Tracking
One alternative would be to use a custom vibration pattern, which is support in Chrome for Android as of version 45.
In our solution we created a Google Chrome Extension which listens to the events from Service Worker and plays the audio. For the Service Worker -> background-script communication we use this "hack": How can Chrome extension background script communicate with web page service worker?
It is also possible to listen on push directly with the extension (using GCM).
I have a website. Currently I have been sending sms during some transactions as notification.
I want to use push notification instead of sms. But I don't have any mobile app.
How can I send push notifications without a app. Are there any way to do it?
Yes, Spontit enables you to send push notifications to all devices - desktop, iOS, Android, etc. You can do so for free and without your own app.
You can check out their API here.
As far as I know, there is no way to do this without developing an app for each platform (Android/iOS). You could also get away with something like a browser plugin. Essentially what your asking for is what your doing, an SMS or an Email. That is as close as you can get w/o an app. You can make a notification system on a website, but there is no way to push it to the user when they are not on your site w/o them downloading something like a plugin. :D
you can do this with https://pushed.co
they allow users to download their app and you push to the users with their app without needing to have your own mobile app