Running Javascript not working on Xcode

[julian]

I understand .js file don’t run locally. However, when I compiled my app using PhoneGap, the .js I’m using works perfectly, even though it’s technically local, running on the iPad.

The problem is I need (we all need, actually) to ditch PhoneGap given that is uses Apple’s iOS 12 SDK and Apple is requiring to use SDK 13 starting in April.

So, I created a project file on Xcode using the Hype templates that have been circulating in this forum and got the app to run. However, the .js file is not running

Any way to solve for that? Thank you.

[Djon]

I have built a few apps with Hype and Xcode, but never run into this. So I’m curious what you have done. Could you show something?

[julian]

When I view the application online I see this:

You can check how it should behave at http://www.alphapodapp.com/app2/

But when I copy the same files to Xcode (and change the name of the resources folder from xxxxx.hyperesources to xxxx_resources, otherwise Xcode crashes) I get the app to run fine, except that particular function of scratching a hidden image using a .js file looks like this (2nd attachment)

As I said earlier, I know .js files do not work locally, but this should be able to work on an Xcode built app but somehow the .js file is not loading.

[Photics]

Exporting your project with the “Organized Assets” export script might solve the problem…

• https://tumult.com/hype/export-scripts/

Previous discussion on the matter here…

• xCode 11.1 crashes after opening existing projects

[julian]

Thank you for your reply!

Unfortunately this doesn’t work either. I get same result in Xcode Simulator. All I see is the gray container

[h_classen (Hans-Gerd Claßen)]

you may have specified an absolute url (to an image …) in your config for the scratchscript¿
if so: renaming the resourcesfolder will make it break …

[Photics]

@julian

All I see is the gray container

Well, if that happened to me, my next step would likely be to check the logs...

Until the bug gets fixed, Xcode's log might be a mess.

I'm not sure, but that might be fixed in the beta version. (I'm using 11.3.1.)

But I'd also try using Safari to debug a WKWebView.

If I'm having trouble with a web project, I usually look at the Console log to see what's going on. That's also possible with a WKWebView.

[MarkHunte]

I suspect the issue is with the canvas creation on the webview. i have not done this before so not sure how iOS wkwebviews deal with them… anyone.

[h_classen (Hans-Gerd Claßen)]

alphapod.hyperesources

such specifed path will not be resolved if you edit the resources-folder-path …

[MarkHunte]

Yep, but what ever they did the scene looks like it loads but not the canvas.

[jonathan (Jonathan Deutsch)]

You’ll definitely want to check the web developer console in the method that @Photics described; it will likely point to what is going wrong. I can already see on the working website version itself there are many resource not loaded errors which might indicate that there’s something unexpected in your setup:

If you change the resources folder name, then you will also need to change corresponding code in the .html file, and potentially the *_hype_generated_script.js file as well, like @h_classen recommended.

Another possibility is that if the app is expecting to make network calls to get resources to run that part of the script, you may need to enable iOS app permissions for outgoing connections in the ‘Signing & Capabilities’ section of the app target.

[julian]

Thank you everyone for your replies. On the version that I complied using Organized Assets:

http://www.alphapodapp.com/app3/

There are no errors in the Console (other than the favicon in the root folder.)

All the folder names and paths are correct since the site works perfectly fine online.

In Xcode, when I’m running the simulator, I get these errors:

2020-03-02 16:01:58.598577-0500 AlphaPod[51534:3150014] [assertion] Error acquiring assertion: <NSError: 0x60000106a3a0; domain: RBSAssertionErrorDomain; code: 2; reason: “Client is missing required entitlement”> {

userInfo = {

RBSAssertionAttribute = <RBSLegacyAttribute: 0x7f848b0196f0; requestedReason: MediaPlayback; reason: MediaPlayback; flags: PreventTaskSuspend | PreventTaskThrottleDown | WantsForegroundResourcePriority>;

}

}

2020-03-02 16:01:58.598689-0500 AlphaPod[51534:3150014] [ProcessSuspension] 0x102ffd640 - ProcessAssertion() PID 51534 Unable to acquire assertion for process with PID 51534

2020-03-02 16:01:58.599294-0500 AlphaPod[51534:3149782] [ProcessSuspension] 0x102ffd640 - ProcessAssertion::processAssertionWasInvalidated()

2020-03-02 16:01:58.600109-0500 AlphaPod[51534:3150014] [assertion] Error acquiring assertion: <NSError: 0x60000108c7e0; domain: RBSAssertionErrorDomain; code: 2; reason: “Client is missing required entitlement”> {

userInfo = {

RBSAssertionAttribute = <RBSLegacyAttribute: 0x7f8488c10f40; requestedReason: MediaPlayback; reason: MediaPlayback; flags: PreventTaskSuspend | PreventTaskThrottleDown | WantsForegroundResourcePriority>;

}

}

2020-03-02 16:01:58.600199-0500 AlphaPod[51534:3150014] [ProcessSuspension] 0x102ffd690 - ProcessAssertion() PID 51534 Unable to acquire assertion for process with PID 51537

2020-03-02 16:01:58.600289-0500 AlphaPod[51534:3149782] [ProcessSuspension] 0x102ffd690 - ProcessAssertion::processAssertionWasInvalidated()

[MarkHunte]

Using the same web inspector, check to see if the canvas is being added and if so is it in the correct place compared to where it is being placed in the online version.

[julian]

Not sure I follow. You mean check if the canvas in the Xcode version is being added?

[MarkHunte]

What I mean is. In the inspector that you used to look at the console via safari. Use it’s elements tab and do a search for canvas. See if it is being created and populated. It may not be…

[julian]

But that would only check if the canvas is correct on the online version. The online version is working already. The problem is on Xcode.

http://alphapodapp.com/app3/

You’ll see the .js file works fine. So that’s why I was confused, how can I check the Canvas in Xcode?

[MarkHunte]

Read @Photics post above about using Safari.app with Xcode to inspect the running app.

[julian]

Not sure how that works.

One thing I noticed is that when I use Organized Assets function, it creates the wrong path on the.js file.

For example it creates this on the js file:

background’:"./"

when it should be

background’:"./images/" (which points to the images folder, which is where it should be pointing)

If I don’t manually do this change, then it doesn’t work. So it’s a bug in the script.

[jonathan (Jonathan Deutsch)]

If you are using a ${resourcesFolderName} then it will not work with export scripts that modify the paths to resources, since such a magic variable is a simple text substitution assuming only one resources folder and it not being split up.

You may just want to upgrade to the macOS 10.15.4 beta with the Xcode 11.4 beta as well. In my testing the .hyperesources crash no longer happens, so if that is the reason your file no longer works then that would be solved.

Otherwise you will either need to post the xcode project or connect to the web view via the Safari developer tools and inspect the log for errors.

[julian]

I hired a dev via UpWork and he fixed it. The WKWebView swift file need to have permissions to execute the javascript

    wconfiguration.mediaTypesRequiringUserActionForPlayback = []
    wconfiguration.setValue(true, forKey: "_allowUniversalAccessFromFileURLs")
    
    webView =  WKWebView(frame: .zero, configuration: wconfiguration)
    
    let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
    webView.loadFileURL(url, allowingReadAccessTo: url)
    var request = URLRequest(url: url)
    request.addValue("*", forHTTPHeaderField: "Access-Control-Allow-Origin")
    webView.load(request)