With the iOS6 update, the "Save Image" touch popup menu is now gone when users are in a website that has apple-mobile-web-app-capable enabled. This is really important for my website http://2048px.com.
We want users to be able to add the site to their home screen. The way that users obtain new wallpaper is to click on the download button and then use the Save Image touch menu to save it to their camera roll. But like I said, in iOS6 the "Save Image" option seems to be gone when the webapp is being used.
Does anyone know of some magic meta tag to turn this back on? Or maybe a fancy way to save an image to the camera roll directly.
While I never found a solution to get the save image button back, I did find a solution. I noticed that if I opened a link in a new tab and the url to the link was an external domain, the link would open in Safari instead of the webapp. On my site, all my image for download are now being hosted on an external domain on S3. I then make the download links open in a new tab only when the website is in webapp mode. I accomplish this with the following code.
if (window.navigator.standalone) {
$('a.download').attr({target:'_blank',href:orig_download});
}
Related
I have a PWA saved on the home screen, this opens up standardly without search bar nor the bottom buttons (share, tabs, etc..).
So every link gets opened inside the PWA, and that is expected.
I have a problem when showing pdfs as they normally open in Safari with the "share" button and all the bottom bar, but in the PWA they open up without bottom bar and without any share button.
So my idea is to open the PDF link (http://www.mywebsite.com/download/pdf/12345) in a new safari window,.
I tried putting target="_blank" on the PDF link but this did not solve the problem.
I also tried forcing the iOS behavior by opening the app in safari with safari://http://www.mywebsite.com/download/pdf/12345 but with no luck.
How do I open a New Safari window to a link?
OK, the ONLY working solution is to tell iOS you are going onto another domain.
PWA stays in your app frame ONLY if you stay in the same domain.
To open a link within your domain in an EXTERNAL window (or inside the PWA but with Safari standard controls) you have to send it to an external/different domain.
So the PWA is on https://www.mywebsite.com/ and you want to open a PDF with all Safari control buttons, you just create a SUB domain and point the link to it, like https://media.mywebsite.com/download/pdf/12345 at this point the PWA thinks you are on a different domain and does the correct rendering! 🎉
You can try to use window.open(url).
But, remember to put it in an element with onclick event attribute.
For example,
<button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>
Reference: window.open(url, '_blank'); not working on iMac/Safari
EDIT
You can set a scope in manifest.json to customize where to open an external link.
You can refer https://developers.google.com/web/fundamentals/web-app-manifest on the property scope.
I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :
window.open(pdf_url, "_blank");
And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.
But for example in iOS 11.3 there is no button and user has to use home button to close PWA.
I tried to solve problem using iframe but I can show only first page of the pdf.
Is there any way to fix this issue?
You can resolve this issue by doing some tricks (for any device without back button):
if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.
I use second and third point in real project and its work fine...
This is sample close button code used in popup:
'<p>'+ i18nextHelper.i18next.t('Exit From PDF') +'</p>'
Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.
Good luck.
Noticed this in iOS8 today and I'm not sure if this has always been the case or if it is something that's come in with iOS8.
My company's website, if I save the page to my home screen, adds the icon as expected. But when you open it, it doesn't open in safari, it opens as it's own standalone app. For example, double tapping the home button will show this app open, operating independently of safari.
I gather it has something to do with the apple-mobile-web-app-capable meta tag. Can anybody confirm if this is new or if it has always been the case. Also, some insight as to whether the above meta tag is actually responsible for this. Documentation specifies the default is to open in Safari.
Yes, the apple-mobile-web-app-capable meta tag will do this and it has been around for several iOS versions.
See more here:
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2
I'd like know if there's away to run a bit of code only after it's been installed to the home screen on iOS. This is for internal use only so I don't need it to work on other platforms. Just iOS.
Basically, I want to add a few custom icons to iOS devices that do specific things. One will open a PDF and that's the one I'm having a hard time working with.
So, here's the flow...
User goes to URL on their iOS based device, there is nothing to see here, but then they add the URL to their home screen. Once they click on the home screen icon, the page opens and redirects to the a PDF that lives online. The pdf can live online since they will always have wifi.
Any suggestions?
I have a BrowserField in my application displaying a webpage.
Is there a way to detect browser navigation when user clicking on one link in the webpage and move to another webpage?
http://www.blackberry.com/developers/docs/4.6.0api/net/rim/device/api/browser/field/BrowserContentChangedEvent.html
Not sure if this will trigger it however if you look at the api you can see all your options.
Let me know if you find it.