We're trying to display a graph (.gif) from another site inside our phonegap app. Just adding the img tag with the src set causes a timeout for the entire app. Trying to add the image on page load...
var img = new Image();
var source = <site address based on graphSwitch>;
$(img).attr('src',source).load(
function () {
$('#div' + graphSwitch).empty();
$('#div' + graphSwitch).append(img);
alert("Image Added");
});
has only resulted in nothing being displayed. The only help I've been able to find has been to make sure the site is added to externalHosts (for phonegap 0.9.3) which I've already done and change the timeout, which I also tried but didn't help.
What would be an acceptable way to load images from another website in phonegap?
Well, it seems that with a few more variations I was able to locate the problem. Neither the android simulator for eclipse or the iphone simulator in xcode worked... but actually putting it on an ipod did.
If someone knows how to get it to work all the time and not just on a device I'll switch the answer over to them.
EDIT: It does look like it was our network. Although it still isn't working on eclipse that isn't on the network that was blocked.
Related
I have a Vue.js website with a PDF file which is included in my ultimate javascript bundle via webpack. (It's my CV.) The following build and delivery process has worked perfectly fine for me since 2017, but suddenly stopped working in iOS 14:
Build the PDF with LaTeX.
Use webpack's url-loader to include the PDF in my webpack bundle as a base64 data URI.
Load that URL into a vuex data store, and then just deliver it as a link when clicked.
For the last three years, this has worked fine: I've been able to click on the link and get a working PDF. It's been kind of random and platform-specific whether the PDF opens in-browser or shows up in a download folder, and whether it gets the filename I've asked it to get or not, but, well, that doesn't matter to me. And the core functionality of click the link and get the PDF has worked on every browser and every platform I've ever tried it on.
All of a sudden, with iOS 14, it's stopped working. Now, when I try to activate the PDF link in iOS Safari, nothing happens at all. When I do it in iOS Chrome, it produces a little popup claiming it downloaded a document, but nothing seems to actually be able to open the document. And when I do it in iOS DuckDuckGo, it just displays the base64 data URI in the address bar.
Interestingly, if I take the dataURI that DDG displays in the address bar and copy and paste it into Safari or Chrome on iOS, it actually displays my pdf. So the browsers still have the capacity to display a PDF from a data URI. It just doesn't want to do so from my link.
And my site still works as expected on the desktop. Including in Safari on the desktop. Also, it still works on my wife's phone (she's still on iOS 13). So this is clearly something Apple changed in iOS 14. But what? And how to get my site working again?
I'm guessing that Apple has changed the behavior of the renderer in iOS in some fashion to cause it to break across browsers but nowhere else (since browsers in iOS are all still required to rely on webkit, right?)
This is a pretty important feature to me. I made this decision deliberately for perceived performance---combined with pre-rendering, everything on my site, including the PDF, loads very close to instantly from the user perspective. So I'd really like to keep it.
I'm using Webpack 2.6.1 and Vue 2.3.3. This is a stable build that has been working flawlessly for three years, so I haven't felt the need to update anything except for security updates.
After searching around, I did find this Apple dev discussion which suggests that in iOS 14, Apple newly blocks redirects to data URIs. But I'm not doing a redirect, I'm actually navigating directly to the URI through a link. And the linked discussion suggests that the newly banned behavior just brings Apple in line with what other browsers already ban---but my code works in every other browser, so that can't be it.
Relevant code, to the extent it matters (though it's so basic and obvious that I doubt a simple code fix will be the answer here):
from my webpack.base.js:
{
test: /\.(pdf)$/,
loader: 'url-loader'
},
from my vuex store, in state.js
import cvURL from './assets/pdf/gowdercv.pdf';
from the component containing the link that points to PDF:
<p><a :href="cvURL" download="gowdercv.pdf"><img src="../../assets/icons/file-pdf.svg" class="cvicon"> Download in PDF</a></p>
which is loaded as a computed property to the component, i.e.,
computed: {
cvURL: function(){return this.$store.state.cvURL;},
Does anyone know how to get functionality back in iOS? Is there a workaround built in recent versions of webpack or vue for this? Thanks!
Update: after some help off SO, an acquaintance turned up this similar problem, which also came up with a solution: turning the base64 URI into a blob and passing that data url. Which also solves my problem. Though that SO doesn't have an accepted answer, so I can't vote to close my own question as a duplicate, alas.
So based on my searches this has been a long-standing bug on iOS/Apple’s end. As of yet I haven’t been able to confirm a workaround so would like to see if I’m up to speed on this.
I incorporated a new favicon on my site with the help of realfavicongenerator, and it’s showing up everywhere except Safari iOS where a faulty cache seems to force the old image to show when the site is favorited or bookmarked. Adding to homescreen works fine, MacOS favoriting/bookmarking works fine, Safari iOS doesn’t.
I remember having a similar issue when incorporating the first apple-touch-icon a few years ago, also using realfavicongenerator: when favoriting/bookmarking in Safari iOS the icon was empty instead of showing the image. Eventually it showed up but I don’t recall how or exacty when, but it definitely took a lot longer than it should have.
I’ve obviously tried clearing cache and website data/history through Safari settings, restarting my phone, appending a variable to the apple-touch-icon URL, using both absolute and relative paths, and tinkering with different image size specifications, none of which worked.
I saw a suggestion somewhere that resetting the phone may work, but my question in that scenario is what exactly to reset and whether this would compromise other data.
Are there any workarounds/fixes I’m not aware of?
I’m using an iPhone 7 with iOS 12.2. The code being used is straight from what realfavicongenerator provides.
RealFaviconGenerator's author speaking.
As you noticed, iOS Safari is quite lazy regarding favicon reloading. It is not the only one.
The trick is to force it to reload the icon by providing a URL it never encountered before. A simple way of doing this is to suffix the existing icon URL with a dummy parameter. For example, change /the_icon.png to /the_icon.png?v=2.
To do so with RealFaviconGenerator, generate your icons again. This time, make sure to open the Version/Refresh tab in the Favicon Generator Options panel, and select the second option, as below:
Note: You might want to edit manually the code already created by RealFaviconGenerator and append the version yourself. This might be a bad idea. For example, if you put your icons in your root folder, some HTML lines were not generated (because of conventions RFG is taking advantage of). But suddenly, these lines must be added to specify a version. This is definitely not something you can guess at first sight.
New favicon showed up today, with no intervention on my part (versioning had also been removed). Not sure why. Guess it may be due to a time interval.
i have to create a product presentation tool that runs offline on an ipad.
i have a program wirtten in c# to create a presentation and this program has an export function, this export function creates a whole little homepage (only html and javascript) with the product slider - everything works fine, also the online presentation is perfect.
but the capital problem is, how could i run this offline on the ipad?
what i already tried:
- put the scripts to dropbox and tried to start index.html on ipad (the local links doesnt work)
- i tried to chache the whole page, but that was too much for caching..
there is also one solution i would prefer -> phonegap, but there i see the problem with creating the app... the c# programm should prepare everything, so the clients should take this exported file/files or direcotry and but it anywhere and the ipad should run this presentation offline.
thanks guys
You can try to make a simple app with UIWebView inside and load your local resources into this UIWebView.
Here are some similar questions on how to make it:
First
Second
Third
The way your clients are able to add the presentation files might be using iTunes File Sharing. And you can get these files from Documents directory
Hope this will help.
I'm building a mobile app for IOS using Flash Builder, Flex 4.6 and AIR 3.5. I'm investigating using StageWebView to render some HTML5 content.
What I want to do is to build the content into the app, as opposed to putting it on a server. It's relatively static. But I read (and confirmed) that in-app files can't be used directly by StageWebView. But following a suggestion, I'm have the app copy the content to a temp folder, then create a file:// URL for StageWebView, which seems to work:
// create the view
var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight);
// copy the HTML5 content to a temp directory
var src:File = File.applicationDirectory.resolvePath("myFolder");
var temp:File = File.createTempDirectory().resolvePath("myFolder");
copyFolderContentsToAnotherFolder(src,temp);
// what's the URL
var newPath:String = "file://" + temp.nativePath + "/index.html";
// load it
webView.loadURL(newPath);
Is this a bad idea? Will temporary files pile up in my device with no way to delete them?
I also thought of having the app implement an minimal HTTP server by listening on a port and supplying the data for requested files as they come. This would allow us to serve the files to StageWebView from their in-app locations, without copying. We do this in a desktop air app and it works very nicely. But, that approach uses ServerSocket, which I discover is not supported on mobile. Is there an alternative way to do this?
Finally, StageWebView does not work well in the Flash Builder iOS simulator, making debugging difficult. Is it best to just go and get FB 4.7, which (should) allow me to use it with XCode's iOS simulator?
thanks
Well, it seems I CAN directly address the in-app content, I just have to construct a file:// URL for it:
var src:File = File.applicationDirectory.resolvePath("myFolder/index.html");
var newPath:String = "file://" + src.nativePath;
webView.loadURL(newPath);
It's been too long since I thought about this. But as I recall I was able to use in app content without making copies, for iOS. But I am reading today where this might not be possible on Android.
It seems that StageWebView, when used with iOS, works best with remote files. So, I am using some Actionscript code that implements a simple HTTP server, serving up local files. Then, I give StageWebView http urls that use localhost, and a port number. Works swell.
After Adobe updated the SDK - the #Jesse Crosen method does not work for android but only on iOS.
To make it work on Android you have to copy the packaged file like this:
var htmlFile:File = File.applicationDirectory.resolvePath("html/index.html");
var fileDest:File = File.applicationStorageDirectory.resolvePath("html/index.html");
htmlFile.copyTo(fileDest, true);
webView.loadURL("file://" + htmlFile.nativePath);
For anyone looking for a current solution to this problem that's simpler than writing an HTTP server, this is what worked for me (on iOS only):
webView.loadURL(new File(new File("app:/myFolder/index.html").nativePath).url);
But there is a caveat, which is that it seems you can't pass in a query string or hash at the end of the URL. Data can be passed to the HTML content by loading a javascript: URL once the main content is loaded.
There's a page with broader information covering iOS and Android here.
I'm trying to use responsivepx to determine breakpoints on a responsive design I am working on locally. I am just dropping the local url into the designated area and trying to open but it doesn't work, and I can't figure out why. Any help would be appreciated. It works fine on external urls fine.
Working locally is difficult because tools such as reponsivepx rely on accessing a publically available URL. Some options to over come this include;
Create your own iframe page and incluse the local url in the source. Using this allows you to set all of the breakpoints you need.
Use Responsive Design Test - provides access to ipad and iphone portrait and landscape modes
Mediaquery Bookmarklet - shows exactly which media queries are currently active and the screen resolution