Suggestion Say hello to the WTF!? Application for your phone!

ib4

Error
Staff
1,933
2,926
257
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:
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.
IMG_3067.jpg

2. Click the icon in the bottom row that appears that says, "Add to Home Screen".
IMG_3068.jpg

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.
IMG_3069.jpg

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:
  • 4Like
  • 1Helpful
  • 1Aww
Reactions: 5 users

ib4

Error
Staff
1,933
2,926
257
Thanks @BudVugger :) You can actually set that App Icon now, the website will view in browser mode though until he adds the little code segment.
 

HeliosHyperion

Lex Notionus
Premium
92
36
37
not that I do the phone-app thing, but jassssss dude!

"no problem, only solution" I'd buy you a whiskey for this. high-five
 
  • 1Like
Reactions: 1 user

MisterFister

There's a very good chance that I don't care.
3,462
5,096
257
I'll get right on it as soon as I figure out how to stop my VCR from blinking 12:00 a.m.
 
  • 4LOL
  • 1ORLY?
  • 1Agree
Reactions: 5 users

Out2Lunch

☠️
2,569
4,103
257
WTF app my ass! It's just a damn icon badge for a safari bookmark. This is called false advertisement you shit widget!
 
  • 1Sad
Reactions: 1 user

ib4

Error
Staff
1,933
2,926
257
WTF app my ass! It's just a damn icon badge for a safari bookmark. This is called false advertisement you shit widget!

Lol yes...the subject line is false but as I mentioned in the body, its only a work around. It really does feel like a standalone app if Jason adds that chunk to the head.
 
  • 1Helpful
  • 1Hug
Reactions: 1 users

Jason

Voorhees a jolly good fellow!
Founder
7,012
5,369
537
Well, if I consider it I'll need a few icons in the sizes contained in the above code..

Can anyone work something up with our mascot or wtf.com image (below nav) to work in those 4 sizes?
 
  • 1ORLY?
  • 1Agree
Reactions: 1 users

Nebulous

Tenderony
127
75
32
You want me to download yet another app for my phone? The several hundred on there right now aren't enough? I'll just access wtf.com via safari. :p