I am trying to keep track of whether a web app has been installed to the user's home-screen using a value in localStorage.
I know there is DOM event that fires when a web app has been installed into a user's home-screen, but is there an event for when it has been uninstalled?
The type of event I have in mind would ideally be scheduled in a manner similar to (and behave in a manner similar to) onunload. (ie. an uncancellable event that allows me to schedule some last bit of work before the app is destroyed)
eg:
window.addEventListener('appinstalled', function(e) {
console.log('onappinstalled', e)
localStorage.setItem('APP_INSTALLED', '1')
})
// given the above, is anything like the following possible?
window.addEventListener('appuninstalled', function(e) {
console.log('onappuninstalled', e)
localStorage.setItem('APP_INSTALLED', '0')
})
I realised that once a user has uninstalled the app from their home-screen, the browser will begin prompting to install the app to the home-screen, again, provided you have met the criteria.
So by using the onbeforeinstallprompt event, there is an opportunity to clear the 'APP_INSTALLED' key from localStorage, and perform other arbitrary work.
eg:
window.addEventListener('beforeinstallprompt', function(e) {
localStorage.removeItem('APP_INSTALLED')
})
Moreover, this localStorage key may have already been cleared if the user elected to delete all data associated with the app when uninstalling the app from their home-screen.
Related
Good evening, in my dapp browser app, when the user requests a chain id change, i use to reload the page, but i found out that it is possible to change chain id without reloading the browser, basically emitting an event the user can pick up as
ethereum.on('chainChanged', (chainId) => {});
the question is how can i emit this event in my flutter dapp browser?.
how i execute javascript from webview
await _controller.evaluateJavascript(
source:'Wallet.executeCallback($id, "$error",null);');
I have been trying for several months to implement an app that receives notifications whose content I want to be stored in the database of my application. I am using the Firebase Messagging plugin and I am receiving the notifications correctly, both in Foreground and in Background.
However, in the background I am unable to execute my callback without the need to press the notification explicitly by the user. Likewise, there is no way to increase the badge of the application when it is not open.
Now, I do not understand how applications like WhatsApp, Telegram and any other application that is not made by mere mortals work. How is it possible that they can get the data in backgroud, manage the badges, synchronize messages, etc? Being that, supposedly the services like Firebase are limited in background. Even with plugins like Background Mode my application is suspended by Android when the user closes it.
The code that I am currently using to handle notifications is the following:
// In foreground (WORKS)
this.firebaseMessaging.onMessage().subscribe((notificacion) => {
// Insert in DB
...
});
// In background (DOESN'T WORK)
this.firebaseMessaging.onBackgroundMessage().subscribe((notificacion) => {
// Insert in DB
...
});
What alternative is left? The only thing that occurs to me is to use notifications in Foreground and background only as a warning. So every time I open the application I'll have to call a message synchronization callback with the server (with badge management included).
If someone has some better way, I would greatly appreciate it if you throw a little light on the subject.
From already thank you very much
Ok, after more than a year I think it's time to close this question. I solved the problem this way:
Suppose I need to get a list of messages. This action is made by a function called getMessages()
When a new message is created in the backend, I send a push notification through Firebase service.
If the push notification is received in foreground I refresh call the method directly:
this.firebaseMessaging.onMessage().subscribe((notificacion) => {
getMessages();
});
If the push notification is received in background and the user taps on it there isn't a problem as it's supported by the plugin:
this.firebaseMessaging.onBackgroundMessage().subscribe((notificacion) => {
getMessages();
});
If the push notification is received in background but the user DOES NOT tap on it and opens the app in another way than the notification, we need to excecute the corresponing function when the app is opened in app.component.ts file:
this.platform.ready().then(() => {
getMessages();
// Extra stuff like this.statusBar.styleDefault(); or this.splashScreen.hide();
});
That way all the cases are considered! You should keep in mind that apps like Whatsapp or Telegram are developed in official technologies like Java or Kotlin which not only have official native plugins, also its code are excecuted natively and not in a limited browser as Cordova or Capacitor frameworks do
I can of course force install my pwa on the device. However, existing sites on the market themselves offer the user to install the application. And about the possibility to install my application, the user will not know if he does not want to try (most likely he will not want to).
How to make the user such an offer, I unfortunately have not yet figured out. Articles could not be found (perhaps incorrectly set the search), the analysis of the code of service workers also did not help.
Help please.
On Chrome mobile, the default prompt is very visible. On desktop, less so.
But, Chrome actually has an event for this. If everything is in order for a PWA to be installed, the 'beforeinstallprompt' event is fired. You can simply add a listener to this event, and use that to display a message on your page to inform the user of the possibility to install the PWA.
The following example is written for Angular, but you can get the idea of the event.
ngOnInit() {
/**
* The beforeinstallprompt event is only triggered in certain browsers. This event simply indicates that everything is in order
* for the user to install the PWA. On mobile Chrome, a message is shown by default to the user, but we can also interfere and
* block it. This way, we can show our own message, and continue the event on our own terms.
* In this case, we store the event, and prevent it from continuing. We then show a regular <div> in the HTML, which contains the
* question to install the PWA, and a button to do so. That button then triggers the prompt, which the user can then accept or deny.
* The result of this prompt is mostly irrelevant to the functionality. Our code has no impact on the proceedings of the installation
* after the user has accepted the prompt.
* A possible usecase for the Promise resolved by the prompt, is for metrics. We can use the result to calculate how many users have
* accepted or denied our prompts.
*/
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredPrompt = e;
console.log('beforeinstallprompt!');
// if askedOnce is true, no need to ask again.
this.showPwaPrompt = !this.askedOnce;
});
}
acceptPwaPrompt() {
this.showPwaPrompt = false;
this.askedOnce = true;
this.deferredPrompt.prompt(); // Wait for the user to respond to the prompt
this.deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
this.deferredPrompt = null;
});
}
I would like to keep track of the amount of times that a user has logged into the application to either:
Remind them on their first visit to complete their profile
If profile is not complete, every X amount of visits remind user to complete
I'm not sure if the proper way to do this would be adding a key value to the users collection, or tie login to a new collection which counts up one each time a login occurs.
Is there a built in method to keep track of login successes?
Yup. You can even keep track of login failures.
From http://docs.meteor.com/#/full/accounts_onlogin:
Accounts.onLogin(function() {
// track successful login here. You can just use Meteor.user() to find out which user.
});
Accounts.onLoginFailure(function() {
// track failed login here.
});
There is even a "validate login attempt" method where you could potentially screen your users:
Accounts.validateLoginAttempt(func):
Accounts.validateLoginAttempt(function(loginInfo) {
// loginInfo.user returns a valid user object, if logged in successfully. Maybe tie this one to a collection, and do some checks etc.
// you can even use loginInfo.connection to see where the user has connected from (e.g. IP address.. perhaps)
return true; // return false if you want to 'bounce' this user.
});
Note: These can be done server-side only.
I have created a story reading chrome app.
My problem is that whenever the app is relaunched it starts from the first page of the story.
How can i save the last state of the app so that it reloads from the point where it was left?
You can save state of the app using the chrome.storage API.
Suppose you want to store the index of the page, and you have some function to go to a page:
function goToIndex(index){
chrome.storage.local.set({lastIndex: index}, function() {
/* actual work */
});
}
And when your app initializes, read the value (note, it's all asynchronous):
// Safe default if the storage is empty; should be the first page
var defaultIndex = 0;
chrome.storage.local.get({lastIndex : defaultIndex}, function(result) {
goToIndex(result.lastIndex);
});
Optionally, this will also sync progress across browsers for logged in users, which is a nice feature. You can do it by using chrome.storage.sync instead of chrome.storage.local, but beware of rather harsh rate limits. It is best to implement your own rate limiting if you use this.