Overview
If you are loading your mobile application from the home screen you probably noticed that as soon as you minimize the application Safari Mobile will not keep track of the last visited page. That means that regardless of the page that you were looking at, the next time you switch back to your application, the browser will reload your application and start over again from the initial page.
The issue is that even if you minimize the application for just a second, the user will have to navigate –again, to the point where he or she left the experience.
Set/Get Cookies
A possible solution to this problem is to store the ID or URL of the last visited page inside a browser cookie and check for that value every time that application is initialized. In addition to the last visited page ID/URL you also need to decide for how long you will be tracking this information. If your users spend, for example, 5 min average time visiting your application, you may not want to restore the last visited page if the user comes back a week after his or her last visit. Cookies are particularly handy because you can assign an expiration date that will specify for how long the information will be kept.
Code for saving, editing, and deleting cookies
var app = {};
app.cookie = {
/* set cookies */
setCookie: function(name, value, exp, inMinutes) {
var exp = exp == null? 7 : exp;
var exdate = new Date();
if(inMinutes != null && inMinutes == true){
exdate.setMinutes(exdate.getMinutes() + exp);
} else {
exdate.setDate(exdate.getDate() + exp);
}
var cookieValue = escape(value) + ((exp == null) ? "" : "; expires="+exdate.toUTCString());
document.cookie = name + "=" + cookieValue;
},
/* retrieve the value of a cookie */
getCookie: function(name) {
var i,x,y,ARRcookies = document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++){
x = ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x = x.replace(/^\s+|\s+$/g,"");
if (x==name){
var value = unescape(y);
return value;
}
}
return null;
},
/* delete cookies (set expiration time in the past) */
deleleCookie: function() {
this.setCookie(name, '', -365);
}
};
Keep in mind that cookies cannot be retrieved until you refresh the page which is fine for the use case that we are trying to address.
Saving the last visited page
Every time that a page is loaded it fires several events. For the purpose of this example will will focus on the pageshow event. This event fires when the pages is shown which is a good time for us to save our cookie.
Every time that a page is shown this code will set or update a cookie name lastPage, and it will set the value to the ID of the page (make sure that all your pages have the ID attribute defined).
Restoring the last visited page from the browser cookie
As I mentioned earlier, when you application is minimized Safari Mobile restart and point to the page from where the homescreen shortcut was created, that is the only page where you need to check the value of the cookie. In other words, every time that Safari Mobile restart your application, you will have to check if the cookie exists, if so, you will have to redirect your application to the last visited page if it is different from the main page.
If the pages that comprise your application are all located in a single file, you can simply use the page ID to redirect to the last visited page. For this example we will need to be able to look up the page URL using the page ID. If the ID stored in the cookie is different than the current page ID, then we will need to redirect the application to the URL associated to the stored ID. Here is how:
Putting everything together
Javascript code: appcropolis.js
var app = {};
app.cookie = {
/* set cookies */
setCookie: function(name, value, exp, inMinutes) {
var exp = exp == null? 7 : exp;
var exdate = new Date();
if(inMinutes != null && inMinutes == true){
exdate.setMinutes(exdate.getMinutes() + exp);
} else {
exdate.setDate(exdate.getDate() + exp);
}
var cookieValue = escape(value) + ((exp == null) ? "" : "; expires="+exdate.toUTCString());
document.cookie = name + "=" + cookieValue;
},
/* retrieve the value of a cookie */
getCookie: function(name) {
var i,x,y,ARRcookies = document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++){
x = ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x = x.replace(/^\s+|\s+$/g,"");
if (x==name){
var value = unescape(y);
return value;
}
}
return null;
},
/* delete cookies (set expiration time in the past) */
deleleCookie: function() {
this.setCookie(name, '', -365);
}
};
$(document).bind('pageshow', function(){
// triggered when the page is shown
var pageId = $.mobile.activePage.attr('id');
// make the cookie expire in 60 min
app.cookie.setCookie('lastPage', pageId, 60, true);
});
/* Relate the page ID to the actual page URL */
var pageDictionary = {
first: 'page1.html',
second: 'page2.html'
};
/* method to handle the redirection */
function redirectToLastPage(){
var mainPageId = 'first';
var currentPageId = $.mobile.activePage.attr('id');
var lastPageId = app.cookie.getCookie('lastPage');
// these 3 conditions must be valid:
// 1. the cookie must exists (lastPageId != null)
// 2. the last pages cannot be equal to the current page (currentPageId && currentPageId)
// 3. this code must run only in the main application page (currentPageId == mainPage)
if(lastPageId != null && lastPageId != currentPageId && currentPageId == mainPageId){
var pageURL = pageDictionary[lastPageId];
//alert(lastPageId +"\n" + currentPageId +"\n" + mainPageId +"\n" + pageURL +"\n");
$.mobile.changePage(pageURL);
}
// unbind the function itself to make sure the code executes once regardless of the page that has been loaded
$(document).unbind('pagebeforeshow', redirectToLastPage);
}
/* Before the page is show, check the cookie and the list of URLs */
$(document).bind('pagebeforeshow', redirectToLastPage);
page1.html
page2.html