I'm new to web applications for Android..
How can you add a bookmark on the home screen from a web page using Javascript from the click of a button?
If we make an easy way for users to bookmark pages, they will show some interest in bookmarking them. This is one of the requirement for my projects.
How can this be done?
Some of the people answering here seem to not understand that you want something for mobile, not IE, Firefox, etc. They also don't seem to read very well where you said "website", not "mobile app". However, I believe I have read your question properly.
There's extremely high odds that you'll probably also want this for iPhone, so I'll answer this for iPhone and Android as well.
For iPhone, it's as simple as using this script:
http://code.google.com/p/mobile-bookmark-bubble/
For Android, it's not so pretty, unfortunately. You'll have to make a button or hyperlink that redirects to an instructions page on your site. The instructions will tell web visitors to do "Settings > More > Add Shortcut to Home" and hope they "get it".
One option for Android is that you can fork mobile-bookmark-bubble, make it load at the bottom of the page without the bottom triangle, and make it read, "Click the Settings button > More > Add Shortcut to Home". As well, you might want to put the 2 bars icon of what the Settings button looks like right next to "Settings button".
As for how to customize the icon that gets created, I'm still researching that and will update this answer when I find out.
Here is a possible workaround, and while it isn't exactly what you want, I think it is the easiest solution as I'm highly skeptical that android allows web pages to automatically issue intents to a device, as this would be a potential security problem. Someone please correct me if I'm wrong
I recommend that you create an app that is simply a wrapper around a bookmark. When the user clicks on your app, your app creates an intent that simply opens the device's default web browser to your page. While this will require the users install a app it has a few advantages over a plain bookmark. You will be able to track how many people have your app/bookmark installed, how often they use it etc. You can also provide a nice looking icon instead of using the stock "bookmark" icon.
Upload the app to the market as a free app and place a "bookmark this" link on your webpage that simply directs the user to download your free app.
You can create a web page shortcut on home screen using this code. Provide the necessary info like url, title etc..
final Intent in = new Intent();
final Intent shortcutIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
long urlHash = url.hashCode();
long uniqueId = (urlHash << 32) | shortcutIntent.hashCode();
shortcutIntent.putExtra(Browser.EXTRA_APPLICATION_ID, Long.toString(uniqueId));
in.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
in.putExtra(Intent.EXTRA_SHORTCUT_NAME, title);
in.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE,
Intent.ShortcutIconResource.fromContext(
BrowserBookmarksPage.this,
R.drawable.ic_launcher_shortcut_browser_bookmark));
in.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
//or in.setAction(Intent.ACTION_CREATE_SHORTCUT);
sendBroadcast(in);
Update
The browser does not recognise the intent scheme, so there is no way you can add a shortcut to your webpage from your webpage.
This can help
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a.jQueryBookmark").click(function(e){
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
var bookmarkUrl = this.href;
var bookmarkTitle = this.title;
if (window.sidebar) { // For Mozilla Firefox Bookmark
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
} else if( window.external || document.all) { // For IE Favorite
window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
} else if(window.opera) { // For Opera Browsers
$("a.jQueryBookmark").attr("href",bookmarkUrl);
$("a.jQueryBookmark").attr("title",bookmarkTitle);
$("a.jQueryBookmark").attr("rel","sidebar");
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action');
return false;
}
});
});
</script>
<h2>Click on the respective links below to bookmark the same</h2>
DeveloperSnippets, Tech Video Bytes, Witty Sparks, Snehah.com
For more info, go to this link ( http://www.developersnippets.com/2009/05/10/simple-bookmark-script-using-jquery/)
Related
I have a web page that is often launched from inside an Android/iOS app in their respective "tab system", Chrome Custom Tabs / SFSafariViewController.
The requirement I have is to have some urls redirect and open in the full browser app instead of navigating in the tab/controller.
I tried adding to one of those URLs the href target="_blank" or use window.open()` but in Android at least that opens a custom tab inside of the existing tab. Haven't had the chance to test that on iOS as of yet but I have the sneaking suspicion it will do nothing as the Safari View Controller does not support windows.
Any ideas on how I can force these 2 tools to open a url in the full apps would be much appreciated.
Thanks.
For people who might come across this and are interested.
Unfortunately it is not possible to force the in app browser to open a new tab in the full version of it. Like I mention in he question iOS simply can't do that due to the nature of the SFSafariViewController, while in Android it does not work... for reasons I guess, could not find something concrete and I will not go into speculating the reasons.
The solution I ended up using on my side is:
Have the site send a deep link to the app with the URL that should it should open externally, the app then closes the in app browser and launches the receive URL to the full browser.
I am setting this as the answer for now. If anyone comes with a better solution or an immediate solution to the problem, I am more than happy to change it.
Cheers
Twitter and whatsapp open webpages in CCT and SVC, but FB messenger doesn't, because it opens in its in-app-browser (IAB), unless you change your phone settings.
But. I found this javascript which works for me, for safari on iphone and chrome on android. Put it in the beginning of your index page at the end of your header and refer to this same index page.
Of course change yourwebpagetoopenoutsidewbhere to your own page.
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test(userAgent),
ios = /iphone|ipod|ipad/.test(userAgent);
var qq;
if (ios) {
if (!standalone && safari) {
// Safari
} else if (!standalone && !safari) {
// iOS webview
s=location.toString().split('?');s=s[1];
qq="https://www.yourwebpagetoopenoutsidewbhere.com/index.php?" + s;
window.close(); // Close the empty view window
window.open(qq,'_system', 'location=yes', replace);
}
} else {
if (userAgent.includes('wv')) {
// Android webview
s=location.toString().split('?');s=s[1];
qq="https://www.yourwebpagetoopenoutsidewbhere.com/index.php?" + s;
window.close(); // Close the empty view window
var winloc = 'intent:' + qq + '#Intent;end';
window.location = winloc;
} else {
// Chrome
}
}
I want the user to open website / web page inside app and not in browser. I have a button, which should open a webpage on click.
I am using native.showWebPopup function for this in main.lua. The problem that I am getting is, a white colored page flashes and disappears immediately.
Below is my code. Any help is greatly appreciated. Thanks.
function openLink(event)
if(event.phase == "ended")then
native.showWebPopup("http://www.google.co.in")
end
end
btn:addEventListener("touch", openLink)
Make sure you check that you've provided access to the internet on Android!
Referring to the documentation: http://docs.coronalabs.com/api/library/native/showWebPopup.html
For Android
If the web popup is displaying web pages from the Internet, you must add the INTERNET permission to the build.settings file.
settings =
{
android =
{
usesPermissions =
{
"android.permission.INTERNET",
},
},
}
Other than that, the syntax looks correct, so I suspect it is a permissions problem.
Hope that helps!
I need to make an app that will only display a public web url that mainly contains HTML, I want to be able to include back and forward buttons if a exact specific url is displayed or users can swipe from the side or something to display them (NO swiping from the side or bottom). I should be able to specify which domains and subdomains should be shown in the app and everything else would be opened in safari.
I would really appreciate if someone could find some kind of (free) solution or if they would like, they could make something for anyone else who is interested in having an Web Based App Template like this. Bonus points for Android and iOS versions and even more for iOS and iPad versions. Greatly Appreciated!
This would be quite easy using UIWebView (on iOS)...
define your webview inside let's say the main UIViewController
UIWebView *webView = [UIWebView alloc]init];
webView.delegate = self
[webView loadHTMLString:#"yoursite.com" baseURL:nil]
on the delegate you should implement
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if(request.url.absoluteString isEqualToString:#"any of the strings you want") {
return YES;
}
else {
[[UIApplication sharedApplication] openURL:request.url]
return NO;
}
}
code is actually not tested but something by this idea should work on iOS...
i only can help you with the iOS part though... hope this helps you...
PS: to use the back and forward you should create a UIToolBar with two buttons and enable and disable them using
if(webView.canGoBack)
backButton.enabled=YES;
if(webView.canGoForwad)
forwardButton.enabled=YES;
and this buttons calls the method goBack and goForward of the UIWebView..
lets say I have an application for my University web site. Where user can navigate by pressing on screen button( Actually, what I did, I categorized everything in my main layout,where each button represents each fields, if any one presses myaccountStatus, then he will be directed to that specific link) However, my web site needs user name and password every time. Where I don't want my user to bother about this at all. So my question is, is there any way I can enable auto-log in?
My application has basic core web feature implemented(WebView, zoom, java-script enabled, some back, forward, stop, reload, favorite, save for offline reading) and everything is working fine, please help with the auto-log in problem.
So far I know, I can do this by saving cookies. But I have no Idea, how they look, what are they and how to handle those thing. So, please give me a step by step tutorial for this problem. Thanks in advance.
If your are using a web-view based approach (maybe something like cordova?) you could just use the local storage or the web sql standard for html5 apps: Tutorial for Web-Sql.
If you want to store cookies you have to enable them. I'm doing this in my Phonegap/Cordova application with this small Lines of code:
#Override
public void onCreate(Bundle savedInstanceState) {
// ... do whatever you want...
// this lines allow to set cookies
try {
CookieManager.setAcceptFileSchemeCookies(true);
} catch (Throwable e) {
}
// and the default stuff for phonegap/cordova to show a splashscreen and load the application
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
// load the index url from config adding locale support.
super.loadUrl(Config.getStartUrl() + "?locale="
+ Locale.getDefault().getLanguage(), 4000);
}
I hope this helps.
I know that in PhoneGap there's a way to do this, but can it be done for an HTML5 web app? I'd like to have Android users be able to use the back button within the webapp to provide a consistent UX, but of course the default is to go back in the browser history and leave the app...
Edit: tried, didn't do anything on any button press on a Google Nexus S:
document.onkeydown = checkKeycode;
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
alert("keycode: " + keycode);
}
Edit again: The ultimate answer seems to be to create history points at each UX interaction -- using URL hashes like #!/main/about_us in the URL. This then allows for back-button use, so long as you make sure that the UI triggers a history.back() when a UI back button is tapped.
The ultimate answer seems to be to create history points at each UX interaction -- using URL hashes like #!/main/about_us in the URL. This then allows for back-button use, so long as you make sure that the UI triggers a history.back() when a UI back button is tapped.
Override the OnKeyDown Event in your app and look for KEYCODE_BACK.
If you are handling the event then return true else false.