mobile web debugging in desktop / in mobile

While  developing mobile web sites, the behavior of real mobile browsers are a litter different with desktop's. While debugging, Developers  are using console.log. But developers cannot see logs in mobile phones. It makes it hard to figure out ,when unexpected errors occurred in phones . 

Like desktop,  there are solutions in iOS and android. 

1. android 

    ref: https://developer.chrome.com/docs/devtools/remote-debugging/

2. ios debugging. Window  and osX

• iOS mobile debugging is more complicated then android 
• Install iTunes
• Install Node.js
• open command window or powershell as Admin Mode
• install debugging adaptor 
• npm install remotedebug-ios-webkit-adapter -g
  
  
• run below command , if you see 'firewall warnning', allow 'access'
• remotedebug_ios_webkit_adapter --port=9000 
• In chrome,  type: chrome://inspect/#devices 
• discover network target : configure 
• add "localhost:9000"
• Enable web inspector on your iOS device.
• Settings > Safari > Advanced : enable web inspector( 웹속성)
• Browse sites.
• you can see lists in PC chromes. 
• click inspect. 

* Another ( no additional Install)  : mobile debug in mobile

• ref: https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html)
• No install programs  , in Chrome (mobile) 
• Type "chrome://inspect" in url then you can see below screen 
• Click 'logging start'

•  In new tab , browsing your web application,  You can see logs in  inspect Tab. 

How to send rich pushes to ios and android in firebase api

Firebase cloud message  (FCM) is very easy to use. You can send messages on firebase console. but if you want to send rich messages, you cannot them in firebase console. You need to use firebase message api. and You must send rich messages to each platforms (iOS, android) because json structures are different each other. 

 

•  Android & iOS common part  

API: https://fcm.googleapis.com/fcm/send

Method: POST

Headers:

           Content-Type: application/json

           Authorization: key={your key }

 

• Android (body)  
  • If title,body element are in outside of data node.   app cannot receive messages in background state.

{
"to" : "/topics/subject_android",

"data": {
    "title": “Your title",
     "body": “Your messages",
     "image": “https://image full urls "
    }
}

 

 

• iOS  
  • title, body  can be in notification-node , data-node contains image urls.  you must add ‘mutable_content’ node. This node will be converted to ‘mutable-content’ in app and call  ios push extention-component. ( You can show image in push.  You need more codings)
  •  

{

"to" : "/topics/subject_ios",
"content_available": true,
"mutable_content": true,
"priority": "high",

"notification": {

"title": “Your title",
"body": “Your messages",
"badge": 1,
"sound": "cheering.caf"

 

},
"data": {

 "image": “https://image full urls "

 

}

}

App Transport Security has blocked a cleartext HTTP

Error Message: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

Allow all sites 


// 전체 허용 
<key> NSAppTransportSecurity </key>
  <dict> 
    <key> NSAllowsArbitraryLoads </key>
      <true /> 
    </dict>


Allow specific sites


<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

 

firebase rich push notification iOS example links

firebase ios push notification example links

push extension (chinese)

https://github.com/maquannene/UserNotifications

image push (korean)

http://taesulee.tistory.com/4

** other sample

https://www.pluralsight.com/guides/swift/creating-ios-rich-push-notifications

** FCM JSON spec

https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages?hl=ko

** legacy http

https://firebase.google.com/docs/cloud-messaging/http-server-ref?hl=ko

how to send silent push notification in ios by firebase

I am using firebase of google.
I could develop push notification by firebase SDK.  but when I implemented silent-notification(in background state app), I found it is not easy. I googled many pages and I found solution finally.
For another firebase users,  I  am posting on my blog.

* background notification  payload spec.

https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/CreatingtheNotificationPayload.html#//apple_ref/doc/uid/TP40008194-CH10-SW1

(example)

