WebApplications, how to notify users when their device is sleeping - javascript

I've build a Javascript WebApp that is designed to work on tablets (using Web App Manifest file) and offline (aside from getting initial data from PHP backend). The app has custom notification system imitating Notifications API. Each notification is sent at given time (using setInterval). This leads to couple of problems:
there is no sound as the notifications are not effect of user interaction,
notifications can't be shown when the device is asleep.
First problem can be solved using Notifications API, but I'm not sure what could be done about the second. Keep in mind that the app should work offline - this eliminates the use of Push Notifications API.
Is using web application's container such as Cordova my only option?

Related

Track background location in webapp (service worker)

I'm wondering if it is possible to track location while a Webapp is backgrounded?
I've heard this functionality is in the pipeline for service workers, though I can't find any literature on exactly how to do it.
It would be fine to just save the location on the phone until the phone is unlocked and then send location data over a network when the user re-opens the browser/tab.
If it isn't possible with purely Web technologies, what would be the best way to do this. Could one build a native app to handle tracking capability and still have a Web interface as the main UI?
A bit of context
I'm developing an app for a charity that allows users to track themselves when out and about etc.. The users are likely to lock their phones when on patrol so I need to account for this. I've built the majority of the app as a Webapp and it would be an big (and boring) task to rewrite it as a native android and apple app!
No, it is not possible for privacy reasons. You also cannot do any sort of accurate scheduling via the Service Workers when the app is in the background, eg. use setTimeout or so (throttled by the browser).
You've probably read about the background sync API which allows you to ask the Service Worker to submit some data when a connection is available. With this API you can implement retry for form POSTs and stuff like that but not have the location tracked. Find out more here: https://davidwalsh.name/background-sync

Ionic 4 getting data from database without refreshing

I have a Ionic 4 Mobile App,PHP Web Application and I have a phpmysql database, when I inserted a data using my Web Application I want to be view on my Mobile App without refreshing, Im currently using HttpRequest.
I have heard of set Interval but I have heard it will be complicated in the long run.
What you are looking for is a web socket connection. A web socket is basically a steady connection that listen to event from one to the other. Ex, you add a new entry in your database, you then notify every socket connected so they can retrieve the new information.
There are many libraries available to do socket. I have not tried all of them but i tried socket.io and it works well. It is Javascript only though. For PHP, you can look into ratchet.

How to Receive Push Notification on website using Parse JS SDK?

I have configured push notifications on Parse-Server & in Android app. But I am not able receive push notifications in a website using Parse JS SDK. They don't provide any method to subscribe for push notifications in ther JS APIs. There Documentation (JS) only talks about subscribing to mobile devices not browsers.
SUBSCRIBING TO CHANNELS
The JavaScript SDK does not currently support subscribing iOS and Android devices for pushes. Take a look at the iOS, Android or REST Push guide using the platform toggle at the top.
So, I concluded that web browsers can't subscribe just by using Parse JS SDK? So, how should I subscribe & receive Push notifications on a web browser from Parse Backend?
Update:
I haven't test but If I use ServiceWorker to get subscription & subscribe user to some channel, can I use the default Parse Class Installation for saving subscription & then use that (web) Installation in Cloud Code to send Push?
Parse-Server only supports iOS and Android push notifications. It doesn't even handle web sessions conveniently. There are no Installations for web, because you don't install things for web. There are Sessions, but those don't do anything for Push.
I have tested it and got achieved desired results via following. As Jake said, for web there are no Installations in Parse. So, in order to receive push notifications on the web, you have to
Register a Service worker to get pushSubscription and hande push, click events etc.
Save pushSubscription to server. It will be used to send pushes to Web.
Integrate Push notifications on Parse-Server (FCM etc) or web-push if you want.
Send push via Client SDK or Cloud Code, it must be received.
Further, the Installation class cannot be used for web pushes.

Difference between Notifications API and Push API from Web perspective

