Add website to home screen without address bar - freelancer.com-api

Today I was browsing "how to migrate jimdo CMS to WordPress" from the internet.
And I've got a website with some details.
Here is the URL of the website:https://m.freelancer.com/projects/Wordpress/Migrate-Jimdo-Website-WordPress/
When I click over that website's link, after the website is loaded, I saw a window like this: "Add this website to home screen ".
When I choose"yes", the browser automatically created an app for that website in my home page. My Device is android, so I clicked the home button of my phone and clicked over the apps icon. Then an app is just opened. The app doesn't looks like chrome because it doesn't have the address bar. I didn't installed any freelancer apk file.I tried to close and uninstall that app. From home screen, when I hold over the app icon, I saw" remove " text on top of my phone's screen. It means that the app I've hold is not an actual apk. It's a widget or something which is created by the chrome browser by command of that "https://m.freelancer.com/projects/Wordpress/Migrate-Jimdo-Website-WordPress/" website. I want to add that feature in my website, which is a sub domain:sslclive.jimdo.com
Is anyone anyone knows how to add that feature in my website?
That feature must be maid by some kind of HTML/JavaScript code.
If anyone knows, then please answer.
And sorry for my worst bad English

You need to add this meta tag to tells the browser to launch your page fullscreen
<meta name="mobile-web-app-capable" content="yes">
You can also add an icon using a manifest:
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/#launching_a_page_fullscreen_from_home_screen

Related

On click loads a different website but still within my website - like Facebook

On Facebook, via mobile, If you go to a profile page and click on a link to a person website it loads the website up in front of the Facebook website so when they press the X in the top left-hand corner it then deletes the webpage and the Facebook is still there.
On my desktop computer, I have used a different tap to load up but can't find out how I can do it this way for mobile and tablet?
I'm sure its quite simple but I have not got a clue what to look for sadly
Hope you can help, please.
Many Thanks
Tim
The picture you give appears to be the native mobile app for Facebook and not a webpage.
It just uses an embedded browser in the mobile app. How you do that depends on which platform you are developing for. For iOS it would be something along the lines of the UIWebView class.

sms: and mailto: failure on iPhone Safari Mobile Browser

Problem:
Web page with sms: and mailto: links fail on ios mobile safari browser. A click on the link redirects you to:
Safari cannot open the page because it cannot redirect to locations
starting with "sms:"
or
Safari cannot open the page because it cannot redirect to locations
starting with "mailto:"
These used to work just fine up until around two or three months ago. Now these fail on Apple mobile devices using the Safari browser.
Background:
I create responsive web pages for activity based teams. One of the things we do is provide a team roster. The roster includes links for telephone numbers, SMS text pages and Email.
To keep things simple, we are using simple web pages.
Because of security and privacy concerns, this content is only served via ajax call via node.js server after login. We're using a single node.js Express server to host the website content and manage http/api calls.
Generally a click on the link pushes the mobile device into the appropriate native app for a phone call, SMS text message or email.
This has been working great for a couple of years, on all devices.
Lately we're seeing the problem on iPhones... but...
Here's the really weird part. I've got three teams using this technique.. The failure is only on TWO of the three teams. SMS link works just fine there.
The "tel:" link works fine on all devices.
The failures only occur on two of the three sites for sms: and mailto: on the iphone. Things still work just fine on Android devices, on Windows and on MacOS. The problem is Apple mobile devices.
The two sites that have the failures are Progressive Web Apps, with a manifest.json file and service_worker.js. The site that works fine has neither of those. When I remove the manifest, and turn off the service worker there is no improvement.
All three sites hosted via App engine at Google Cloud. The two sites that fail are only using web_app.appspot.com addressing. The site that functions well is using a real URL, pointing to the app engine location.
Typical Code:
<li>
<div class="userName">Jane Doe</div>
<div class="phoneNumber">321-555-1234</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
I wonder if this will show the issue, if you open this up in the browser of your Apple mobile device:
Click here to create a SMS message.
<br>
Click here to create an email message.
Apparently that's a fail. You don't even get to see the run snippet button on my mobile device.
Testing, more testing...
I just figured out... if I save the site to my mobile device homepage, such that an icon is added to home screen and in display mode, you can NOT see the top URL address bar, nor the Safari options bar on the bottom then the SMS: will fail. If you just open the address in Safari, but don't save the file, then it will work great.
Again, when I'm in Apple Web Application mode, the SMS link fails.
One hack... open the site via Safari mobile browser on the iphone. Save the site to Home Page. Verify the Icon is on the mobile phone. Go to Settings --> Safari --> Advanced --> Website Data, then Delete the site by sliding the content left. Cache storage is clean, but the Icon remains on the mobile screen. Use the Icon to aid in login, but don't save the site again. Note the URL line is visible. SMS will work.
Still testing here...
I tried to build a simple example to show the issue. I was totally unable to get the sample to fail with the error messages above. For reference the test site is here. The test source code is here.
I'm suspecting that the issue revolves around the fact that the two sites in question are both located at a subdomain site. (mywebapp.appspot.com) When the manifest includes all "valid" content the site does appear as a ios Apple Web app without visible URL line... but whenever I'm in that mode, SMS links are a total fail.
With that said, you can control the storage mode via <meta name="apple-mobile-web-app-capable" content="yes"> .
During my testing, I also noticed that whenever the manifest.json file contains // comment marks anywhere the file is ignored by Safari. Normally // comments are not allowed in a .json file, but according the MSN source, they are fine in a manifest.json file.
The choice is
a bit ugly and functional, or
pretty and non-functional
Currently I'm running <meta name="apple-mobile-web-app-capable" content="no">... I get the advantage of a custom icon on the home screen, even though the web app is still obviously inside a mobile browser with top/bottom info lines visible, sigh.

how to add 'add to desktop' button on web app like in chrome menu

If user visit on my progressive web app and he don't know about chrome's add to desktop button on chrome menu so how can i tell him to install, is there any solution? like display button on web app, because if user visits "twice, over two separate days during the course of two weeks" then app install banner appears, so is it possible that when user visit first time then app install banner appears?
Now this feature is not enable by default yet. You should force this banner in DevTools or enable in flag://. Normally banner will show at fist visit if enabled

How load a website offline as a iOS app

This emulator has a nice feature, when you click in the "share in home screen" option, it works as a app, offline and out of a browser.
https://gameplaycolor.com/app/
I intend make something like it, but I have no idea how can I do. Which technique it website use?
Thanks in advance!
Placing websites on the homescreen is native iOS. As a website, you can extend this, by enabling your website as a 'web app', like you described. For this, you use a number of meta tags in your code. Please see this support document by Apple on how to configure your website so users can save it to their homescreen as a web app.
Moreover, you can specify a startup screen, the color of the statusbar, and some other things.

IOS 8 Corporate app download HTML page does not close

I´ve made an HTML page for downloading a corporate iPhone application (via plist distribution).
<div>
<img style="margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%" src="download.png"/>
</div>
Now on IOS7 when clicking the link the focus of page vanishes and the home screen is shown where you can follow the downloading progress.
On IOS8 when clicking the link the html page does not lose focus. The home screen is not shown and the user cannot follow the download progress.
Any ideas?
Thanks.
It's annoying, but, starting in iOS 8, opening an itms-services link will not send Safari to the background.
You'll have to add some text to your webpage that says something like "When you do tap the Download Button, please tap your Home button to view the progress of the App Installation." You might even want to get some Javascript going to react to the tap on the download button to bring some attention to that message.
This is a good thread that covers both the cases of itms-services links from within apps and from within Safari:
ios 8 openUrl itms-services does not exit current app