How to execute code before store configuration takes effect? - sencha-touch

Question

In our app we rely on the sessionStorage for persistence. However on mobile Safari the sessionStorage is not available when browsing in private mode.
However, for those customers using Safari in private mode it's ok to switch to an in-memory approach. Our app continues to be usable to some extend (you will lose data when you refresh the browser but since it's a single page application you never have to refresh anyway).
The fix was quite easy to do in development mode. However, after running a production build I faced a huge problem.
So, code is worth a thousand words. Here is what we currently use:
index.html
//...
<script type="text/javascript">
var isSessionStorageAvailable = true;
var storage = window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
isSessionStorageAvailable = false;
} else try {
storage.setItem('__ccTest', '__ccTest');
} catch (err) {
isSessionStorageAvailable = false;
}
</script>
<script id="microloader" type="text/javascript" src="../sencha/microloader/development.js"></script>
//...
myStore.js
Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],
config :{
model: 'App.model.QuoteItem',
autoLoad: true,
autoSync: true,
identifer: 'uuid',
proxy:{
type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
id:'ccCart'
}
},
//...
So, before sencha get's loaded we first check for the sessionStorage and set a global variable. So at the time when the store file loads the right configuration is picked up.
However, I really dislike this solutions as I had to alter the index.html file. In development mode you can just write this check anywhere in the app.js file because all the other files are loaded afterwards. But in production that's not the case. So I wonder how would you do that properly without altering the index.html file?
UPDATE
I also tried to use the applier like this:
applyProxy: function(proxy, oldProxy){
proxy.type = 'sessionstorage';
var storage = window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
proxy.type = 'memory';
} else try {
storage.setItem('__ccTest', '__ccTest');
} catch (err) {
proxy.type = 'memory';
}
this.callParent([proxy, oldProxy]);
}
However, the first time some code calls sync() on this store it raises an error inside the sencha framework:
It's inside the sync method of the store class on this line (it's from the minified source, sorry):
d.getProxy().batch({operations: b,listeners: d.getBatchListeners()})
It raises an error because getProxy() returns undefined. So it seems as if the applier didn't work :(.

Answer 1

Use the applier...
Ext.define('App.store.Quote', {
extend : 'Ext.data.Store',
requires : ['App.model.QuoteItem', 'Ext.data.proxy.SessionStorage'],
config : {
model : 'App.model.QuoteItem',
autoLoad : true,
autoSync : true,
identifer : 'uuid',
proxy : {
id : 'ccCart'
}
},
applyProxy : function (config, oldProxy) {
config.type = isSessionStorageAvailable ? 'sessionstorage' : 'memory';
return this.callParent([config, oldProxy]);
}
});

Answer 2

Just create your store like so :
Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],
config :{
model: 'App.model.QuoteItem',
autoLoad: true,
autoSync: true,
identifer: 'uuid'
}
And then, whenever you check if sessionStorage is available, then just do
myStore.setProxy({
type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
id:'ccCart'
});
Hope this helps

Answer 3

Are you sure the else..try brackets aren't causing issues (JSHint was complaining)?
var isSessionStorageAvailable = true;
var storage = window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
isSessionStorageAvailable = false;
} else {
try {
storage.setItem('__ccTest', '__ccTest');
} catch (err) {
isSessionStorageAvailable = false;
}
}