If you don't want to read the bs I wrote at first skip down to the CODE section for the main point of this post.
Every time I visit WTF!? I get a dose of nostalgia from an internet that once was. The internet was in its newest age of websites designed and sliced in Photoshop or created in Adobe Flash. We played mPC games to on your 128 MB Radeons that were so elite then. We visited shock content websites like Rotten and whatever else you may know...I have forgotten. We recycle Goat.cx and Tubgirl to piss of your friends in email or on your favorite forum. FORUMS-This was a big time for the forum age. If you were an internet junky you were most definately aprat of 2 or 3 forum communities. We played around on Photoshop, Fruityloops, Adobe Flash, Windows Pinball, Silk Road, Halo PC, WOW, Red Alert, Roller Coaster Tycoon etc. while chatting on Ventrillo or Teamspeak and chatting it up on mIRC. All of this would take place at your favorite desk in your room, or some area in the house, or apartment where you just geeked for hours and that was home, safety, and fun to you.
Or maybe you didn't do any of this. Anyway, I visit this site and those are the kinds of things I alwasy think of. If I had the daily job of creating new ideas to generate new traffic to the site I would gladly. I like thinking of ways to get this community back to high traffic.
So down to business. I recently created a web app / mobile app for a client. I basically built a Fitness Facebook for their gym. I wanted to be in full control an ownership of all the components and services associated with the app. You can't do this with native mobile apps when they are large scale. At some point youre going to be paying for some service somewhere to keep it alive. XAMP+WebApp+MobileWorkArounds=BasicallyAnApp
I searched for a workaround that would suffice and I found one. Below is a segment of code that will make the WTF!? website appear full screen and remain in full screen mode and feel like a native standalone app. I have done this with the app I am building for my client and it's beautiful. Below that. I in order to launch it in I'll screen mode you will need an icon on your phone home screen. I will post instructions with pictures on how to set a button on the home screen that launches it. These two things combined make it look like you have an app installed that you are launching.
NOTE*** you may think this doesn't sound worth doing because I'm saying full screen. But when you actually make it happen and see it working in person, it makes a huge difference. I really does look good and is totally handy.
Code:
Add Webpage to IPhone home screen to make it appear like an app. (the url in these pics do not work anymore so don't try em
)
1. Open website in Safari. At the bottom of the browser in the center you will see a square with an up arrow. Click this button.
2. Click the icon in the bottom row that appears that says, "Add to Home Screen".
3. (The image that appears here is what the icon for the "app" will look like. This is why that segment of code that has the "icons" is important.
That's it! You will now have an app like icon that opens WTF!? in full screen mode and keep it that way as if it is its own app!
If Jason likes this idea, and adds that segment of code to the <head></head> segment of the XenForo code, everything mentioned in this post will be possible. I will add the Android workaround to this post if its gets the green light.
Every time I visit WTF!? I get a dose of nostalgia from an internet that once was. The internet was in its newest age of websites designed and sliced in Photoshop or created in Adobe Flash. We played mPC games to on your 128 MB Radeons that were so elite then. We visited shock content websites like Rotten and whatever else you may know...I have forgotten. We recycle Goat.cx and Tubgirl to piss of your friends in email or on your favorite forum. FORUMS-This was a big time for the forum age. If you were an internet junky you were most definately aprat of 2 or 3 forum communities. We played around on Photoshop, Fruityloops, Adobe Flash, Windows Pinball, Silk Road, Halo PC, WOW, Red Alert, Roller Coaster Tycoon etc. while chatting on Ventrillo or Teamspeak and chatting it up on mIRC. All of this would take place at your favorite desk in your room, or some area in the house, or apartment where you just geeked for hours and that was home, safety, and fun to you.
Or maybe you didn't do any of this. Anyway, I visit this site and those are the kinds of things I alwasy think of. If I had the daily job of creating new ideas to generate new traffic to the site I would gladly. I like thinking of ways to get this community back to high traffic.
So down to business. I recently created a web app / mobile app for a client. I basically built a Fitness Facebook for their gym. I wanted to be in full control an ownership of all the components and services associated with the app. You can't do this with native mobile apps when they are large scale. At some point youre going to be paying for some service somewhere to keep it alive. XAMP+WebApp+MobileWorkArounds=BasicallyAnApp
I searched for a workaround that would suffice and I found one. Below is a segment of code that will make the WTF!? website appear full screen and remain in full screen mode and feel like a native standalone app. I have done this with the app I am building for my client and it's beautiful. Below that. I in order to launch it in I'll screen mode you will need an icon on your phone home screen. I will post instructions with pictures on how to set a button on the home screen that launches it. These two things combined make it look like you have an app installed that you are launching.
NOTE*** you may think this doesn't sound worth doing because I'm saying full screen. But when you actually make it happen and see it working in person, it makes a huge difference. I really does look good and is totally handy.
Code:
HTML:
<!--Mobile Enhancements: THE FOLLOWING SHOULD BE PLACE IN THE (head)(/head) space-->
<!--Actives the full screen standalone view-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--These various icon sizes will set the "app icon" on your home screen. Without these, it will show a Xenforo icon-->
<link rel="apple-touch-icon" href="assets/images/touch-icon-iphone.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/touch-icon-ipad-retina.png">
<!--Without those snippet below, the site will exit full screen mode every time you click a link. The browser components will reappear-->
<script>
// Mobile Safari in standalone mode
if(("standalone" in window.navigator) && window.navigator.standalone){
// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
var noddy, remotes = false;
document.addEventListener('click', function(event) {
noddy = event.target;
// Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
{
event.preventDefault();
document.location.href = noddy.href;
}
},false);
}
</script>
<!--/Mobile Enhancements-->Add Webpage to IPhone home screen to make it appear like an app. (the url in these pics do not work anymore so don't try em
)1. Open website in Safari. At the bottom of the browser in the center you will see a square with an up arrow. Click this button.
2. Click the icon in the bottom row that appears that says, "Add to Home Screen".
3. (The image that appears here is what the icon for the "app" will look like. This is why that segment of code that has the "icons" is important.
That's it! You will now have an app like icon that opens WTF!? in full screen mode and keep it that way as if it is its own app!
If Jason likes this idea, and adds that segment of code to the <head></head> segment of the XenForo code, everything mentioned in this post will be possible. I will add the Android workaround to this post if its gets the green light.
Last edited:
- 4
- 1
- 1
