WKWebview v3.0.0


#21

Hi,

I tested this plugin with the cordova plugin media.

I can build my app, but when I try to install and run it, it crashes with this message in xCode:

Terminating app due to uncaught exception ‘NSUnknownKeyException’, reason: ‘[<WKWebViewConfiguration 0x1701b8640> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key _requiresUserActionForMediaPlayback.’
*** First throw call stack:
(0x18358d1b8 0x181fc455c 0x18358ce80 0x183fc18f0 0x100110980 0x1001b0d04 0x1001e4c90 0x1001e4394 0x1001e486c 0x1001e277c 0x1001015e0 0x189442924 0x1894424ec 0x189448c98 0x189446138 0x1894b868c 0x1001e6950 0x1001012fc 0x1894b46a4 0x1896c4a98 0x1896ca808 0x1896df104 0x1896c77ec 0x18516392c 0x185163798 0x185163b40 0x18353ab5c 0x18353a4a4 0x1835380a4 0x1834662b8 0x1894ad7b0 0x1894a8534 0x1001011ec 0x1824495b8)
libc++abi.dylib: terminating with uncaught exception of type NSException

Do you have any idea how I can fix this?

Regards


#22

@toufic_zayed could you explain more about this?
What other plugins are you using?
Could you isolate it to a smaller demo?


#23

Hi,

I’ve found what caused the problem: it’s the background plugin in last version 0.7.2.

I reverted to 0.7.1 and it’s ok.

Regards.


#24

On the other hand, the media plugin causes memory leak and my app crash after some time, when playing large file.

It’s not related to wkwebview though, it crashes the same with safari.

I tried to use HTML5 audio, but I encounter CORS issue: most of the mp3 file I try to reach are podcasts on the internet, and most of them doesn’t implement CORS at server level.

Do you know how I can avoid CORS issue with wkwebview? Is there a possibility to embed a local proxy on the app, so that I simulate CORS?

Regards.


#25

Hi Guys,

I get this
: cordova plugin install https://github.com/driftyco/cordova-plugin-wkwebview-engine --save - done!

But no plugin is actually installed

When I try to install with:
cordova plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine --save - done!

Then I get this version of WKWEBVIEW:
cordova-plugin-wkwebview-engine 1.1.2-dev “Cordova WKWebView Engine”

Here is my info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 3.0.0-beta.2
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.2.2
Xcode version: Xcode 8.2.1 Build version 8C1002 

cordova-plugin-calendar 4.5.5 "Calendar"
cordova-plugin-camera 2.3.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.6 "Console"
cordova-plugin-device 1.1.5 "Device"
cordova-plugin-network-information 1.3.2 "Network Information"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-sqlite-2 1.0.4 "SQLitePlugin"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-wkwebview-engine 1.1.2-dev "Cordova WKWebView Engine"
ionic-plugin-keyboard 2.2.1 “Keyboard”


#26

Try remove an add platforms and then add plugin. Or remove platforms, add plugin, add platforms. One of those worked for me.


#27

I think that Version 1.1.2-dev is the version “v3.0.0”. In github there is a branch 3.0 containing this version. I also think, that “plugin add” is correct, “plugin install” does not install anything. Confusing…


#28

Thanks guys, I think that Version 1.1.2-dev is the version “v3.0.0” too.

But my version is not triggering Platform Ready then …

I’ve got a infinite spinner loading…

I tried of course to platform remove and add.


#29

After adding in config.xml :

<allow-navigation href="http://localhost:8080/*"/>
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

All went perfectly !


#30

This might be a dumb question… but does this work with ionic package from windows? :grimacing:


#31

Hi,

after fixing some plugins because of compatibility issues, my app is very fast on my iPhone 5s. The CPU and memory consumption have improved a lot!

But on an iPhone 5c, it seems that using wkwebview is much slower than safari.

Do you know if there are issues with wkweview on the 5c?


#32

It’s for use with iOS only


#33

@jackvial, sorry I mean the ionic package service https://docs.ionic.io/services/package/ that builds the iOS ipa online.


#34

Will try to get to it on the upcoming days. What I can already tell you is that it mostly happen on a page that contains several ion-slide when each one of those contains ion-scroll.


#35

Hi,
I’m trying to get the local image file with Cordova camera from Native Uri but failed after installing WKWebbiew.
Does someone know how to get local image file starting assets-library://asset/ ?
Thanks,


#36

I just tried the WKWebview v3.0.0.

I understand that WKWebview doesn’t accept CORS requests, therefore I modified my the header of my server and everything worked, fine.

But as I already said last year, what about third party services, like YELP, which don’t and don’t want to accept CORS requests?

In case there is absolutely no solutions in the plugin itself, could you plz advice on some workarounds.


#37

Getting white screen when I update app to 1.1.2 version I :frowning:

  <plugin name="cordova-plugin-wkwebview-engine" spec="1.1.2"/>

Getting lots of CORS errors:
This is console screenshot when debugging build using safari developer tools.

Config.xml have following tags:

<allow-navigation href="http://localhost:8080/*"/>
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

Config.xml looks like this

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="net.buser.weatherspork" ios-CFBundleVersion="0.17.03.24.25" version="0.5.7" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <name>WeatherSpork</name>
  <description>
        WeatherSpork Application
    </description>
  <author email="support@weatherspork.com" href="http://weatherspork.com/">
        BuserNet Consulting LLC
    </author>
  <content src="index.html"/>
  <allow-navigation href="http://localhost:8080/*"/>
  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine"/>
  </feature>
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
  <feature name="SocialSharing">
    <param name="ios-package" value="SocialSharing"/>
  </feature>
  <feature name="SocialSharing">
    <param name="android-package" value="nl.xservices.plugins.SocialSharing"/>
  </feature>
  <feature name="SocialSharing">
    <param name="wp-package" value="SocialSharing"/>
  </feature>
  <feature name="SplashScreen">
    <param name="ios-package" value="CDVSplashScreen"/>
    <param name="onload" value="true"/>
  </feature>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="14"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <plugin name="cordova-plugin-device" source="npm" spec="1.1.5"/>
  <plugin name="cordova-plugin-splashscreen" source="npm" spec="4.0.2"/>
  <plugin name="cordova-plugin-statusbar" source="npm" spec="2.2.2"/>
  <plugin name="cordova-plugin-wkwebview-engine" spec="1.1.2"/>
  <plugin name="cordova-plugin-x-socialsharing" spec="5.1.2"/>
  <plugin name="cordova-plugin-network-information" spec="1.3.2"/>
  <plugin name="cordova-plugin-geolocation" spec="2.4.2">
    <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="Need geolocation to track sun and moon position."/>
  </plugin>
  <platform name="android">
    <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png"/>
    <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png"/>
    <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png"/>
    <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png"/>
    <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png"/>
    <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png"/>
    <splash density="land-hdpi" src="www/res/screen/android/splash-land-hdpi.png"/>
    <splash density="land-ldpi" src="www/res/screen/android/splash-land-ldpi.png"/>
    <splash density="land-mdpi" src="www/res/screen/android/splash-land-mdpi.png"/>
    <splash density="land-xhdpi" src="www/res/screen/android/splash-land-xhdpi.png"/>
    <splash density="port-hdpi" src="www/res/screen/android/splash-port-hdpi.png"/>
    <splash density="port-ldpi" src="www/res/screen/android/splash-port-ldpi.png"/>
    <splash density="port-mdpi" src="www/res/screen/android/splash-port-mdpi.png"/>
    <splash density="port-xhdpi" src="www/res/screen/android/splash-port-xhdpi.png"/>
  </platform>
  <platform name="ios">
    <config-file mode="add" parent="ITSAppUsesNonExemptEncryption" target="*-Info.plist">
      <false/>
    </config-file>
    <icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57"/>
    <icon height="114" platform="ios" src="www/res/icon/ios/icon@2x.png" width="114"/>
    <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40"/>
    <icon height="80" platform="ios" src="www/res/icon/ios/icon-40@2x.png" width="80"/>
    <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50"/>
    <icon height="100" platform="ios" src="www/res/icon/ios/icon-50@2x.png" width="100"/>
    <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60"/>
    <icon height="120" platform="ios" src="www/res/icon/ios/icon-60@2x.png" width="120"/>
    <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" width="180"/>
    <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72"/>
    <icon height="144" platform="ios" src="www/res/icon/ios/icon-72@2x.png" width="144"/>
    <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76"/>
    <icon height="152" platform="ios" src="www/res/icon/ios/icon-76@2x.png" width="152"/>
    <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29"/>
    <icon height="58" platform="ios" src="www/res/icon/ios/icon-small@2x.png" width="58"/>
    <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87"/>
    <splash src="www/res/screen/ios/Default@2x~universal~anyany.png"/>
    <splash src="www/res/screen/ios/Default@2x~universal~comany.png"/>
    <splash src="www/res/screen/ios/Default@2x~universal~comcom.png"/>
    <splash src="www/res/screen/ios/Default@3x~universal~anyany.png"/>
    <splash src="www/res/screen/ios/Default@3x~universal~anycom.png"/>
    <splash src="www/res/screen/ios/Default@3x~universal~comany.png"/>
  </platform>
  <platform name="wp8">
    <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99"/>
    <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159"/>
    <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768"/>
  </platform>
  <platform name="windows">
    <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150"/>
    <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30"/>
    <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50"/>
    <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120"/>
    <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44"/>
    <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106"/>
    <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70"/>
    <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71"/>
    <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170"/>
    <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360"/>
    <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310"/>
    <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310"/>
    <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744"/>
    <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620"/>
    <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152"/>
  </platform>
  <platform name="android">
    <allow-intent href="market:*"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>
  <access origin="*"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <engine name="android" spec="~6.0.0"/>
  <engine name="ios" spec="~4.3.1"/>
</widget>

Cordova Version Used:

6.5.0

Route configuration:

.state('app', {
                    url: '/app',
                    abstract: true,
                    templateUrl: 'component/sidenav/sidenav.html',
                    controller: 'sidenavController as sidenavCtrl'
                })
                .state('app.dashboard', {
                    url: '/dashboard',
                    views: {
                        'menuContent': {
                            templateUrl: 'component/dashboard/dashboard.html'
                        }
                    }
                })
                .state('app.routeprofile', {
                    url: '/routeprofile',
                    views: {
                        'menuContent': {
                            templateUrl: 'component/route-profile/routeProfile.html'
                        }
                    }
                })

Am I missing anything?


#38

Found that version 1.1.2-dev is working but 1.1.2 is failing .

But if I specify plugin like this then its not able to install it

<plugin name="cordova-plugin-wkwebview-engine" spec="1.1.2-dev"/>

But if id install it like this then it install’s 1.1.2-dev and it works.

<plugin name="cordova-plugin-wkwebview-engine" spec="https://github.com/driftyco/cordova-plugin-wkwebview-engine"/>

I wonder if there is a way to specify version so that it does not break by automatically updating to new releases.


#39

1.1.2-dev is failing in simulator with following screen

But works on real device. Not sure what’s going on… :frowning:


#40

Unable to run the ionic blank app on MAC with or without wkwebview:

Your system information:

Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.10.0
Xcode version: Xcode 8.2.1 Build version 8C1002

My failed attempts to run the blank app:

ionic start Test blank --v2
cd Test
ionic platform add ios
ionic prepare ios
ionic emulate ios --consolelogs
—> “white screen of death” instead of “the world is your oyster”

ionic plugin rm cordova-plugin-wkwebview-engine
ionic plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git --save
–> Installing “cordova-plugin-wkwebview-engine” for ios
–> Error: The header content contains invalid characters
ionic prepare ios

LAUNCH XCODE from/Users/apple/Desktop/don/ionic2/Test/platform/ios/.xcodeproj
In xCode: Run on simulator
—> “white screen of death”

Don