push.js

크롬에서 facebook 페이지에 들어가면 알림을 허용 하느냐고 묻는 걸 본 적이 있을 겁니다. 응 이게 뭐여 하고 수신을 했다가 Mac사용자는 자체 facebook notification 을 두개 받아 보신 분도 있을 겁니다.

네, 오늘은 Web Push Notification을 손쉽게 구현할 수 있는 프로젝트 push.js 입니다.

Nickersoft/push.js
_push.js - A compact, cross-browser solution for using the JavaScript Notifications API_github.com

설치해 봅시다.

npm install push.js --save

으로 설치를 할 수도 있습니다만

push.js 는 주로 웹 페이지에 사용할 것이기 때문에 주로 min파일로 사용하거나 bundler 속에서 가져갈 확률이 높습니다.

아주 간단하게 사용할 수 있습니다.

사용해 봅시다

코드는 무척이나 간단합니다.

<script type="text/javascript" src="push.js"\></script\>  
<script\>  
document.getElementById('test\_button').onclick = function () {  
Push.create('이런!', {  
body: '찰진 푸시네요'  
});  
};  
</script\>

이렇게 짜고 push를 날리면

와 같이 Mac 오른쪽에 땋! 하고 뜨게 됩니다.

다른 몇가지 옵션이 있어서 테스트 해 봤습니다.

timeout 옵션은 몇초후에 사라질 것인지에 대한 옵션이고, icon에 옵션을 주니 아래와 같이 나오게 되는 군요.

Push.create('이런!', {  
body: '찰진 푸시네요',  
icon : 'images/m\_logo\_keen.jpg',  
timeout : 5000  
});

와 같이 옵션을 주었고 5초 후에는 사라지게 되네요.

서비스를 웹으로만 만들어도 웹 앱 세상이 오는데 두렵지 않네요.

약간의 설명

소스코드를 살펴 보면 AMD, CommonJS, 브라우저에서 사용할 수 있도록 장치가 있습니다.

create_callback 메쏘드를 보시면 각 각 브라우저 별로 지원하는 웹 notification spec 에 따라 코드가 짜여져 있습니다.

Nickersoft/push.js
_push.js - A compact, cross-browser solution for using the JavaScript Notifications API_github.com

좋은 아이디어를 가지고 손쉽게 여러사람을 널리 이롭게 하는 홍익 코드네요.

By Keen Dev on May 21, 2016.

Exported from Medium on May 31, 2017.

horizon

5월 20, 2016

멋진 이미지네요.출처 :horizon

Firebase 같은 Cloud Database API를 쓰면 개발이 무척이나 간단해 지죠. 특히 앱개발을 하는 관점에서는 서버사이드에 대한 고민이 사라지니까 많이들 이동하는 걸로 알고 있습니다.

Firebase는 거기다가 무척이나 좋은 API들을 많이 가지고 있는데요. 이런 환경을 내가 직접 컨트롤 할 수 있다면 좋겠다는 생각을 한 적이 많습니다.

이 프로젝트 horizon은 rethinkdb 에서 내 놓은 오픈소스 설치형 Firebase라고 생각하시면 될 거 같습니다.

Realtime, Open-source back-end for javascript apps 라고 자신을 소개하고 있습니다!

rethinkdb/horizon
_horizon - Horizon is a realtime, open-source backend for JavaScript apps._github.com

설치를 해보자

$ npm install -g horizon

만들어 봅시다

$ hz init horizon-example-app

위와 같은 형태로 앱이 만들어집니다.

<!doctype html\>  
<html\>  
<head\>  
<meta charset="UTF-8"\>  
<script src="/horizon/horizon.js"\></script\>  
<script\>  
var horizon = Horizon();  
horizon.onReady(function() {  
document.querySelector('h1').innerHTML = 'It works!'  
});  
horizon.connect();  
</script\>  
</head\>  
<body\>  
<marquee\><h1\></h1\></marquee\>  
</body\>  
</html\>

서버를 실행 시켜 보겠습니다.

rethinkdb가 없어서 에러가 뜨는 군요

$brew update **&&** brew install rethinkdb

로 rethinkdb를 설치합니다.

그리고

$hz serve --dev

명령어를 실행시키면

시작이 되어야 한다는데

와 같은 에러가 뜹니다.

아직 초창기랑 버그가 좀 있는 거 같습니다.

이슈에 올라와 있네요.

Unhanded rejection ReqlRuntimeError: Connection is closed in r.db(“app_name_internal”)… * Issue…
_Following the horizon getting started guide npm install -g horizon hz init example_app hz serve –dev with RethinkDB 2…_github.com

이슈에서 해결되는데로 이 블로그 포스트는 업데이트 하겠습니다.

뭐 어쨌든 firebase 라던지, cloudant 같은 제품군을 좋아하는 개발자들에게는 좋은 소식이 될 거 같습니다.

By Keen Dev on May 19, 2016.

Exported from Medium on May 31, 2017.