fcm 推播 icon必須是只有白色

測試FCm推播
踩到一個雷點 分享一下
android 7之後(包括7)
推播notify icon必須是只有白色
用原本的icon都會變一片空白
以下網址可以驗證並產生推播用的icon
http://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=fcm_push_icon

在 AndroidManifest.xml的applications內加入
使用fcm icon 設定

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />

其中fcm_push_icon是存在於res/draw-xxx/ 各目錄下icon檔案名稱

git 查詢commit 紀錄

今天遇到一個曾經遇過的問題
但已經忘記之前是怎麼解決
一個維護較長時間的專案 往往有一堆的commit
要從過去的commit紀錄內爬到自己要找的那個commit
當然不可能一個個去翻
透過指令 是最好的方法

git log --all --grep='htc'

安裝與設定使用 nginx docker

利用nginx docker取代在系統內安裝的nginx
1.基本docker指令

docker images 察看本機已下載的image
docker container list 察看本機上已經建立的container
docker ps 列出正在運行的container
docker stop containerID 停止container運作
docker container rm containerId 刪除container
docker image rm imageName 刪除image

2.初始安裝nginx

docker run --name=mynginx nginx -p 3838:80

  以nginx這個image安裝 命名為mynginx的container
  並將docker內部的80 port 對應到外部(host)使用的3838 port
  若本機並不存在nginx image會自動由網路下載安裝

3.進入nginx container 察看目錄

docker exec -it mynginx bash

  進入container 內察看設定檔的目錄準備用來對應到本機目錄使用
  查到nginx目錄在container內的
  /etc/nginx
  www根目錄在
  /usr/share/nginx/html

4.將nginx 設定檔與html目錄對應到本機上
  在本機上建立目錄用來對應
  ~/docker_share/nginx/html 對應html目錄
  ~/docker_share/nginx/conf 對應nginx設定檔

  設定nginx.conf單一檔案的對應需要使用:ro readyonly模式
  重新建立 container

docker run --name=mynginx -d -v ~/docker_share/nginx/html:/usr/share/nginx/html 
  -v ~/docker_share/nginx/conf:/etc/nginx/conf.d -v ~/docker_share/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
  -p 3388:80 nginx

  若原container已存在可停止刪除再安裝

5.重啟nginx
  重啟nginx 的指令為 nginx -s reload
  可透過exec指令執行container內部指令

docker exec -d mynginx nginx -s reload

  當然也可以透過
  docker exec -it mynginx bash 直接開shell進入container
  再執行
  nginx -s reload

nightwatch chromeDriver版本問題

vue-cli 預設的e2e測試為nightwatch
使用vue-cli預設不用設定即可跑起e2e測試
如果遇到以下錯誤訊息
Error: An error occurred while retrieving a new session: “session not created: This version of ChromeDriver only supports Chrome version 77”

來自測試安裝的chromeDriver與現在自己機器上的Chrome版本不相符
vue-cli預設安裝nightwatch帶的chromeDriver為77
查一下機器上跑的Chrome版本為80.x
只要重新安裝
npm install chromeDriver@80 --save-dev
即可正常運作

quasar table 取server資料 分頁使用

1.元件設定
  1.rows-per-page-options：設定option供選擇每頁顯示幾筆(對應rowsPerPage)
  2.pagination: 對應分頁設定
  3.@request:當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination

<q-table
  :data="items"
  :rows-per-page-options="[50,100]"
  :pagination.sync="pagination"
  @request="onRequest"
>

2.script
  1.設定pagination物件
    page: 目前第幾頁 要操作載下一頁 需要將第幾頁更新回這裡
    rowsPerPage: 每頁幾筆,當在元件操作切換要顯示的數量，要寫回這裡
    rowsNumber: 總筆數，這要由server取得的資料來更新
  2.doQuery真正執行server查詢的function
    在執行真正查詢所需要的分頁參數 ex取第二頁資料
    這些值都是由pagination設定值拿來當作參數
    pagination設定值會因為元件的操作而動態變化
  3.設定的onRequest handler
    當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination
    要將取得的資料寫回pagination 再執行查詢
    執行查詢的doQuery會去讀取pagination內的資料來執行

data() {
  return {
    pagination: {
      items: [], // table要顯示的資料
      page: 1, // 目前第幾頁
      rowsPerPage: 50, // 每頁幾筆
      rowsNumber: 20 // 總筆數
    }
  }
}
methods: {
  async onRequest (props) {
    const { page, rowsPerPage } = props.pagination
    this.pagination.page = page
    this.pagination.rowsPerPage = rowsPerPage
    await this.doQuery()
  },
  async doQuery () {
    // 將pagination內的分頁資料 設定到api所需要吃的參數
    const queryParams = {
      countPerPage: this.pagination.rowsPerPage
      currentPage: this.pagination.page
    }
    // 假設呼叫api 吃queryParams參數執行server query
    const response = await doAPIfetch(queryParams)
    // 假設api回傳 data(查詢結果) 與meta(包含分頁資料)
    this.items = response.data
    this.meta = response.meta
    // 將分頁資訊取得的資料總量寫回pagination.rowsNumber
    this.pagination.rowsNumber = this.meta.total
  }
}