What is the difference between Chrome Notifications API and the Push Notification API when developing Web notifications. When each one should be used and how are they different?
NOTIFICATION API
The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background. This article looks at the basics of using this API in your own apps.
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
PUSH API
The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
https://developer.mozilla.org/en/docs/Web/API/Push_API
Check these links for more info:
https://www.w3.org/TR/push-api/
https://www.w3.org/TR/notifications/
It can be confusing, but if I get this right, looking for a clear answer myself, it is like this:
Notifications API = used to send notifications when the user IS ON your site/app, even when idle or in the background.
Push API = used to send notifications when the user IS NOT ON your site/app at the moment.
Browser compatibility
https://caniuse.com/notifications
https://caniuse.com/push-api
NOTE: For Safari on macOS Apple has it's own push notification API:
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/Introduction/Introduction.html
Safari on iOS still doesn't support any of the two APIs (Feb 2021).

Offline Web Apps and database sync

I need to ask for some advice regarding offline web applications and database sync.
Offline Scenario
We have a web site (HTML5) that needs to operate in an offline mode for extended periods of time with complex data, the product owner does not want the data put into local storage.
We have two options as I see it;
Use javascript to detect if we are offlline and if so point the urls to a local web server that replicates the stack at the data center and writes to an offline db
◦Biggest stumbling block is how, on the first load if you are offline do you get the location (URL) of the local web server? i.e. user goes to www.xyz.com, but you are offline so
Question 1: how to redirect him to localhost.xyz.com via javascript for that first call
Point all calls at the client , offline or not to a wcf service that checks offline status at the NIC and redirects every web and service call to the correct place
◦seems like a big job,
Question 2: is there any product/ opensource project you guys know off that does this?
Sync Scenario
•They want to use MS sync framework
◦But they have many clients syncing to different database, so you either need 1 sync service per client or some way to identify who the client syncing is and point them to the correct place
◦Need to minimize locking during sync as other clients are using the same tables during sync
Question 3: can the sync framework be extended to even do this
Question 4: What other options exist for database sync on MS platform?
Thanks
If the user puts the URL into their browser, they are going to go that URL. There is no javascript at that point. You would only have Javascript once a page is loaded. You will have to search for a better solution.
Here is an idea: Users ALWAYS go to the local website, and if the remote site is up, then you redirect them.
In terms of MS sync I do not know what it is, so I cannot help you there.
Re What other options exist for database sync on MS platform: there is also SQL Azure Data Sync, a windows azure web service. It is actually built upon the Microsoft Sync Framework you refer to.
There is an example in the book "Programming Microsoft SQL Server 2012" by Leonard Lobel & Andrew Brust (MS Press) - chapter 13 covers building occasionally connected systems that incorporate SQL Azure Data Sync, Windows Azure and the Windows Phone 7 development platform. In the sample solution, on the back end, an on-premise SQL Server database is kept synchronized with a public facing SQL Azure database in the cloud using SQL Azure Data Sync. The cloud database is exposed using WCF Data Services (also hosted in the cloud by deploying to Windows Azure) and consumed via OData by a mobile client application running on a Windows Phone 7 device. The sample solution detailed in the chapter demonstrates how these technologies work to keep data in sync across on-premise SQL Server, SQL Azure databases in the cloud, and local storage on Windows Phone 7 devices.
Sync Framework do not lock tables when synching.
depending on what client database you want to use on the client, you can either use Sync Framework itself which works with MS databases (SQL CE, SQL Express,LocalDB,SQL Server, SQL Azure) or you can use the Sync Framework Toolkit
whichever platform you choose, i would suggest simply writing to the local store and synching it rather than dynamically choosing which store to use when.
for example, if you went offline and you wrote to the local store. then your network monitor detects you are back online and redirects you to the online service, what would you do with the data you stored locally? or you transacted online and you suddenly went offline, how recent/updated is the local store for you to actually starting working agaisnt it?
You could use Service-Workers to make the website work while users are offline. see: Making PWAs work offline with Service workers. This allows your website to work for the users if they are offline (they need to have internet at least once every 24 hours).
Service-Workers also allows you to detect when your user is offline or online, and you can for example use the IndexedDB to store your offline changes and then synchronize them when the user is online again.
I don't know about MS Sync.

Categories

Resources