NOTIFICATION IOS Mistake

Nhớ vào trong Capabilities để enable Push Notifications lên thì nó mới thật sự nhận được Notification nhé 

 

Ngoài ra sẽ có một bài khác nói về cách config push notification ios từ phía firebase

Document about payload : https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#ApnsConfig

Sample payload:

var message = {
        data: {
            json: JSON.stringify(content)
        },
        token: firebaseToken,
        notification: {
            title: content.title,
            body: content.content
        },
        android: {
            notification: {
                sound: "default"
            }
        },
        apns: {
                headers: {
                    'apns-priority': '10',
                },
                payload: {
                    aps: {
                            sound : 'default',
                            badge: 0
                    }
                }
            }

    };

 

Fun with icon awesome

Có để ý sẽ thấy ở trang bsq486.com khi refresh sẽ đổi icon tự động kèm text bên dưới, vậy lượng icon ở đâu ra ?

Do một phần tui muốn có gì đó hiển thị bấm vào chuyển trang, nhưng rất phiền khi ngồi lựa icon, cho nên tự đặt ra câu hỏi:”Hay là để nó tự random ra một icon nhỉ?”

Hệ thống icon đang dùng là của Icon Awesome > có 4 bản solid:brand là free còn 2 bản còn lại là vip tốn tiền.

Dùng rất dễ, load css về, đặt đúng class là nó sẽ hiển thị ra, add class size để đổi size. Mọi hướng dẫn đều có ở website : https://fontawesome.com/how-to-use/web-fonts-with-css tui sẽ không nói về cách dùng ở đây, mọi người nên tự tìm hiểu nó mới thú vị nhé.

Nhưng nó không cung cấp api lấy ra toàn bộ icon đang có hiện tại.
Vậy làm sao nhỉ ?

Có 2 cách :

1.Lấy trực tiếp từ trong file css ra

var list = [];
for (let index = 0; index < document.styleSheets[3].rules.length; index++) { 
    var element = document.styleSheets[3].rules[index]; 
    var element2 = element.selectorText

    if (element2 && element2.indexOf("fa-") > -1 && element2.indexOf("::before") > -1) 
    {
        list.push(element2);
        console.log(element2)
    }
}

var rnd = list[getRandomInt(0, list.length)].slice(0, -7)
console.log(rnd)

Phần styleSheets các bạn nên dò trước coi file css nạp vô là nằm ở index mấy so với document.
Đoạn script trên lấy tất cả các element có trong rules mà có selectorText có chứa ‘fa-‘ và ‘::before’
Element được lấy ra và tống vào mảng list[] sau đó đó khi lấy ra dùng, random 1 số nằm trong khoản 0 đến length của list[].
> Lấy ra được element thì slice(0, -7) ở cuối 7 ký tự chính là chữ ::before.
> Lấy ra được element là tên ngẫu nhiên trong đống icon được cung cấp từ css của Icon Awesome

> Lấy xong thì addClass vào chỗ cần hiển thị nó, nhưng : không phải cái nào nó cũng hiện, đôi khi nó vướng vô mấy icon vip, cho nên cách 1 này có vẻ chưa stablize lắm.

2.Lấy từ Cheat sheets của website https://fontawesome.com/cheatsheet
Do cũng mò trên google ra stackoverflow có một câu trả lời ở đây : https://stackoverflow.com/a/33794368/1008675 của floribon
Nôm na sẽ vào trang Cheat Sheet rồi mở Console lên để chạy một lệnh gom nhóm các tên đang ghi, được phân loại theo Solid, Brands, vip…

Sau khi lấy xong mình đưa vào mảng :

var solid = ["address-book", "address-card", "adjust"...] 
var brands = ["address-book", "address-card", "adjust"...] 

var rnd1 = solid[getRandomInt(0, solid.length)] 
var rnd2 = brands[getRandomInt(0, brands.length)] 

var classes = document.getElementsByClassName("fas") 
classes[0].classList.add("fa-" + rnd1); 
var classes = document.getElementsByClassName("fab") 
classes[0].classList.add("fa-" + rnd2);

Như đoạn trên, sau khi lấy ra, chạy random, lấy ra element thêm “fa-” vào đầu tên, xong add vào đúng vị trí.
Vị trí nào thì để ý cái <i> chứa phải có sẵn class fas dành cho solid icon và class fab dành cho icon brands.

Bonus: cung cấp thêm hàm random with range nhé !

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Good luck!