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 "

 

}

}

android bluetooth permission ( in manifest)

< ?xml version="1.0" encoding="utf-8"?>
< manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="mypackage">
...
< uses-permission android:name="android.permission.BLUETOOTH" />
< uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />

< application ...
...>