Google Android Play Store Target API Requirement Change

From Google:

Hello Google Play Developer,

This is a reminder that starting November 1, 2019, updates to apps and games on Google Play will be required to target Android 9 (API level 28) or higher. After this date, the Play Console will prevent you from submitting new APKs with a targetSdkVersion less than 28.

Configuring your app to target a recent API level ensures that users benefit from significant security and performance improvements, while still allowing your app to run on older Android versions (down to the minSdkVersion).

Android 9 (API level 28) introduces a number of changes to the Android system. The following behavior changes apply exclusively to apps that are targeting API level 28 or higher. Apps that set targetSdkVersion to API level 28 or higher must modify their apps to support these behaviors properly, where applicable to the app.

To target the api in your Cordova app set these min and target version in config.xml

    <preference name="android-minSdkVersion" value="23" />
    <preference name="android-targetSdkVersion" value="28" />

iOS Deprecated API Usage Warning Ionic using UIWebView

Apple will no longer support web apps that use UIWebView. The apps and libraries need to be migrated to use WkWebView.

The latest Ionic already uses WkWebView, but several Cordova plugins still rely on UIWebView which is a problem.

https://ionicframework.com/docs/v3/wkwebview/

If you’re using Ionic you need to upgrade to iOS Cordova 5

cordova platform remove ios
cordova platform add ios@5.0.0

Also you might need to remove additional plugins that use UIWebView such as inappbrowser.

cordova plugin rm cordova-plugin-inappbrowser

More information about the breaking changes can be found here:

https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

How to Enable Preflight CORS in PHP for Angular HTTP requests

When testing Ionic or Angular app you might need to set CORS policy to access a service on a different domain. One way to do this in PHP for testing is to send OK responses for all OPTIONS requests. (If you are testing POST and GET requests)

In your php file set:

// change to your app origin
header('Access-Control-Allow-Origin: http://localhost:8100');
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Accept-Language, X-Authorization");
header('Access-Control-Max-Age: 86400');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // The request is using the POST method
    header("HTTP/1.1 200 OK");
    return;

}

Don’t ship this test code, this is just for your internal testing of http requests.

How to mask and unmask input element password type in Ionic / Angluar

How to mask and unmask input element password type in ionic/angular/js:

  
this.togglePasswordField = function () {
     console.log("toggle password field called");
     if (document.getElementById("passwordElement").type == "password") {
        document.getElementById("passwordElement").type = "text";

         document.getElementById("passwordHideIcon").classList.remove("ion-eye");
         document.getElementById("passwordHideIcon").classList.add("ion-eye-disabled");
     }
     else {
          document.getElementById("passwordElement").type = "password";
          document.getElementById("passwordHideIcon").classList.remove("ion-eye-disabled");
          document.getElementById("passwordHideIcon").classList.add("ion-eye");     
          }
    }

This way only uses basic html element manipulation.

passwordHideIcon element is a button that calls the function and uses the ionic icon for eyes and eyes disabled.

How to Disable Android Back Button in Ionic 1 / Angular

To disable back button in Android put one of the codes below in your app.js in the .run function.

// app.js

// Disable Back in Entire App
$ionicPlatform.registerBackButtonAction(function(){
  event.preventDefault();
}, 100);

Or Conditionally Disable Back:

// app.js

$ionicPlatform.registerBackButtonAction(function(){
  if($ionicHistory.currentStateName === 'someStateName'){
    event.preventDefault();
  }else{
    $ionicHistory.goBack();
  }
}, 100);

Ionic Slider Input Doesn’t Work in Popups on iOS

The issue seems to be in the modal.js file of the ionic library

https://github.com/driftyco/ionic/blob/1.x/js/angular/service/modal.js#L194

The temporary fix:

var isInScroll = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'scroll');
if (isInScroll !== null && !isInScroll) {
    e.preventDefault();
}

Another possible solution is to add the class=”scroll” to your input element that is of type range.

Link to the github issue.

How To Build Production and Release Version of Ionic App

To make the production and release version of Android app using Ionic run:

ionic cordova build ios --prod --release

This should run the same as the expanded version:

ionic cordova build ios --minifycss --optimizejs --minifyjs --release

You may need to run with sudo in front of the command if you have permission issues.

For iOS builds the –release flag does not seem to do anything in my testing. I could not find any official documentation explaining what this flag does to iOS builds.

For more detail visit the ionic documentation on building
https://ionicframework.com/docs/cli/commands/cordova-build

JS Infinite Alert Prank Code gets Japanese Girl in Serious Trouble

Ars Technica Reporting:

Explaining her actions, the girl said that she’d run into such pranks herself and thought it would be funny if someone clicked the link.

The Twitter user referenced in the message, 0_Infinity_, has a protected account, but the user left a message in their bio field suggesting that they don’t understand why there’s so much fuss about the script today, as it was written in 2014.

To protest the actions of the Japanese police and the absurdity of calling this act a crime, Tokyo developer Kimikazu Kato has published on GitHub a project called Let’s Get Arrested. Forking the project and then creating a branch named gh-pages will create a simple GitHub-hosted website that contains nothing but the infinitely looped alert, putting criminality at our fingertips.

for ( ; ; ) {
    window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/  )\n(ノΠU\n何回閉じても無駄ですよ~ww\nm9(^Д^)プギャー!!\n byソル (@0_Infinity_)")
}

Calling her a criminal is totally absurd.

How To Blur Popup Background in Ionic/Angular

How To Blur Popup Background in Ionic/Angular using manual method:

To achieve this in Ionic 1, you need to set the main div’s class (that is displayed in the background of your popup) to use the blur css class .

CSS:

// css file 

.blur{
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

HTML:

//In your html set the main div of your app to use a dynamic class
 
<div ng-class="blurClass"></div>

JS Controller:


//In JS file set the blur variable to the blur class
 
$scope.blurClass = "blur";

// when done just set the blur to false

$scope.blurClass = false;

How To Open $ionicPopover Popup from Controller

How To Open $ionicPopover from Controller programmatically without a mouse click event:


var self = this; // store reference to 'this' controller object

this.openCustomPopover = function ($event) {

        $event = document.getElementsById('myElementID'); // html element ID 

        $ionicPopover.fromTemplateUrl('popovers/myhtmlpopover.html', {
                scope: $scope
            }).then(function (popover) {
                console.log('in the popover then function');
                self.popover = popover;
                self.popover.show($event);
            });
        }

You can call this function from your controller without a true click event, by faking the $event object.

How to Capture Enter View Event in Directive in Ionic/Angular

How to Capture Page View Enter Event in Directive in Ionic 1 Angular 2?

Directives do not get the normal $ionicView.enter events like controllers. You have to register for the parent view event using $ionicParentView.enter.

$scope.$on("$ionicParentView.enter", function (event, data) {
    // will fire enter event in your directive              
});

Note: Do not import $ionicParentView into your directive, this will cause your code to break.

Good luck!