1. {
2. "aps" : {
3. "content-available" : 1
4. },
5. "acme1" : "bar",
6. "acme2" : 42
7. }

   - you must add key and value ( "content-available': 1 ) on payload to send data for apns  but problem is that you cannot send that key by firebase-console although you add that-key on custorm-data section. Actually this value  exist outside of 'aps" key.  I found  firebase document, this document says " using . It is not useless in firebase console. 

* using API

I can success by using firebase api 

curl -X POST --header "Authorization: key=<apiauthkey>" \

    --Header "Content-Type: application/json" \

    https://fcm.googleapis.com/fcm/send \

    -d@

## payload.json  file 

{

    "to" : "",

    "priority": "normal",

    "content_available": true,

    "notification" : {

      "body" : "this is message",

      "title" : "notification Title",
      "link": "http://localhost"

    }

}

you can find "content-available:  key.  firebase sever convert  this key to 'content-available:1' 

Below message is  a converted  ''payload" as  "apns"  style ( You can verify in xcode debugging)
{ 
   "aps" : {
         "alert": {
                      "title": ...
                      "body": ...
          },
          "content-available": 1
   },
   "gcm.message.link": ...  
}
  # remark , Other fields are not included in 'alert' or 'aps' fields except 'title' and 'body'.  
  you must work more to send to apns  extra datas.
So, you make payload as below to send extra datas.

{

    "to" : "",

    "priority": "normal",

    "content_available": true,

    "notification" : {

      "body" : "this is message",

      "title" : "notification Title"

    },
    "data": {
          "link": ....
     }

}

you must implement code about notification processing code.
( That is not simple also.)

If you find something wrong or others, please comment ~

스위프트에서 세자리마다 쉼표찍기( Show comma on every 3 digit in swift -Number formatting)

//: Playground - noun: a place where people can play

import UIKit

func convertCurrency( money : NSNumber, style : NSNumberFormatterStyle ) -> String {

    

    let numberFormatter = NSNumberFormatter()

    numberFormatter.numberStyle = style

    

    return numberFormatter.stringFromNumber( money )!

}

let value = 12345678.123

convertCurrency(value, style : NSNumberFormatterStyle.DecimalStyle)

convertCurrency(value, style : NSNumberFormatterStyle.NoStyle)

convertCurrency(value, style : NSNumberFormatterStyle.CurrencyStyle)

#=========== Output  ===================

12,345,678.123     <-- decimalstyle="" font="">

12345678             <-- font="" nostyle="">

$12,345,678.12     <-- currencystyle="" font="">

Rounded square button in swift ( customizing shape and color in code)

override func viewDidLoad() {

        super.viewDidLoad()

     let TAG_BTN = 1001  // it is assigned to button which you want to change properties.

     let btn : UIButton  = self.view.viewWithTag(TAG_BTN) as! UIButton

     btn.layer.cornerRadius = 5

     btn.layer.borderColor = UIColor.grayColor().CGColor

     btn.layer.borderWidth = 1.5

     btn.backgroundColor = UIColor(red: 1.0, green: 0, blue: 0, alpha: 1)

}

Removing space of table seperator ( Drawing sperator full width)

http://www.malcontentboffin.com/2014/10/28/Make-iOS-8-Table-View-Cell-Separators-Full-Width

    override 

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        //remove identation line ( draw full seperator.)

        cell.separatorInset = UIEdgeInsetsZero

        cell.layoutMargins = UIEdgeInsetsZero

        cell.preservesSuperviewLayoutMargins = false

    }

using image as x repeated background in swift

I found many solutions above title. but It is written in a objective-c  like that:

objView.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"background_image"]];


but in swift   it can be written like that:

 objView.backgroundColor = UIColor(patternImage: UIImage(named: "background_image")!)

Using UITableView in ViewController (iOS Swift)

When I make UIViewController,  I need to display list , so I think I can use UITableView in UIViewController , but I found it is not possible because of mechanism of iOS.

They provide  another way.  That is using UIContainerView.

In Storyboard,
1) Drag UIViewController
2) Drag  UIContainerView into UIViewController( step.1)
    segue and default view controller will be created.
3) Drag UITableViewController  ( not UITableView)
4) delete segue and default view controller (step.2)
5) Link container  to UITableViewController (step.3)
     - (how to link?: click container with control key and drag to UITableViewController)

** Additional step
    If you have a existing segue with other viewcontroller, you may meet error. So you must check segue.identifier.