Integrating a mobile website into a mobile app

Question

I'm trying to redevelop a mobile website so we can integrate it into a mobile app that is being developed by another department, but still keep it functional on the web. The app has its own menu, so it's redundant to leave the menu on the mobile site.

We considered simply removing the menu, headers and footers from the site, and provide the links to the pages to the other department so they can add them to the app menu. This obviously leaves our website menu-less.

I've considered creating a new front page, that has a similar menu to the app, and loading the pages either in frames, or using jquery .load(), or ASP includes... Frames would give me the functionality I want that is most similar to the app opening pages in a browser using it's native menu, but frames are so... 1990's.

What is best solution that uses modern standards?

Answer 1

Dont use frames ;) What you could do is to provide the links to the other departement and in the end of the url set some kind of GET variable ex mysite.com?commingFromApp=true And then on the website you could make a method the prints the menu to the website, and if commingFromApp is not true then print out the menu, and if its true dont print it because the user is comming from the app and should not see the menu

Answer 2

URL variables and CSS

This is the solution I came up with using user1741807's suggestion to use a GET variable:

The portal app is going to be on OSX, Android and Windows, and simply links to our mobile website and displays it in a nested browser, so I used the URL to create a cookie and then used CSS to hide the menu.

Our mobile website is written in Classic ASP, PHP, and HTML, so I wrote a different script for each language. I had originally planned on writing one script in Javascript, but when I discovered how easy it was to do what I wanted in ASP and PHP I decided to scrap Javascript. It was later on that I realized I had some pages that weren't in ASP or PHP and ended up having to write the Javascript anyways.

The code below will hide the menu only when the homepage is visited from the link that contains the variable in the app menu, and will persist for as long as the session lasts, but will not hide the menu when visited from a browser without the variable.

The variable at the end of the URL string: ?display=portal

---

Classic ASP

Asp has function that can easily get variables from a URLS: request.querystring()

I put the code below on index.asp to set the cookie, then put Request.Cookies() code on the rest of our asp pages.

<%
fromPortalApp = request.querystring("display")
If fromPortalApp = "portal" Then
    Response.Cookies("display")="portal"
Else
    Response.Cookies("display")="web"
End If

portalCheck = Request.Cookies("display")
If portalCheck = "portal" Then
    MenuDisplay = "none"
Else
    MenuDisplay = "normal"
End If
%>

<style>
#topbar {
    display:<%=MenuDisplay%>;
}
</style>

---

PHP

On the PHP pages I didn't need to set the cookie, so I just needed to include a script to check for it:

<?php 
if (isset($_COOKIE["display"])){
    $sessionDisplay = $_COOKIE["display"];
    if ($sessionDisplay == "portal"){
        $portalcheck = "none";
    } elseif ($sessionDisplay == "web"){
        $portalcheck = "normal";
    } 
} else {
    $portalcheck = "normal";
}
?>
<style>
#topbar {
    display:<?php echo $portalcheck; ?>;
}
</style>

---

Pure Javascript

Javascript was the tricky one, we have some HTML pages on a different server at a different subdomain, so I had to use a written function to get the variables, another function to write the cookies, a third function to get the cookies, and then write a fourth function to modify the CSS and hide the #topbar div with the menu. The set and get cookies functions are right out of w3schools.

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
    }
    return "";
}

var portalcheck = getUrlVars()["display"];
var hostcheck = window.location.hostname;
if(portalcheck=="portal" && hostcheck=="darius.uleth.ca"){
    setCookie("display", "portal")
} else if (hostcheck=="darius.uleth.ca"){
    setCookie("display", "web")
}

window.onload = init;

function init(){
    var topbar = document.getElementById("topbar");
    var portalcookie = getCookie("display");

    if(portalcookie=="portal" && hostcheck=="darius.uleth.ca"){
        topbar.style.display= "none";
        document.getElementById("content").style.margin="0";
    } else if (portalcookie=="web"){
        topbar.style.display= "normal";
    }
}

Answer 3

If the mobile app is a PhoneGap app (or at least, something with an embedded webview), you can define a value in the JavaScript interface (ie, within the link between Java/ObjC to the web view) to test against. When the JavaScript on the HTML page is first executed, check if that value is assigned. If it is, its the mobile app. If its not, its the web page. Then adjust the menus accordingly.