Entradas de Amin Mousavi

Hi David,

Thanks a lot. Fixed the issue. Fantastic help and support as always.

Hi David,

My colleague has managed to manually update the files and build the work with Capacitor. The "unsafe posfix" error he was getting was the result of a combination of a few other issues that I am explaining below. The parts he has asked me to include in the AB, are below. I am working on two but have no clue about the other two.

As he said, Capacitor does not have "deviceready" event, so he had replaced the event with one of our own to get rid of the error. To be able to continue using the AB UI, I recommended moving the commands we have in "Ready" event to "Start". I am working on this part and am partially successful so far. The only issue I have run into is that I am not able to define the variables we have in "Ready" in "Start". For instance, we have this variable in "Ready", but none of the below works when put in Start.

working in "Ready" SetVar "[Counter1]" "0" "Number" #Does not work in "Start" var window.App.Scope.Counter1 = 0; var window.App.RootScope.Counter1 = 0; #This one works, but I don't know how to read it in the AB parts var Counter1= 0;

The other issue is that we need to include "capacitor" in the "imgSrcSanitizationWhitelist" exception list. It has been done manually, but I was wondering, is there any way to include it somewhere in the AB so it is not necessary to update the AB builds.

Thanks a million

Hi David,

We have a game that is built by Cordova (Lingolish). Inside that game we have a challenge created by AB1 and as you guessed we open it in an iframe inside Lingolish. These two parts communicate through local storage and are working nicely together. However, we have some performance issues in the Cordova bit since it has become very graphic rich and one of the things that we are trying to improve the overall performance is migrating from Cordova to Capacitor. I am responsible for the AB part, and the guys working on Cordova migration came back to me with this error "unsafe" postfix" and said to fix the issue on Capacitor; they had tried editing the HTML and had no luck and were looking for my input. I searched AB for "security policy" and could not find anything and so bothered you with it.

I am working with them tomorrow to see how we can fix this issue. I will let you know how it proceeds and if we can fix it or if we fail to do so. Thanks a million for your help as always.

Thank you very much David for the speedy response. Very helpful as always. We have tried editing the HTML and had no luck. Will try the two other recommendations and hopefully one of them works.

Hi David,

Hope you are doing well.

I have created an app with AB1 that later on we merged with a Cordova app we already had. Now we are migrating the Cordova app to Capacitor. The AB1 part also fit with Capacitor nicely, we only have faced one issue that we could not fix.

How can we set a security policy meta tag in AB1? we need to add a scheme for capacitor, but we get the "unsafe" postfix when adding it manually.

Any thoughts or solutions are greatly appreciated.

Thanks

Hi Paolo,

Most of the work for notifications takes place at server side. You have to install the plugin on the client to generate the notification ID and post it on to the server. When you have the ID stored, you could use that to send notifications to the client. I used Firebase for this purpose and so the API key you see in the code below is coming from Firebase.

I have Improved the PHP files David has created for the server side to handle the payload formats needed for Android and ios users I leave the improved version below in case you find it of use.

<?php // Push notif keys // API key is provided by the Push service, for example Google Cloud Service. $apiKey = ''; // This is the endpoint URL for the Google Cloud Service API. $requestUrl = 'https://fcm.googleapis.com/fcm/send'; // Prepare the HTTP request authentication headers for Google $headers = array ( 'Authorization: key='.$apiKey, 'Content-Type: application/json' ); function send_notification($title, $message, $icon, $color, $image, $notif_ids, $version) { $version_finder = substr($version, -1); //to turn it into an int $version_finder = $version_finder + 0; // if version is even it is ios, else it is android. At this point we can prepare the push notification. includes title of the message, the message written below the title, the large image shown at the right end, // Prepare the HTTP POST data for the Google Cloud Service request: // Basically we need to provide the message payload and the registration // IDs which must receive our push notification message. // This works for android // when there is data in notification set, android does not read data set. ios on the other hand reads title and message only from notification set if($version_finder % 2 == 1) { $data = array('title' => $title, 'message' => $message,'icon' => $icon, 'color' => $color, 'image' => $image); $postData = array ( 'registration_ids' => $notif_ids, 'data' => $data ); } else { $notification = array('title' => $title, 'body' => $message, 'sound' => 'default', 'icon' => $icon, 'color' => $color); $postData = array ( 'registration_ids' => $notif_ids, 'notification' => $notification, 'priority' => 'high' ); } /* { $notification = array('title' => $title, 'text' => $message, 'sound' => 'default', 'icon' => $icon, 'color' => $color); $postData = array ( 'registration_ids' => $notif_ids, 'notification' => $notification, 'priority' => 'high' ); } */ // Setup CURL to make the Google Cloud Service HTTP request $request = curl_init(); curl_setopt($request, CURLOPT_URL, $GLOBALS['requestUrl']); curl_setopt($request, CURLOPT_POST, true); curl_setopt($request, CURLOPT_HTTPHEADER, $GLOBALS['headers']); curl_setopt($request, CURLOPT_RETURNTRANSFER, true); curl_setopt($request, CURLOPT_POSTFIELDS, json_encode($postData)); // And send the push notification! $result = curl_exec($request); if (curl_errno($request)) { //echo 'Push error: '.curl_error($request); // if there is an error we want it to be logged file_put_contents('/var/log/notification.log', "ERROR: ".curl_error($request)."\n", FILE_APPEND); } else { // removed as we do not need to display the returning results for every notif call (we can consider having it back on for web) //print_r($result); $message_failure = json_decode($result, True); //keeps the log date_default_timezone_set("Europe/Dublin"); $logdate = date("c"); $logtext = 'success:'.$message_failure[success].'--msg--'.$message.'--id--'.$notif_ids[0].'--'.$logdate; file_put_contents('/var/log/notification.log', "$logtext\n", FILE_APPEND); } curl_close($request); return $message_failure[failure]; }

