I am using PhoneGap 3.0 (CLI) to build a PhoneGap application.
I am also using jQuery Mobile with it. I am facing issue with allowing a particular page "user-scalable"
Meta viewport is
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
It works well when viewing it on mobile browser, but in the PhoneGap application it does not allow scaling.
Any help?
Obviously, Phonegap( Android) open index.html in WebView, if you want to scaling then you must enable SupportZoom. In MainActivity, add codes:
public void onCreate(Bundle savedInstanceState) {
CookieManager.setAcceptFileSchemeCookies(true);
super.onCreate(savedInstanceState);
super.setIntegerProperty("loadUrlTimeoutValue", 60000);
super.loadUrl("file:///android_asset/www/index.html");
//Enable zoom in WebView
WebSettings settings = super.appView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
}
And in UIWebView (iOS), you can seeing here and here
Related
I have a PWA that works fine on Android, but is crippled on iOS due to limitations opposed on PWAs imposed by iOS (specifically accessing live camera frames). The app works fine when viewed in Safari. This is counter-intuitive but unfortunately the case.
Is there a way to tell iOS that it should not "install" the PWA, but instead just create a shortcut on the home screen and open it in regular Safari? Like any ol' website?
Or do I need a specific index.html for iOS that does not include the manifest.json reference? The PWA is a single-page Angular application.
Answering my own question. I managed to solve this by programmatically removing the manifest element in the OnInit hook of the AppComponent.
In index.html:
<link rel="manifest" href="manifest.json" id="manifest-link">
In the AppComponent:
ngOnInit() {
// ... platform detection
if (isiOS) {
const element = document.getElementById('manifest-link');
console.log(`Removing manifest element on iOS, should suppress PWA installation`);
element.remove();
}
}
I've added the pwa modules (or schematic) and I've setup my manifest.json file correctly. On an Android device, my service workers are engaged, I get the install to home screen prompt and the address bar disappears and I can see the native look and feel. However, on Chrome/Safari iOS there is no prompt. Is there anything I need to do programmatically/additionally?
iOS
My PWA's index.html includes the following iOS specific meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">
<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">
The "apple-mobile-web-app-capable" and the "apple-mobile-web-app-title" meta tags are required by Safari to show the 'Add to Home' screen:
Ref: PWA Tips and Tricks
Update March 2020
While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.
Installation:
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:
Sets apple-mobile-web-app-capable (opening without a browser chrome)
for display modes standalone, fullscreen or minimal-ui
Creates
apple-touch-icon images, adding the manifest background to transparent
icons: otherwise, iOS renders transparency as black
Creates dynamic
splash images, closely matching the splash images generated for
Chromium-based browsers
You may read more about the package on their documentation.
On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen. It may look something like this:
Image credits: Andy Osmani (Getting started with Progressive Web Apps)
On the other hand, iOS does not support that PWA installation prompt.
Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button. For those who are wondering, the OP is referring to this:
Image credits: Expo
The following types of asset files (Touch icons, and Splash screens) are required for PWAs on iOS devices.
1) Touch Icons
On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png">, like this:
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head>
Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel. You may read up on the good practices on the documentation.
2) Splash Screens
You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.
<head>
<link
rel="apple-touch-startup-image"
media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
href="example2.png"
/>
</head>
Here is a working example by Evan Bacon of the full list of tags will need for the touch icons
You may also check out this blog for the list of PWA features supported on iOS.
Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company. I leave it for you to decide if that is really true 🙃
Here is a code snippet for detecting if the app is on IOS and triggering a popup to add to home screen:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.setState({ showInstallMessage: true });
}
I use JavaScript in both iOS and on android to check if the app is in standalone mode and display a prompt on iOS and non-chrome browsers in android. I just let chrome do it's thing as it's efficient enough. On iOS, only safari supports service worker installs for now.
I have a mobile app build with phonegap (cordova) and the app is live on app store, but this new feature of iOS10 beta:
To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
make the app zoomable and it totally broke the design of the app when zoomed.
Maybe this is a feature for websites on mobile (or not), but I want to be able to disable this for a hybrid mobile app
This is how the viewport looks like in index.html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=medium-dpi, width=device-width, height=device-height" />
Is there a known solution to resolve this problem for the new iOS that will be released soon?
I am using WkWebView and
<engine name="ios" spec="~3.9.2" />
<preference name="phonegap-version" value="cli-5.2.0" />
UPDATE
I updated phonegap to version 6.3.0 and ios platform version to 4.1.1 and I have the same error.
use user-scalable=no as the following code :
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
This works for me:
document.addEventListener('gesturestart', (event) => { event.preventDefault(); }, false);
Answer found:
https://github.com/apache/cordova-ios/issues/1054
Here is a solution for iOS 10+
// stop ios bounce and zoom
document.ontouchmove = event => {
event.preventDefault();
};
This will stop move events reaching the root element/browser
I am trying to use Facebook's new App Links metadata to cause the Facebook app to launch my native app on iOS. So far, it isn't working.
This is what I've done:
1 . I created a file called test.html with the following code:
<html>
<head>
<meta property="al:ios:url" content="MyAlScheme://test" />
<meta property="al:ios:app_store_id" content="123456" />
<meta property="al:ios:app_name" content="My App Name" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<h1>Test</h1>
Launch App
</body>
</html>
(* 123456 and My App Name were replaced with the real app name and ID)
2 . In my XCode project, I registered the Scheme MyAlScheme in the app's plist. (Note: Proof that this scheme works is below).
3 . I sent a link to the aforementioned test.html to another user via Facebook Chat.
4 . I clicked on that link and the web page opened, though I am expecting the app to launch instead.
5 . With the web page opened, I clicked on the "Launch App" link. The app opens up (as expected), proving the the custom scheme is properly registered.
What am I missing?
Answering my own question:
It appears that this is a limitation, specifically, of the iOS Facebook Messenger app. It doesn't support App Links yet.
The same link, if accessed through the main iOS Facebook app (for example, if you post the link on the wall then click on it from the feed), works correctly: The Facebook app creates a special button on the status bar which allows you to open the link in the native app.
Currently, the way this works is that the webview is loaded immediately, but when an AppLink is detected, a native button is shown that allows the user to jump directly into the app. Things are being tweaked a little bit so you may see a slightly different user experience, but the general pattern should be immediate webview + native UI to jump straight into the app.
I am a beginner to jQuery Mobile and am developing a mobile website within Dreamweaver CS5.5. Once I received the new DW I immediately updated to jqm 1.0a4.1. Designed my site and it looks good on desktop Safari and mobile Safari. Then I updated to jqm 1.0rc1 and while the site looks same on desktop safari, the entire website design decreased to an unreadable size in mobile safari. I tried again with 1.0rc2 and same thing happened as with 1.0rc1. When I return to 1.0a4.1 the site looks great on desktop and mobile.
Does anyone know why this would happen: is there something I'm missing and can correct to have the latest version of jqm work on both desktop and mobile safari?
Thanks for your time, I appreciate it.
jQuery Mobile 1.0a4.1 dynamically injects a viewport tag into the DOM. In newer versions you need to do this yourself. Try adding this viewport tag to the <head> of your documents:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >