This project forked from apache/cordova-plugin-wkwebview-engine
Mirror of Apache Cordova wkwebview engine plugin
License: Apache License 2.0
Repo moved to: https://github.com/ionic-team/cordova-plugin-ionic-webview
Switching between pages is slower than in UIWebview. I'm using ionic 1 with sidemenu when i select another page the current menupoint is highlighted in blue and also the new menu i press gets highlighted in blue, it stays like this for like 1-2 second before closing the menu and going to the new page.
Also when switching pages there is sometimes a black flickering / black animation. (Could be that those 2 issues hangs togheter, and because of can't loading the animation, it responses slow..)
Maybe it's also a bit slow because of all the XHR interceptions to all templates like for exampletemplates/filter/item.html
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0-beta.35
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3 Build version 7D175
Currently, you can use the javascript .focus() method on an input text box to focus on the input and trigger the keyboard open.
Note that it does require the follow preference in the config.xml:
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
This functionality doesn't work with enabling WKWebView.
This is the most awesome WKWebView plugin I ever found (so fast) but I just can't seem to use sliding items (sliding won't even start, as if not present).
iOS 10
Cordova iOS 4.1.0
Camera plugin stops working after updating to wkwebview. (http://ionicframework.com/docs/v2/native/camera/). getPicture function is not being triggered
iOS 9.2
Cordova
Hi there,
It seems a fairly well-known issue that cookies don't really work (by default) with a WKWebView. Basically Set-Cookie is ignored, and no cookies are ever sent with requests.
This seems to be the primary discussion on the topic I can find : http://stackoverflow.com/questions/26573137/can-i-set-the-cookies-to-be-used-by-a-wkwebview
It looks like in that post there is potential to add support for cookies into this plugin. The way the xhr polyfill hooks in seems to be similar to how you would manage cookies. But it's well beyond my skill-level to attempt a PR. Does that seem possible?
Hey i've heard great things about this plugin and what it does for performance and want to test it out myself!
I was wondering for someone like me (developing on a windows with no xcode access) how would I install this plugin? Instructions kind of suggest a solution for mac developers, but not windows?
I've been using ionic package to build for ios btw
As you can see my avatar i'm a pouchdb fan ;) So i need websql support with unlimited storage.
That's why Nolan Lawson wrote the plugin cordova-plugin-sqlite-2 he also said it would work in wkwebview.
But it doesn't work anymore when using this wkwebview plugin. I also tried using more general but slower cordova-sqlite-storage but also did not work.
Safari technology preview debugger creates pink flickering on screen. Maybe not important but just to note. If you dont care feel free to close ;)
Safari Developer Inspector message on click links like href="tel:0899 123 1231" :
Failed to load resource: unsupported URL
Eddy Verbruggen points to add a target="_blank", but also does not work. Maybe it does not apply to our plugin.
I'll back tomorrow to provide more info.
Using version 1.0.3 I get a white screen when building my app through Xcode 7 to my iPhone.
I'm using Ionic Deploy and suspect that could be a factor. I was having trouble with Ionic Deploy when testing version 1.0.1 of this plugin (it would download the update but deploy.load() wouldn't restart the app), so I upgraded to 1.0.3 and now I receive a white screen. I am able to resolve the problem by removing the wkwebview plugin.
Here's my debug log:
2016-08-19 18:33:30.396 Airfoil Staging[857:217393] Apache Cordova native platform version 4.1.1 is starting.
2016-08-19 18:33:30.398 Airfoil Staging[857:217393] Multi-tasking -> Device: YES, App: YES
2016-08-19 18:33:30.488 Airfoil Staging[857:217393] Using WKWebView
2016-08-19 18:33:30.490 Airfoil Staging[857:217393] [CDVTimer][handleopenurl] 0.159025ms
2016-08-19 18:33:30.492 Airfoil Staging[857:217393] Unlimited access to network resources
2016-08-19 18:33:30.493 Airfoil Staging[857:217393] Unlimited access to network resources
2016-08-19 18:33:30.493 Airfoil Staging[857:217393] [CDVTimer][intentandnavigationfilter] 3.093004ms
2016-08-19 18:33:30.494 Airfoil Staging[857:217393] [CDVTimer][gesturehandler] 0.102997ms
2016-08-19 18:33:30.522 Airfoil Staging[857:217393] [CDVTimer][file] 28.785944ms
2016-08-19 18:33:30.539 Airfoil Staging[857:217393] [CDVTimer][splashscreen] 16.440034ms
2016-08-19 18:33:30.542 Airfoil Staging[857:217393] [CDVTimer][statusbar] 2.819002ms
2016-08-19 18:33:30.545 Airfoil Staging[857:217393] VERSION LABEL: 0.1.1:1471649568:29434326-6663-11e6-b1c9-b214b799606d
2016-08-19 18:33:30.545 Airfoil Staging[857:217393] updating version label
2016-08-19 18:33:30.549 Airfoil Staging[857:217393] [CDVTimer][ionicdeploy] 6.290019ms
2016-08-19 18:33:30.550 Airfoil Staging[857:217393] [CDVTimer][keyboard] 1.417994ms
2016-08-19 18:33:30.550 Airfoil Staging[857:217393] [CDVTimer][TotalPluginStartup] 60.618997ms
2016-08-19 18:33:30.680 Airfoil Staging[857:217393] uuid is:
2016-08-19 18:33:30.681 Airfoil Staging[857:217393] ignore deploy
2016-08-19 18:33:30.681 Airfoil Staging[857:217393] ignore version: 29434326-6663-11e6-b1c9-b214b799606d
2016-08-19 18:33:30.686 Airfoil Staging[857:217393] uuid is:
2016-08-19 18:33:30.686 Airfoil Staging[857:217393] ignore deploy
2016-08-19 18:33:30.686 Airfoil Staging[857:217393] ignore version: 29434326-6663-11e6-b1c9-b214b799606d
2016-08-19 18:33:31.870 Airfoil Staging[857:217393] uuid is:
2016-08-19 18:33:31.870 Airfoil Staging[857:217393] ignore deploy
2016-08-19 18:33:31.870 Airfoil Staging[857:217393] ignore version: 29434326-6663-11e6-b1c9-b214b799606d
2016-08-19 18:33:32.085 Airfoil Staging[857:217393] DEVICE READY FIRED AFTER 810 ms
2016-08-19 18:33:32.086 Airfoil Staging[857:217393] Ionic Core: plugins are ready
2016-08-19 18:33:37.300 Airfoil Staging[857:217432] version is: 0.1.1
2016-08-19 18:33:37.300 Airfoil Staging[857:217432] uuid is:
2016-08-19 18:33:37.300 Airfoil Staging[857:217432] channel is: staging
2016-08-19 18:33:37.300 Airfoil Staging[857:217432] JSON Error: (null)
2016-08-19 18:33:37.301 Airfoil Staging[857:217432] Response: (null)
2016-08-19 18:33:37.302 Airfoil Staging[857:217432] JSON: {
data = {
available = 1;
compatible = 1;
metadata = {
};
snapshot = "[redacted]";
url = "https://api.ionic.io/deploy/snapshots/[redacted]";
};
meta = {
"request_id" = "[redacted]";
status = 200;
version = "2.0.0-beta.0";
};
}
2016-08-19 18:33:37.302 Airfoil Staging[857:217432] compatible: True
2016-08-19 18:33:37.302 Airfoil Staging[857:217432] available: True
2016-08-19 18:33:37.302 Airfoil Staging[857:217432] update uuid: 29434326-6663-11e6-b1c9-b214b799606d
2016-08-19 18:33:37.302 Airfoil Staging[857:217432] update is false
2016-08-19 18:33:37.311 Airfoil Staging[857:217393] Ionic Deploy: no updates available
When enabling wkwebview, requests to a webserver are from "null" and therefore rejected even with Access-Control-Allow-Origin set to *
Early observation for an existing Cordova Ionic (1.3.x) app - once the app is switched over to WKWebView is seems that previously persisted data (from UIWebView) is lost. In our case we rely on localForage and angular-localForage with a default driver (asyncStorage/indexedDB). I have verified that this also applies to pure localStorage.
To begin this case I'd like to query if anyone else has noticed the same. We need to know what kind of workaround or strategy to apply in order to transition the data to the new app instance running within WKWebView.
The concern is that existing users might end up with invalidated user sessions, loss of locally stored data etc.
After installing cordova-plugin-wkwebview-engine and running the app on an iPhone through XCode, the following error was generated:
Xcode error: XHR polyfill was not found!
Line of code affected:
[userContentController addUserScript:[self xhrPolyfillScript]];
After upgrading to WKWebView from UIWebView using the Cordova file plugin to read a file from cordova.file.dataDirectory directory causes the app to be reloaded. If I disable the call to $cordovaFile.readAsText(path, name).then(file => {}); the app no longer reloads.
This only seems to happen if I am reading a file from cordova.file.dataDirectory. If I read a file from cordova.file.applicationDirectory it works fine. If I switch back to UIWebView this works as expected.
As my app leaves the foreground and comes back to the foreground it looks like the entire app is reloaded which is problematic because then the user always ends up at the home page instead of whatever they were doing.
I'm kind of surprised no one else has noted this, making me think it might just be me.
Here are the logs I get
--- This is when I go to the iOS home screen ---
Snapshotting a view that has not been rendered results in an empty snapshot. Ensure your view has been rendered at least once before snapshotting or snapshot after screen updates.
--- This is once I tap the app to bring it back to the foreground, not closing it, just resuming ---
2016-08-19 17:21:08.178 RedFit[91023:9574005] CDVWKWebViewEngine reloading!
2016-08-19 17:21:08.186 RedFit[91023:9574005] IAB.close() called but it was already closed.
I will continue testing to see if I can find any solutions or similar issues linked to Cordova's branch
In xhr.js use window.atob to decode base64 response content
but window.atob only support Latin1 range characters.
Is it possible to replace the window.atob to third base64 decoding tools, such as webtoolkit.base64?
It would be great if there was a way for this plugin to intercept requests to standard paths outside of the application root so that they can be used in wkwebview.
For example my app downloads files which should be persistent and not wiped by the OS to cordova.file.datadirectory using the filetransfer plugin and the file plugin. I then want to display images from this path within the app, or play video / sound files from these paths within the app.
I can save the files here with no problem, and I can check that they exist using the file plugin.
What I can't do is display an image from the datadirectory when using this wkwebview plugin. It just gets an error. It doesn't seem like these requests are being intercepted even though they are starting with file: protocol.
If I drop by to uiwebview or test on android everything works so all my paths etc are working and files are present and accounted for.
Given that the file plugin CAN read the files from the file system would it be possible to implement an interceptor for requests to these common local storage paths? Perhaps it could be intercepted and routed to the file plugin to fulfill rather than just trying to load from the local filesystem?
If I have just missed something and this should already be possible please let me know.
Currently, this plugin handles all XHR request with Unicode but sometimes I want to request arraybuffer like [request.responseType = 'arraybuffer';]
I paste the message which I saw.
2016-08-25 22:20:18.735 Eye Exerciser[1111:1221055] CDVWKWebViewEngine: XHR intercepted: sounds/touch.mp3
2016-08-25 22:20:18.740 Eye Exerciser[1111:1221055] CDVWKWebViewEngine: Error while opening file with path
2016-08-25 22:20:18.861 Eye Exerciser[1111:1221055] CDVWKWebViewEngine: Error Domain=NSCocoaErrorDomain Code=261 "The file “touch.mp3” couldn’t be opened using text encoding Unicode (UTF-8)." UserInfo={NSFilePath=/var/containers/Bundle/Application/6F3FDFF7-DCFA-4302-8799-0B515B9D0E8A/Sample.app/www/sounds/touch.mp3, NSStringEncoding=4}
Hello! This has been documented here on the main plugin but thought I'd see if the Ionic team would like to review, given how quickly you've taken to other issues! Someone already wrote a PR, too.
Developers typically use the InAppBrowser plugin (cordova-plugin-inappbrowser, v1.4.0) for authenticating users via OAuth etc. When the browser is launched in an app using WKWebView though, code from the app is blocked. Result of this is that the browser can not be closed programmatically.
Code:
var inAppBrowserRef = cordova.InAppBrowser.open("https://google.com", '_blank', 'location=no,toolbar=no,clearcache=yes');
inAppBrowserRef.addEventListener('loadstop', function(event) {
// Watch for specific URL. In OAuth flow, typically the one that has the granted access token in it
if (event.url.indexOf("access_token") > -1) {
// save it, do other stuff
// Close the InAppBrowser, returning control to main app
// Blocked here, so browser cannot be closed
inAppBrowserRef.close();
}
});
While I have
<feature name="Keyboard">
<param name="ios-package" onload="true" value="IonicKeyboard" />
</feature>and the pref. KeyboardDisplayRequiresUserAction, this plugin seems to break some functions.
When I try to .focus() (even inside a $timeout()) I can't tap that input again, the cursor won't appear. Don't happen without that plugin
Hey,
trying to use HTML imports such as <link rel="import" href="elements/app-elements.html"> with webcomponents.js silently fails with this fork of the wkwebview engine.
For now, the only workaround seems to be using a local webserver.
Would be really awesome if this plugin added a custom shimmed HTML import to support this upcoming standard.
My images are not visible anymore with WKWebView. I don't have any display problems with UIWebView.
HTML: ... <img ng-src="{{vm.imageUri}}>...
config.xml:
...
<access origin="*"/>
<access origin="http://*" launch-external="yes"/>
<access origin="https://*" launch-external="yes"/>
...
It have tried the following URIs (preview_1471524559000 is the image file):
Did I do something wrong?
If i'm executing javascript code in an iframe, and I try to load assets using AJAX within that frame, the XHR polyfill won't load the correct url (relative to the iframe href path), and instead will try to look into the root folder
Environment Information
Framework: Ionic2 @ Beta11
OS: iOS 9.3
Device: iPhone6 (also reproducible on iPhoneSE, iPad Air, iPhone 6S)
Expected Behavior: When a User navigates a form using the Keyboard Arrow Buttons, the view smoothly scrolls to the next Input and focuses into that Input.
Actual Behavior: When a User navigates a form using the Keyboard Arrow Buttons, the farther down the form they go, the view bounces more and more in between focusing.
Steps to Reproduce:
ion-content block with 6+ text inputs.Screencast: https://cl.ly/3Y282S1h0R3K
Fixes I've Tried:
1. Adding `has-bounce="false"` to the `ion-content` element
2. Fixing the `body` element when the Keyboard is shown
3. Using the native Keyboard plugin's disable scroll function
This does not happen with UIWebView using the same code base.
I am using ionic2 and added this plugin recently.
UI is now blazing fast but unfortunately I cannot use this plugin since I am using Angular 2 Observable model to share my data/events through a service, and it is apparently not working with wkwebview.
Short example:
@Injectable()
export class AppService {
constructor () {
// Observable string sources
this.onUserUpdatedSource = new Subject();
// Observable string streams
this.onUserUpdated$ = this.onUserUpdatedSource.asObservable();
}
announceUserUpdated() {
this.onUserUpdatedSource.next();
}
}
And somewhere else in my code I have:
this.userUpdatedSubscription = appService.onUserUpdated$.subscribe(data => {
console.log('user updated');
});
The thing is when I call announceUserUpdated() on my service, my listening callback is never called on the other side of my application.
I use the InAppBrowser to display the content of a PDF. Everything works fine and it looks exactly like in UIWebView. However in the Xcode console these messages appear:
2016-08-22 17:05:05.355 InspectAndGo[2278:1043666] Setting the WebView's frame to {{0, 0}, {1024, 724}}
2016-08-22 17:05:05.387 InspectAndGo[2278:1043666] THREAD WARNING: ['InAppBrowser'] took '62.119873' ms. Plugin should use a background thread.
objc[2278]: UIPDFPageRenderOperation object 0x13e144930 overreleased while already deallocating; break on objc_overrelease_during_dealloc_error to debug
objc[2278]: UIPDFPageRenderOperation object 0x13e14bdb0 overreleased while already deallocating; break on objc_overrelease_during_dealloc_error to debug
objc[2278]: UIPDFPageRenderOperation object 0x13e14c0f0 overreleased while already deallocating; break on objc_overrelease_during_dealloc_error to debug
objc[2278]: UIPDFPageRenderOperation object 0x13e116700 overreleased while already deallocating; break on objc_overrelease_during_dealloc_error to debug
objc[2278]: UIPDFPageRenderOperation object 0x13cdf8050 overreleased while already deallocating; break on objc_overrelease_during_dealloc_error to debug
The messages appear only on opening the PDF, no messages on closing.
Not sure but it might have something to do with AJAX calls.
Title says it all, just a question.
Since 10% of devices are still running iOS 8, it would be nice.
source: https://developer.apple.com/support/app-store/
I've just installed the plugin on an iOS project. Unfortunately, Xcode reports the errors below when trying to access the template files. When using UIWebView this problem does not occur.
Cordova iOS : 4.1.1
Cordova : 6.2.0
2016-08-19 08:34:54.405 Notes[2091:438565] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/message.html#/login
2016-08-19 08:34:54.406 Notes[2091:438537] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/login.html#/login
2016-08-19 08:34:54.406 Notes[2091:438565] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/feedback.html#/login
2016-08-19 08:34:54.407 Notes[2091:438537] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/notifications.html#/login
2016-08-19 08:34:55.269 Notes[2091:438565] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/note.html#/login
2016-08-19 08:34:55.270 Notes[2091:438537] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/notes.html#/login
2016-08-19 08:34:55.271 Notes[2091:438532] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/tours.html#/login
2016-08-19 08:34:55.273 Notes[2091:438565] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/areas.html#/login
2016-08-19 08:34:56.270 Notes[2091:438537] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/store-select.html#/login
2016-08-19 08:34:56.278 Notes[2091:438532] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/menu.html#/login
2016-08-19 08:36:54.450 Notes[2091:439002] requested path can not be accessed: file:///var/containers/Bundle/Application/D4146972-84BE-44F3-8057-69D31ECEA3D5/Notes.app/www/templates/login.html#/login```
If you use the cordova-plugin-splashscreen, make sure that the autohidesplasscreen value is set to true in your config.xml as below:
<preference name="AutoHideSplashScreen" value="true"/>
Otherwise an exception is thrown in the native code that it cannot remove an observer from CDVsplashscreen and your app will hang. You can reproduce by adding the splashscreen plugin with the value set to false on any default project and just watch the native console output in xcode. Does throw anything in the javascript console so if you aren't running in xcode you will be incredibly frustrated.
Hi there,
I'm getting a white screen when deploying my Ionic 2 application to iOS 10. The splashscreen loads/hides fine, DeviceReady fires, and the root page's constructor fires, but nothing is rendered. In addition, none of the other pages are loaded.
I can confirm that using UIWebView fixes the issue, but I would prefer to have the app run using WKWebView.
Is anyone aware of a workaround for this? Let me know if there's any more information I can provide.
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v4.4.7
Xcode version: Xcode 8.0 Build version 8S201h
I am using WKWebView but still this is issue is there.
Making HTTPS requests using WKWebView fail when the remote server uses a self-signed SSL certificate.
Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “dev.myapiserver.com” which could put your confidential information at risk
For a production build of an app this isn't be a problem, but during development self-signed certificates are common and as far as I can tell there's no configuration to allow insecure certificates?
Is there a workaround or possible to fix within the scope of this plugin?
I have found that scrollbars are not visible if content height is expanded async.
This example should explain the issue:
home.ts
import {Component} from '@angular/core';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
public items: string[] = [];
public constructor() {
this._generateItems(); // List has scrollbar
// setTimeout(() => this._generateItems(), 1000); // List has no scrollbar
}
protected _generateItems(): void {
for (let i = 1; i <= 100; i++) {
this.items.push(`Item ${i}`);
}
}
}home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home">
<ion-list>
<ion-item *ngFor="let item of items">
{{item}}
</ion-item>
</ion-list>
</ion-content>Hi guys! I noticed that after adding cordova-plugin-wkwebview-engine plugin to my project, my select widget stopped working.
Basically I have an Angular select, and when I tap it a wheel picker opens with a set of available values. Once I select a value and tap outside the wheel picker, nothing happens; the select label doesn't change and neither does its model value.
Any ideas on what could cause this issue and how could it be fixed?
I created this repo with some simple test code to reproduce the issue: https://github.com/4mp3R/wkwebview-test
If I remove the plugin from the package.json and config.xml, run ionic state reset and then run the app on an iOS device, the select works just fine.
ionic info:
Your system information:
Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 1.3.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.7
Xcode version: Xcode 7.3.1 Build version 7D1014
Even if target="_blank" is included, nothing happens when they are clicked.
I have an iframe within my app. It was working with UIWebView.
but now with WKWebView it gives me the error Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. when I try to access window.top from the inner iframe
I had error when open app. Please give me your solution. Thanks!
[4136:1781223] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSArrayM intValue]: unrecognized selector sent to instance 0x17598ce0'
*** First throw call stack:
(0x24ec9b0b 0x24686dff 0x24ecf455 0x24ecd0ab 0x24df7298 0xfd221 0x118e39 0x1047ed 0x10463b 0x2bead5f9 0x2be5d25b 0x2be5ea47 0x2be5e943 0x2be5e8df 0x2bd16b99 0x2be4638f 0x2bce22e3 0x2bce3d07 0x2837442b 0x283748a3 0x24e8b9e7 0x24e8b5d7 0x24e8993f 0x24dd81c9 0x24dd7fbd 0x263f4af9 0x29511435 0xe76b3 0x24a84873)
libc++abi.dylib: terminating with uncaught exception of type NSException
//main.m
int main(int argc, char* argv[])
{
@autoreleasepool {
int retVal = UIApplicationMain(argc, argv, nil, @"AppDelegate");
return retVal;
}
}
README.md currently states:
An easy way to verify that WKWebView has been installed on iOS is to check if window.indexedDB exists. For example:
if (window.indexedDB) {
console.log("I'm in WKWebView!");
} else {
console.log("I'm in UIWebView");
}
The thing is that window.indexedDB is true on iOS 10 whether an app is using this plugin or not.
Any better way to detect if the app itself is using WKWebView?
After drawing an image from the local file system (/www/img) to a canvas, I receive a CORS error when attempting to extract the image data from the canvas.
The error is:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data
Here is the code I used to reproduce. Creating the canvas copy is probably not necessary, but for completeness I'm including all the code.
//draw original image to canvas, and create a copy of the canvas
private drawImage (imageUri) {
this.image = new Image();
this.image.onload = () => {
this.canvasWidth = window.innerWidth - 40;
this.canvasHeight = (this.canvasWidth / this.image.width) * this.image.height - 40 ;
this.photoCtx.canvas.width = this.canvasWidth;
this.photoCtx.canvas.height = this.canvasHeight;
this.photoCtx.drawImage(this.image, 0, 0, this.image.width - 40, this.image.height - 40,
0, 0, this.canvasWidth, this.canvasHeight);
this.canvasCopy = this.photoCanvas.cloneNode();
this.ctxCopy = this.canvasCopy.getContext("2d");
this.ctxCopy.drawImage(this.image, 0, 0, this.image.width - 40, this.image.height - 40,
0, 0, this.canvasWidth, this.canvasHeight)
}
this.image.src=imageUri;
}
private getImageData () {
//throws CORS error
let imageData = this.ctxCopy.getImageData(0,0,this.canvasWidth, this.canvasHeight);
}
After installing the plugin, True Type fonts are no longer rendering. Please let me know if you need any additional details.
Executing ionic plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git --save on OS X gives this error: Error: Unexpected token } in JSON at position 3185.
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.2.0
Xcode version: Xcode 7.3.1 Build version 7D1014
Hi there,
after installing the plugin (ionic v1) we can start our app using livereload but no images are shown. This is however not the issue I am raising here. When running the app without livereload, the app crashes after a few seconds running on a device or in the simulator.
This does not happen when running on iOS8, only iOS9 - which stresses the fact that it is caused by the WKWebView plugin.
Error message shown in XCode:
2016-08-19 12:53:50.021 Wild Table[14578:448057] * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '* -[**NSPlaceholderArray initWithObjects:count:]: attempt to insert nil object from objects[0]'
* First throw call stack:
(
0 CoreFoundation 0x0000000106bd5d85 __exceptionPreprocess + 165
1 libobjc.A.dylib 0x000000010657adeb objc_exception_throw + 48
2 CoreFoundation 0x0000000106a8ea52 -[__NSPlaceholderArray initWithObjects:count:] + 290
3 CoreFoundation 0x0000000106aeb0b4 +[NSArray arrayWithObjects:count:] + 52
4 Wild Table 0x00000001032dc1ea -[CDVWKWebViewEngine quoteString:] + 138
5 Wild Table 0x00000001032dbf98 __43-[CDVWKWebViewEngine sendXHRResponse:path:]_block_invoke + 312
6 Foundation 0x00000001061ed630 __NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK + 7
7 Foundation 0x0000000106128805 -[NSBlockOperation main] + 101
8 Foundation 0x000000010610b725 -[__NSOperationInternal _start:] + 646
9 Foundation 0x000000010610b336 __NSOQSchedule_f + 194
10 libdispatch.dylib 0x000000010994d3eb _dispatch_client_callout + 8
11 libdispatch.dylib 0x000000010993382c _dispatch_queue_drain + 2215
12 libdispatch.dylib 0x0000000109932d4d _dispatch_queue_invoke + 601
13 libdispatch.dylib 0x0000000109935996 _dispatch_root_queue_drain + 1420
14 libdispatch.dylib 0x0000000109935405 _dispatch_worker_thread3 + 111
15 libsystem_pthread.dylib 0x0000000109c8a4de _pthread_wqthread + 1129
16 libsystem_pthread.dylib 0x0000000109c88341 start_wqthread + 13
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)
Sometimes, you just need to say: thank you. Finally someone figured out how to bypass that local XHR problem and you guys did that in such an easy but still powerful way. It just worked out of the box for me and finally I have all the benefits of real 60fps inside my app!
Only thing I am getting is:
Unknown resource gap:// is beein called.
When using the Slider component it displays erratic behavior especially when tilting the device from landscape to portrait. It's not resizing correctly is one example.
Working with Braintree's iframe-based ecommerce drop-in UI, the Braintree code was not able to execute a callback function in the parent Ionic code. This worked fine in UI Web View, but with WKWebView, the iFrame content rendered (e.g. Braintree form), but the braintree scripts were not able to execute any parent code, and there was no console error.
The first callback is related to an "OnReady" event, once the iframe Braintree form has rendered, but it isn't being executed, which might suggest this is more than a CORS issue. The background on Braintree is here: https://developers.braintreepayments.com/reference/client-reference/javascript/v2/best-practices
Code snippet of the Braintree callback is below, and we've tried it with CORS enabled and disabled in the API call. We've got all the braintree content security policy tags in place, the config.xml white listing (access-origin, allow-intent, allow-navigation to *), and the cordova white list plugin in place.
braintree.setup(vm.clientToken, "dropin", {
container: "payment-form",
enableCORS: true,
onPaymentMethodReceived: function (btResponse) {
$scope.submitPayment(btResponse);
},
onReady: function (integration) {
$log.debug("prepareOrder.onReady is firing ");
$scope.checkout = integration;
$scope.tokenStatus.received = "yes";
$scope.showPaymentButtons();
$scope.$apply();
},
onError: function (err) {
$log.error("Error: ");
$log.error(err);
}
});
For now we're reverting back to UIWebView, but would love to upgrade to WKWebView. Appreciate any advice on how to overcome this issue. Thanks
Hi,
Thank for the plugin. Really easy to integrate and it really improves the performance.
But, unfortunately, I face a CORS problem. I noticed that only requests where Access-Control-Allow-Origin set to * could be performed and are accepted/working.
For test purpose, I changed my server request header to * and was then able to use my application correctly with my server. But to be honest, I don't think that's a proper solution. Furthermore I also use the Yelp API V3 in my application, where the Access-Control-Allow-Origin is also not set to * (and they said they won't change it). So even if I change my server, I will still have a problem in another places in my application.
Is there then a way to fix that problem?
I tried WKWebView with other plugins before and faced the same problem, here what I documented on the Ionic forum.
https://forum.ionicframework.com/t/wkwebview-and-ionic2-proxy/59614
Or is there a way to bypass that problem with a proxy maybe ?
Thx in advance
We're currently facing an issue with the WKWebView and the InAppBrowser plugin where the loadstop event doesn't get fired properly when it gets redirected from one url to another. The workflow is:
Without the WKWebView, the loadstop even is fired properly with the correct url every time it redirects from one site to another. Below is the code that we're using.:
let browser: InAppBrowserRef = InAppBrowser.open(url, '_blank', options);
browser.addEventListener('exit', (event: InAppBrowserEvent) => {
console.log('exit', event.code, event.message);
this.showPreloader = false;
});
browser.addEventListener('loaderror', (event: InAppBrowserEvent) => {
console.log('load error', event.code, event.message);
this.showPreloader = false;
});
browser.addEventListener('loadstop', (event: InAppBrowserEvent) => {
console.log('load stop', event.url);
if (event.url.indexOf('/adfs/ls/') !== -1) {
browser.executeScript({
code: `
var userNameInput = document.querySelector("#userNameInput"),
loginForm = document.querySelector("#loginForm");
userNameInput.value = "${this.form.controls['email'].value}";
`
});
}
// this never gets fired. The only time we fire is we tap on the close button of the browser then it gets fired.
else if (event.url.indexOf('/login/ok') !== -1) {
this.showPreloader = false;
browser.close();
this.fetchUser();
}
});
After the splash page i get a white screen. This is my log
2016-09-11 14:03:24.962 Roids[6889:3679029] Apache Cordova native platform version 4.2.1 is starting.
2016-09-11 14:03:24.963 Roids[6889:3679029] Multi-tasking -> Device: YES, App: YES
2016-09-11 14:03:25.037 Roids[6889:3679029] CDVWKWebViewEngine: trying to inject XHR polyfill
2016-09-11 14:03:25.054 Roids[6889:3679029] CDVWKWebViewEngine will reload WKWebView if required on resume
2016-09-11 14:03:25.055 Roids[6889:3679029] Using WKWebView
2016-09-11 14:03:25.055 Roids[6889:3679029] [CDVTimer][handleopenurl] 0.120997ms
2016-09-11 14:03:25.058 Roids[6889:3679029] [CDVTimer][intentandnavigationfilter] 2.875030ms
2016-09-11 14:03:25.058 Roids[6889:3679029] [CDVTimer][gesturehandler] 0.122011ms
2016-09-11 14:03:25.074 Roids[6889:3679029] [CDVTimer][splashscreen] 15.367985ms
2016-09-11 14:03:25.088 Roids[6889:3679029] [CDVTimer][statusbar] 14.270961ms
2016-09-11 14:03:25.090 Roids[6889:3679029] [CDVTimer][keyboard] 1.357973ms
2016-09-11 14:03:25.090 Roids[6889:3679029] [CDVTimer][TotalPluginStartup] 35.274029ms
2016-09-11 14:03:25.102 Roids[6889:3679029] createNotificationChecker
2016-09-11 14:03:25.102 Roids[6889:3679029] not coldstart
2016-09-11 14:03:25.104 Roids[6889:3679029] active
2016-09-11 14:03:25.104 Roids[6889:3679029] PushPlugin skip clear badge
2016-09-11 14:03:27.298 Roids[6889:3679029] DEVICE READY FIRED AFTER 1349 ms
Looks like the app is not firing.
Hi,
to prevent caching, I add ?v=123.. behind my URLs. As soon as I do, it fails to load.
XHR polyfill: (2)
"file not found"
"templates/vehicle_maindata.html?v=13
When I remove ?v=13, it loads the url correctly. Is this something you guys can fix?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.