How can i save state of a chrome app? - google-chrome-app

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.

Related

PWA home screen "uninstall" DOM event

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.

Background notifications using Ionic like a mortal

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

sapui5: Load initially NDA page and load Shell later

i've a requirement as below after use logs-in:
- user will first see a nda agreement page, where he has to sign on it and submit
- then after sumit, it has to load shell and then he cont with other screens in shell
the key here is, if any time the user refreshes the screen.. it should always takes him to shell and not the the nda screen. as we've to remember the user's decision and load only shell.
-wt is the best way to handle this?
-i hope (prefer) to do this in the same ui5 project only.. rather than 2 different projs.
-how do we remember the user's decision? its a kind of session handling within ui5!
-do we've to use content.plastAt() from nda page to shell? how to achieve this..!
You can do the following in a few ways, lets tackle the NDA remember feature.
You can use javascript's session storage api for example, this will make sure that a refresh will keep the value but a completely new session will show the NDA again.
Now if you want Ui5 based solution for the NDA you can set the first screen as the NDA and in the submit button to navigate to the next page and detach the NDA page from the shell.
Another way to achieve this is by using a modal popup with the NDA and on click just remove the popup
and save the data in the session storage.
Hope this gave you a clear idea.
BR,
Saar
you need to use Session Storage to meet your requirement
In the NDA sign on page check sessionStorage data and in the controller of NDA write this code
onInit: function() {
var oView = this.getView();
oView.addEventDelegate({
onBeforeShow : jQuery.proxy(function(evt) {
this.onBeforeShow();
}, this)
});
},
onBeforeShow: function(){
if(SessionStorage['UserName'])
{
sap.ui.getCore().getEventBus().publish("nav", "to", {
id : "idShell",//id to navigate to shell Page
data : {}
});
}
else
{
// DO SOMTHING
}
}

FF Addon SDK page mod script to content script communication not working

For starters, I've been trying to allow communication from a page script to a content script. If the docs are accurate, this should be easy. Here's what I'm doing, I believe fully in accordance with https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/guides/content-scripts/communicating-with-other-scripts.html#Using%20the%20DOM%20postMessage%20API :
And here's my live test case:
main.js:
exports.main = function() {
var data = require('sdk/self').data,
pageMod = require('sdk/page-mod');
pageMod.PageMod({
include: '*',
contentScriptFile: data.url('postMessageRelay.js'),
});
};
postMessageRelay.js
// Trying with window.addEventListener also doesn't work
document.defaultView.addEventListener('message', function (e) { // e.data, e.origin
console.log('would be good if it got here:'+e.data);
});
console.log('it gets here at least');
And the JavaScript within a regular HTML file (on a normal remote server, not file or localhost):
try {
window.postMessage('webappfind', window.location.href);
}
catch(e) {
alert(e);
}
This really looks like either a full-blown bug for this functionality or a problem with the docs... I had similar problems trying to communicate via custom events so going a little bananas...
Answered in Bug 910972, but leaving it here to for future visitors of SO:
The issue was with the page immediately firing postMessage in the head tag, so the page-mod script isn't even yet attached to the page to listen to the message event. The communication back and forth between page and content scripts as in this example works as long as this timing is taken into consideration

Set up facebook UrchinTracker for aJax calls for Google Analytics

I have set up the Google Analytics in my FBML facebook application. It works for tracking the php pages. (I can see the report in GA).
However, I also want to track the aJax calls, because most of the pages of my application is ajax driven, rather than loading differnet php pages.
so, that's what I put in the code (before ajax call)
Facebook.urchinTracker('/importantpage/');
THere is no error return when running the application.
However, when I look at the Google Analytics, I can't find any report showing this is being tracked. I look at the Event tracking.. nothing. I look at the overview, it only shows the php pages statistic.
So, where should I look in Google Analytics? and do I need to set up anything in GA for tracking the ajax call for 'importantpage' ?
try calling urchin within you AJAX function. Like :
function callPage(div,params, page)
{
Facebook.urchinTracker(page);
var ajax_content = new Ajax();
ajax_content.responseType = Ajax.FBML;
ajax_content.ondone = function(data)
{
document.getElementById(div).setInnerFBML(data);
}
var params={"Params":params,"target":div};
ajax_content.post(page,params);
}