브라우저 알림(Notification) 팝업에 폰트 크기 적용하기

관련지식
javascript, notification, canvas

저는 요즘 중국어를 공부하고 있는데, 공부할 시간이 여의치 않아서 일하면서 들을수 있도록 웹페이지를 하나 만들었습니다. 그렇게 일하면서 중국어의 뜻과 발음을 반복해서 듣고 있는데요. 듣는 도중 문득 발음이 생소하거나 헷갈리는 단어는 바로 확인할수 있도록 알림 기능도 만들었었습니다.(브라우저는 다른탭이 열려있을수도 있으니까)

이게 알림 화면입니다. 중국어, 병음, 뜻을 보여주고 있습니다. 그런데 글씨가 너무 작아서 복잡한 한자인 경우 글씨가 잘 보이지 않더군요. 그래서 알림 팝업을 개선해보려고 합니다.

1. 알림 메시지에 폰트 크기 적용하기
2. 브라우저 탭 바로가기

여기선 폰트 크기를 어떻게 적용할수 있는지 알아보겠습니다.

폰트 크기 적용

결론부터 말씀드리면 알림 팝업의 텍스트에 폰트 크기를 적용하는 것은 불가능합니다. 아래의 MDN 문서에도 설명이 있지만, 텍스트가 입력되는 title, body 에는 오직 문자열만 입력되기 때문에 폰트 적용을 위한 HTML String을 입력해봤자, 그대로 출력될 뿐입니다.

MDN Notification : https://developer.mozilla.org/en-US/docs/Web/API/Notification

하지만 알림팝업에 이미지를 사용할수 있기 때문에, Canvas 를 이용한 꼼수로 적용할수 있을것 같았습니다.

먼저 기존의 소스입니다.

notiAlarm = new Notification(chn_text, {
  body: pinyin + '\n' + means
});

이미지를 사용할 경우 이미지의 URL을 넣어주면 됩니다.

notiAlarm = new Notification(chn_text, {
  body: pinyin + '\n' + means,
  image : 'https://web-push-book.gauntface.com/images/demos/unsplash-farzad-nazifi-1600x1100.jpg'
});

그런데 웹브라우저는 <img> 태그에 url이 아닌 data url 형태(‘data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA…’)도 사용이 가능하죠. 알림 팝업에서도 사용할수 있는지 테스트 해보겠습니다. data url 값은 구글 이미지 검색 결과에서 쉽게 구할수 있습니다.

notiAlarm = new Notification(chn_text, {
  //body: pinyin + '\n' + means,
  image : 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA...'
});

실행결과)

다행히 잘 보여집니다. 그러면 폰트 크기를 적용할 방법이 생기네요. 문자열을 캔버스 객체로 변환하고 캔버스로부터 이미지의 데이터 URL을 만들면 됩니다.

모든 설명을 생략하고 소스를 보여드리겠습니다.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.font = '50px serif';
ctx.fillStyle = "#fff";
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(chn_text, 0, 0);  //글씨
var url = canvas.toDataURL('image/jpeg');  //data url 추출
notiAlarm = new Notification(chn_text, {
  image : url
});

실행결과)

그런데 테스트했던 이미지와 다르게 이미지에 여백이 너무 많은것 같습니다.

이에 대해서 아래 링크에 설명이 매우 잘 되어있습니다.(예제도 매우 잘되어있음)

Notification Examples : https://web-push-book.gauntface.com/demos/notification-examples/

Since Chrome on desktop doesn’t fill the available space and has a ratio of 4:3, perhaps the best approach is to serve an image with this ratio and allow Android to crop the image. That being said, the image option is still new and this behavior may change.

즉 4:3의 비율이 가장 좋다는 내용이네요. 캔버스의 이미지를 400x300 크기로 만들겠습니다.

var canvas = document.createElement("canvas");
canvas.width = 400;  //추가
canvas.height = 300;  //추가
var ctx = canvas.getContext("2d");

실행결과)

이제 배경, 폰트색깔 등을 어떻게 할지 고민하면 되겠네요! 아래 팝업은 완성된 형태입니다. (디자인은 과감히 버리는…;)