I have a website which contains links to external websites, for example amazon product links. The links work just fine, but when I test my website on mobile (iOS in this case), I noticed that clicking the links in the mobile browsers would force open the Amazon app rather than just opening a new tab.
The links in my html are as follows:
I want to have these links open in the browser only, not in their respective apps. Is there any way in to prevent this behavior using html / javascript? Thanks!
No, you can't.
The reason is: you should not be able to impose your choice on the user. Maybe the user prefers the app? That's why iOS 9 introduced the app switcher on the top left hand corner if you switch apps.
Also, let's look from the other side of things if you are the app developer: If you go so far as to build an app and allow universal links (or generally deep links), you obviously would like the user to use that feature and rather open the site in the app. But again, you cannot force the user into opening that link in the app. That's a good thing, because it all depends on what the user wants to do and how he wants to do it.
Having the user choose is the best way to handle this from a UX point of view.
Related
I'm building react based web-app which is available as PWA in iOS. I have done so much R&D to solve my problem, but ended up with nothing. If anyone can help, it would be appreciated, let me explain the problem in detail:
In my web-app (PWA in iOS), there's a dashboard where list of external links are available, when you clicks on any link, it opens that link in in-app browser rather than a mobile's native browser. The reason why I want this is...
As I said there are list of applications, so, for example, let's say I'm clicking on link-1, the PWA opens the in-app browser, I'm login into that web-app, doing some work, then coming back to dashboard (PWA), and clicks on another link-2, it opens that web-link in in-app browser again, I'm login into that web-app, doing some work, then coming back to dashboard, now, when I'm clicking on link-1 again, it opens that in the in-app browser, and I have to login again go into the page I was on and do my work. This is little frustrating for user to having login again and again.
As I said these are external application, which means I don't have control over it, so can't store the token and pass it again when user clicks on the link.
I want somewhat like browser like experience where in, user does not lose his progress, even if he has opened multiple links from the dashboard, he can easily switch between the tabs.
The solution that I tried so far:
Open directly PWA of a link that I'm trying to open when click on link
(the iOS doesn't support this yet)
Open the mobile's native browser
(though business doesn't want this, as it's not good experience as user have to switch between PWA and browser, but still this is the only solution I can see)
(I tried window.open, _blank, but no luck with that in iOS, though it works well in Android)
Tried many solutions like: rel='external', _blank options, etc.
(but no luck so far.)
Tried loading external link in iFrame
(Due to security reason, it refuses to load external link)
I'm open for any solution that can fulfill my need. Even if you don't know the answer, please do like the question, I'd really appreciate your help, thanks in advance!
Looking forward hear everyone's thought on this.
I am developing a cross-browser MVC web app with a javascript browser extension that uses a background script, is it possible to hide the address bar/navigation, the browser window menus, side bar and other toolbars?
The only thing I really want to keep is the tabs, though I would like to hide the add tab button as well.
This web app will run by itself a browser window, I have already got the extension doing that, so it won't affect other website functionality.
Question: Is this possible, if so, how and what api's should I focus on?
There are two ways to hide a browser's UI:
1) In any environment, you can popup a 'chomeless window' popup, which is discussed here: How do I create a chromeless window?
2) In a mobile environment, primarily Android, you can develop a Progressive Web App which will be able to open the mobile browser without the UI. See: Create a PWA in under 5 min's
Given your use case, it sounds like option 1 is your best bet, but likely it won't satisfy all your requirements.
I'm working on an iOS app some people want to link to from their website.
While I've managed to open my app from a webpage using schemes, I wonder if, when I'm done with what I have to do in my app, I can switch back to the original website tab in safari.
To my knowledge : it is pretty straightforward to open a new page in safari from my app but I don't know if it is possible to get back to the actual original page, just like the ios9 back-to-app button would do.
I could open a new page and close it straight away with some javascript, which would probably display the original page because it's the next one in the tab list... but it doesn't feel right (does it?)
I read stuff about ios9 deep linking, still can't find anything interesting.
To achieve this is to open Safari using URLScheme. However, (afaik) Safari App doesn't have a url scheme. If the user came to your app from Chrome, than you can use its url scheme
Google Chrome has the following two URI schemes: googlechrome:// and googlechromes://
iOS 9's back to app button can't be invoked programmatically, so you can't use it as well. However in jailbreaked devices an app can mimic that, maybe that will help you http://theunlockr.com/2015/08/23/enable-back-button-ios-8-video/
I could open a new page and close it straight away with some
javascript, which would probably display the original page because
it's the next one in the tab list... but it doesn't feel right (does
it?)
It doesn't feel right at all. Because the typical behaviour for turning back to previos (or any other) application among iOS users is pressing home button twice, and selecting the app. Maybe you can simply show a message, and ask user to return Safari.
I am building a chrome app for a client that will run in kiosk mode to display in their stores. Right now I have an index.html page that links to about 30 other pages. However, when I click on a link in the app I get an error...
Can't open same-window link to "chrome-extension://leghflngpfmomcflabikghiemaajadne/poweredge"; try target="_blank".
So I tried target="_blank" and that tries to open it in a new chrome window.. no good. I've been reading a little bit about using webview and sandboxing pages but they both open the pages in a new window and it just doesn't look good.
Is there a better way to do this? Right now my only idea is to place all of the content on the index.html page and turn on/off sections of the content with jQuery. I'd love to keep all of the pages separate though, just for my own sanity.
Thanks!
Navigation is disabled for the Chrome Apps platform. In theory you are supposed to make single-page apps - so your turn on/off approach is the "intended" one.
No-one stops you from having several windows though - suppose you have an options page, it wouldn't be strange to open it separately (via chrome.app.window.create)
As stdob mentions in comments, a workaround may be possible by using <webview> with a partition blessed to show local resources. It's not clear though if it will allow access to apps APIs.
Is there a way to programmatically create a desktop link for my webpage?
Not from Javascript, but there is a trick to let the users do it. It is more of an interaction design technique rather than programming technique but I'll write it maybe someone googles this question and finds it useful.
Make an icon on your page with a text under it. Then ask the user to drag this icon to their desktop. The icon should be embedded in an anchor tag <a> with the href attribute pointing to your website. The text under the icon should be the same as the <title> tag of your page. The browsers make an icon when the user drags an anchor link from a page to a folder, desktop or bookmark bar. The text that the browsers assign this shortcut or link is usually the <title> of the page. Remember that the icon should be set as the background of the element so that the browser doesn't save the image instead of making a new link. It would be even better if this icon is the same as the favicon of your website.
To demonstrate this technique here is some code:
<p>You can make a shortcut to www.mysite.com by dragging this icon to your desktop or bookmark bar: </p>
<a href="https://www.example.com">
<div id="icon" style="background-image:url('favicon.png');width:32px;height:32px;"></div>
<div id="title">www.example.com</div>
</a>
Like a native app:
In Chrome users can go to Menu > More tools > Create application shortcut... and create a borderless shortcut to your site that looks like an app. Something similar can be done in Android, iOS and also Firefox on Android.
This is not possible with browser scripts such as JavaScript. It is a security feature. I'm sure you can appreciate why people would not want webpages to be able to access your local file system.
Imagine that instead of drowning in popup windows, we would be drowning in files created by spammy/scammy webpages. I'm not saying that your site is spammy or scammy, just trying to put this into perspective :)
You could quite easily create a sort of tutorial for your users on how to create a shortcut or add your page to their bookmarks taking into consideration that users may be using different browsers, but if you cover the major browsers, Chrome, Firefox and IE, I'm sure your users will have no problem following your instructions.
From JavaScript, running on a webpage?
No.