Hi David,
I have absolutely no clue how it has got there. I minify and unminified all the inline css section to make classes comparable and then searched for classes one by one an a two hours process cleaned it all up. I debugged and things look okay so far. I have an eye on it and if it happened again will leave the details here.
Thanks for the quick response and brilliant support as always

Hi David,
Yes it is the AB1, well, it is 3000 line of CSS at the whole app, that is why cleaning it up is very hard.
One of the views can be viewed here

https://lingolish.com/global-leaderboard-tips.html

If you inspect the leaderboard part in the iframe that is build by AB1, you can see that #Top10view has been repeated many times, and when I open inline css section I see all the css duplicated like this (I only copy the top parts of each portion)
/*! * This file is part of App Builder * * ©2019 App Builder - https://www.davidesperalta.com */ /* App auto generated CSS */ html, body { width: 320px; height: 480px; } #Loading { background-color: #e25a5e; } #LoadingGif { position: absolute; top: 65.83%; left: 35.00%; width: 30.00%; height: 18.33%; } #Top10View { background-color: #3B5900; background-size: contain; max-height: 100vh; max-width: 100vw; } #table_of_data { position: absolute; top: 21.67%; left: 10.00%; width: 80.00%; height: 68.33%; } . . . /* App inline CSS */ /*! * This file is part of App Builder * * ©2019 App Builder - https://www.davidesperalta.com */ /* App auto generated CSS */ html, body { width: 320px; height: 480px; } #Loading { background-color: #e25a5e; } #LoadingGif { position: absolute; top: 65.83%; left: 35.00%; width: 30.00%; height: 18.33%; } #Top10View { background-color: #3B5900; background-size: contain; max-height: 100vh; max-width: 100vw; } #table_of_data { position: absolute; top: 21.67%; left: 10.00%; width: 80.00%; height: 68.33%; } . . . /* App inline CSS */ /*! * This file is part of App Builder * * ©2019 App Builder - https://www.davidesperalta.com */ /* App auto generated CSS */ html, body { width: 320px; height: 480px; } #LoadingGif { position: absolute; top: 65.83%; left: 35.00%; width: 30.00%; height: 18.33%; } #Top10View { background-color: #3B5900; background-size: contain; max-height: 100vh; max-width: 100vw; } Before it catches my eyes and I can find time to attend to it, it has created 10-12 copies and now I have 83000 line of css to deal with.
Your help is very much appreciated.

Hi David,

At inline CSS section, many copies of my CSS has been created and when I noticed there where about 13 copies each slightly different from the other.

All have this part in common though.

/* App inline CSS */ /*! * This file is part of App Builder * * ©2020 App Builder - https://www.davidesperalta.com */ /* App auto generated CSS */

Is there a way I can get rid the unnecessary duplicated copies?

Thanks a mill

Hi All,

I am using bitbucket and sourcetree for the projects I do with AB. There is absolutely no hassle in using version controls for AB as it stores its data in xml format I easily can follow the changes and commits on sourcetree. Only one thing, since AB updates the store date each time you hit save, when you work with a team on the same file it is a source of conflict, but a very easy one to resolve. hope it helps

Having the sample running you may find this document helpful

https://firebase.google.com/docs/cloud-messaging/http-server-ref
android and ios accept two different notification payload format. In my case I really wanted to send the icon that android accepts but ios does not, so I read user device platform and send notifications with different formats like below.

// when there is data in notification set, android does not read data set. ios on the other hand reads title and message only from notification set if($version_finder == 'ios') { $notification = array('title' => $title, 'text' => $message, 'sound' => 'default', 'icon' => $icon, 'color' => $color); $postData = array ( 'registration_ids' => $notif_ids, 'notification' => $notification, 'priority' => 'high' ); } else { $data = array('title' => $title, 'message' => $message,'icon' => $icon, 'color' => $color, 'image' => $image); $postData = array ( 'registration_ids' => $notif_ids, 'data' => $data ); }

Having the sample running you may find this document helpful

https://firebase.google.com/docs/cloud-messaging/http-server-ref
android and ios accept two different notification payload format. In my case I really wanted to send the icon that android accepts but ios does not, so I read user device platform and send notifications with different formats like below.

// when there is data in notification set, android does not read data set. ios on the other hand reads title and message only from notification set if($version_finder == 'ios') { $notification = array('title' => $title, 'text' => $message, 'sound' => 'default', 'icon' => $icon, 'color' => $color); $postData = array ( 'registration_ids' => $notif_ids, 'notification' => $notification, 'priority' => 'high' ); } else { $data = array('title' => $title, 'message' => $message,'icon' => $icon, 'color' => $color, 'image' => $image); $postData = array ( 'registration_ids' => $notif_ids, 'data' => $data ); }

Hi David,
Thank you very much for your help. Before I get your answers I actually did another work around, I implemented the service I wanted on the server side and opened the link on the app. That being said, I am still very interested in getting that to work, so I will follow your instructions and will keep you posted here on what I find.
Thanks again for your excellent customer care as always

Hi David,

I am trying to catch a link event in app builder to fire an event but I have no success. I suspect it is because I am not listening to the right event name. Any help is very much appreciated.

This is the link I have included in the HTML control

<a href="#" onclick="return false;" id="test_id">Test label</a>
And I have this event listener in the ready event StartJS $('#test_id').on('touchstart click', function (event) { if (event.type == "touchstart") $(this).off('click'); window.App.Scope.test_function(); }); EndJS
But I can not get to run the test function like this! Any help is much appreciated!

Is it mandatory for your purpose to handle the data on the client side? I find managing the large amount of data on the client side frustrating! Great to know you have sorted the issue out :)