I'm playing around with iOS' webapps.
I'd like to configure the webapp to save to the user's home screen with a different url from the original web page.
On Android, you can change "start_url" in the manifest.json to achieve this.
The various customisation options on iOS seem to be less well documented. But I'm hoping there's a meta tag I can use, similar to this one that changes the web app title:
<meta name="apple-mobile-web-app-title" content="[your title]" />
which is documented in this question.
As of iOS 11.3, Safari now supports web app manifests, making it possible to specify the start URL. Learn more here.
Related
I create a App with Ionic which embed the twitch player for streams and clips.
var url = https://player.twitch.tv/?video=v${videoId}&time=${time}&parent=localhost
<iframe [src]='url' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
On Android its working perfect but in the iOS App the iframe will not be shown and no player is available. Just a white screen.
Does anybody know what the problem can be related to ios?
I have the same issue. Security limitations are the culprit indeed: I opened the Safari console while the iframe was trying to load and saw this error:
Refused to load https://player.twitch.tv/?channel=...&controls=false&parent=localhost&muted=true because it does not appear in the frame-ancestors directive of the Content Security Policy.
Looking at this security header that Twitch returns, it looks like this:
Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:*
However, when using the Ionic WebView, according to its documentation:
iosScheme
<preference name="iosScheme" value="httpsionic" />
Default value is ionic
Configures the Scheme the app uses to load the content.
Values like http, https or file are not valid and will use default value instead.
So your WKWebView will have ionic://locahost as its application URL by default, which doesn't match the http://localhost and https://localhost prefixes specified by Twitch.
I tried using &parent=ionic://localhost in the Twitch iframe URL. The WKWebView doesn't refuse to open the iframe, but Twitch itself freaks out about the special characters in that parameter and refuses to render its player page.
To me it seems that currently, iOS Ionic/Cordova Apps and Twitch iframes are mutually exclusive.
Edit:
I found a bunch of discussions in the Twitch forum talking about this subject (1, 2), but none of them went technically in-depth to the point where a working solution or workaround could be found. Unfortunately, threads are closed after 1 month of inactivity, so I had to open yet another thread in the Twitch forum explaining the technical details from my point of view. I also added a feature request in their user-voice feedback portal. I'm afraid trying to make Twitch realise / accept that they should do something about mobile embeds is all we can do at this point. Here's the link to it:
https://twitch.uservoice.com/forums/310213-developers/suggestions/44682766-make-embeds-work-on-ios-web-based-apps-like-ionic
I've found two options to open my app from a Safari web page: a custom URL scheme created in my app project's Info.plist or Apple's Universal Linking. Obviously the custom URL scheme is the easiest one to set up, but the problem I'm having with this is that Safari shows a confirmation window asking "Open myapp?" first and the user has to tap OK before the app actually opens. I want my app to open automatically as the scheme is opened, and I'm being told the only way to do this is through Universal Linking (please correct me if this is not true). If this is true, however, I would like to know if it's possible in any way to put the required apple-app-site-association file on a http:// domain instead of https://? According the official Apple documentation the format of a correct Universal Link starts explicitly with https:// but my domain name can't be loaded on https:// without redirecting a few times and that messes up the web services I've written to execute other tasks in my app. The two main questions I'm left with after this issue:
1) Is it really impossible to work around the confirmation prompt using a custom URL scheme (myscheme://)? If it's not impossible, how can I do this?
2) If I have to use Apple Universal Linking, can I use a http:// domain? If so, how do I do it? Right now if I load up the universal link, it just shows the dictionary inside the apple-app-site-association file, which I'm pretty sure is not supposed to happen. I'm told it's supposed to send a NSUserActivity object to my app delegate. How can I accomplish this with a http:// link?
It is not possible to trigger a custom URI scheme without showing an alert to the user. This used to be possible in iOS 8, but iOS 9 started showing the alert for all apps. And iOS 10.3 has extended that even to the App Store itself. You cannot bypass this. Universal Links were created to replace URI schemes for this behavior, so you do need to use them instead.
From your description, I believe you may be misunderstanding how Universal Links work. To answer the literal questions you asked first, no the Universal Link URL itself does not need to be on the https:// protocol, and yes, the apple-app-site-association must be served over https:// without redirects.
However, it sounds like you're trying to serve the content of the apple-app-site-association file for every Universal Link. That is not the correct implementation — the AASA file is hosted only at https://example.com/apple-app-site-association, and iOS automatically retrieves it when the app is installed. After that, any URL on example.com that matches the criteria in the AASA file will be eligible for Universal Links.
All of that said, you really don't want to built out this system on your own. I suggest looking into Firebase Dynamic Links or Branch.io (full disclosure: I'm on the Branch team).
Is it really impossible to work around the confirmation prompt using a custom URL scheme (myscheme://)? If it's not impossible, how can I do this?
That is possible with some hacky tricks and BAD user experience. It requires user to press "add to home screen" button, so I don't recommend this solution in most cases.
set your app scheme like myapp
create the following html file and put it into the web
window.onload = function() {
if (("standalone" in window.navigator) && window.navigator.standalone) {
window.location.href = 'myapp://open'
}
}
open the html file with safari and "add to home screen"
open the home screen icon and your native app will launch
The point is the meta tag.
<meta name="apple-mobile-web-app-capable" content="yes" />
Without this, safari will launch and confirmation prompt will appear.
I'm trying to implement some features inside a web view in facebook messenger. on the phone the webview is opening fine, but in desctop web browser the webview is opening inside a new tab.
im using the following feature:
buttons:[{
type: "web_url",
url: "https://www.oculus.com/en-us/rift/",
title: "Open Web URL",
webview_height_ratio: "compact",
messenger_extensions: true,
}
I know that maybe it is supposed to open like this but you all can agree that if I'm implementing a custom feature inside the conversation it would be mach better to open it inside a small webview in the conversation.
does anyone knows if this even possible?
You have to follow the steps in these docs.
Make sure to read the docs for desktop and add the X-Frame-Options header. The troubleshooting section in the same docs is your friend.
Two caveats:
X-Frame-Options header does not seem to be enough for firefox. I'm in the process of building a bot using webview, and when I figure out which headers to send to make firefox work, I will post them here. EDIT due to some bugs within the platform on the web, I've postponed this project.
There seem to be a problem with getting page-scoped user ids on desktop. Read my question.
I know this is possible because today I browsed a mobile web page that said I have installed their native app, and prompted me to read their content in the app. (I haven't logged in, so they must have used some native checking mechanism.)
I know the web page can call out a native app by loading a custom url scheme like 'myapp://some/path', but how does it check if the url scheme exists before loading it? I want to do the same thing with my web app.
And I was seeing this on iOS, is this possible in Android, too?
The native checking mechanism is called Smart Banner. Apple added it to MobileSafari in iOS 6 and higher.
You add the following to your web page:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
The custom URL scheme is the way to go.
They probably delivered a transparent image by that custom URL, and checked if their image delivery mechanism was hit.
So in essence:
You download page
The page prompts your browser to hit their "checking service" (image with custom URL scheme?)
The page checks if the call to the checking service succeeded. If so, it prompts you to use the native app
I've tried a lot of code samples and methods but nothing works.. iframes in phonegap application doesn't load url in src attribute.
I want to learn is it possible to use iframe in a phonegap iOS application. And is there a way to show a website inside my app (except InAppBrowser). InAppBrowser just backgrounds my app and open safari. I want to show a url inside my own interface.
Yes you can have iFrames in your app to show some web pages but you have to be careful about which website you want to load in iFrame because most of the popular websites (FB, Twitter etc) doesn't allow their website to be rendered in iFrame using META tags like this:
<meta http-equiv="X-Frame-Options" content="deny" />