Alarm API

  • 리비전 슬러그: WebAPI/Alarm
  • 리비전 제목: Alarm API
  • 리비전 아이디: 456111
  • 제작일시:
  • 만든이: lukavega
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

{{ SeeCompatTable() }}

Summary

Alarm API는 스케줄 알림, 또는 어플리케이션이 동작할 특정 시간을 설정한다. 알람 같은 어플리케이션 -시계, 달력, 자동 업데이트 등-은 특정 시간의 동작을 활성화해주는 Alarm API가 필요하다.

알람은 시스템 메시지 API를 통해 어플리케이션으로 전달된다. 알람 메시지에 허가된 어플리케이션은 알람을 사용할 수 있다.

알람은 {{domxref("MozAlarmsManager")}} 인터페이스의 인스턴스 객체인 {{domxref("window.navigator.mozAlarms")}} 로 설정한다.

 

Schedule alarms알람 시간 설정하기 

알람을 사용할 때는 시간 설정 부터 시작한다. 표준 시간대(타임존) 기준으로 두가지의 알람이 있지만 공통적으로 {{domxref("MozAlarmsManager.add")}} 메소드를 사용한다.

Note:  알람이 특정 어플리케이션에 타겟팅 되지 않았다면 시스템은 알람을 기다리는 모든 어플리케이션에 신호를 전달할 것이다.

표준 시간대를 무시하는 알람

이 알람은 기기의 로컬 시간대에 맞춰 전송된다. 사용자가 시간대를 변경하면, 알람은 새로운 시간대에 맞춰 전송될 것이다. 예를 들면, 파리의 사용자가 CET (Central European Time) 기준으로 오후 12시에 알람을 설정하다가 샌프란시스코로 이동하면 PDT (Pacific Daylight Time) 기준의 오후 12시에 알람을 받는다.

// 알람 일정
var myDate  = new Date("May 15, 2012 16:20:00");

// 알람에 띄울 임의의 데이타 
var data    = {
  foo: "bar"
}

// 표준시간대를 무시하도록 "ignoreTimezone" 설정 
var request = navigator.mozAlarms.add(myDate, "ignoreTimezone", data);

request.onsuccess = function () {
  console.log("The alarm has been scheduled");
};

request.onerror = function () { 
  console.log("An error occurred: " + this.error.name);
};

표준 시간대 기준의 알람

Those kind of alarms are dispatched based on the time in the time zone that defines when the alarm has been scheduled. If for some reason, the user of the device changes its time zone the alarm will be dispatched based on the original time zone. For example, if a user is in Paris and set an alarm that should be dispatched at 12pm CET (Central European Time) and if that user travel to San Francisco, the alarm will be dispatched at 3 AM PDT (Pacific Daylight Time).

// This the date to schedule the alarm
var myDate  = new Date("May 15, 2012 16:20:00");

// This is arbitrary data pass to the alarm
var data    = {
  foo: "bar"
}

// The "honorTimezone" string is what make the alarm honoring it
var request = navigator.mozAlarms.add(myDate, "honorTimezone", data);

request.onsuccess = function () {
  console.log("The alarm has been scheduled");
};

request.onerror = function () { 
  console.log("An error occurred: " + this.error.name);
};

Managing alarms

Once an alarm is scheduled, it's still possible to manage it.

The {{domxref("MozAlarmsManager.getAll")}} method will return the complete list of alarms currently scheduled by the application. This list is an Array of {{Anch("mozAlarm")}} objects.

mozAlarm

{{page("/en-US/docs/Web/API/MozAlarmsManager.getAll","mozAlarm")}}

var request = navigator.mozAlarms.getAll();

request.onsuccess = function () {
  this.result.forEach(function (alarm) {
    console.log('Id: ' + alarm.id);
    console.log('date: ' + alarm.date);
    console.log('respectTimezone: ' + alarm.respectTimezone);
    console.log('data: ' + JSON.stringify(alarm.data));
  });
};

request.onerror = function () { 
  console.log("An error occurred: " + this.error.name);
};

The {{domxref("MozAlarmsManager.remove")}} method is used to unschedule an existing alarm.

var alarmId;

// Set an alarm and store it's id
var request = navigator.mozAlarms.add(new Date("May 15, 2012 16:20:00"), "honorTimezone");

request.onsuccess = function () {
  alarmId = this.result.id;
}

// ...

// Later on, removing the alarm if it exists
if (alarmId) {
  navigator.mozAlarms.remove(alarmId);
}

Handling alarms

Any application can react when an alarm is dispatched by the system. In order to be able to handle any alarms, an application must register itself as an alarm handler. This is done through the System Messaging API in two steps:

First, the applications must include alarm to the messages property of its application manifest with the URL to the document which registers the callback function to be used when an alarm is dispatched.

"messages": [
  { "alarm": "/index.html" }
]

Second, the application must bind a callback function with the alarm message. This is done using the {{domxref("window.navigator.mozSetMessageHandler","navigator.mozSetMessageHandler")}} method. This callback function will receive a {{Anch("mozAlarm")}} object containing the data attached to the alarm.

navigator.mozSetMessageHandler("alarm", function (mozAlarm) { 
  alert("alarm fired: " + JSON.stringify(mozAlarm.data)); 
});

If an application wants to know if there is a pending alarm at the system level, it's possible to use the {{domxref("window.navigator.mozHasPendingMessage","navigator.mozHasPendingMessage")}} method with the value alarm.

navigator.mozHasPendingMessage("alarm"); 

Specifications

Specification Status Comment
{{SpecName('Alarm API')}} {{Spec2('Alarm API')}} Initial specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown()}} {{CompatGeckoDesktop("16")}} {{ property_prefix("moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatNo() }} {{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

See also

  • {{domxref("window.navigator.mozAlarms","navigator.mozAlarms")}}
  • {{domxref("MozAlarmsManager")}}
  • {{domxref("window.navigator.mozSetMessageHandler")}}

리비전 소스

<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>Alarm API는 스케줄 알림, 또는 어플리케이션이 동작할 특정 시간을 설정한다. 알람 같은 어플리케이션 -시계, 달력, 자동 업데이트 등-은 특정 시간의 동작을 활성화해주는&nbsp;<span style="line-height: inherit;">Alarm API가 필요하다.</span></p>
<p>알람은 시스템 메시지 API를 통해 어플리케이션으로 전달된다. 알람 메시지에 허가된 어플리케이션은 알람을 사용할 수 있다.</p>
<p>알람은 {{domxref("MozAlarmsManager")}} 인터페이스의 인스턴스 객체인&nbsp;<span style="line-height: inherit;">{{domxref("window.navigator.mozAlarms")}} 로 설정한다.</span></p>
<p>&nbsp;</p>
<h2 id="example" name="example">Schedule alarms알람 시간 설정하기&nbsp;</h2>
<p>알람을 사용할 때는 시간 설정 부터 시작한다. 표준 시간대(타임존) 기준으로 두가지의 알람이 있지만 공통적으로 {{domxref("MozAlarmsManager.add")}} 메소드를 사용한다.</p>
<div class="note">
  <p><strong>Note:</strong>&nbsp; 알람이 특정 어플리케이션에 타겟팅 되지 않았다면 시스템은 알람을 기다리는 모든 어플리케이션에 신호를 전달할 것이다.</p>
</div>
<h3 id="Alarms_ignoring_time_zones">표준 시간대를 무시하는 알람</h3>
<p>이 알람은 기기의 로컬 시간대에 맞춰 전송된다. 사용자가 시간대를 변경하면, 알람은 새로운 시간대에 맞춰 전송될 것이다.&nbsp;예를 들면, 파리의 사용자가&nbsp;CET&nbsp;<span style="line-height: inherit;">(</span><em style="line-height: inherit;">Central European Time</em><span style="line-height: inherit;">) 기준으로 오후 12시에 알람을 설정하다가 샌프란시스코로 이동하면 PDT&nbsp;</span><span style="line-height: inherit;">(</span><em style="line-height: inherit;">Pacific Daylight Time</em><span style="line-height: inherit;">) 기준의 오후 12시에 알람을 받는다.</span></p>
<pre class="brush: js">
// 알람 일정
var myDate  = new Date("May 15, 2012 16:20:00");

// 알람에 띄울 임의의 데이타 
var data    = {
  foo: "bar"
}

// 표준시간대를 무시하도록 "ignoreTimezone" 설정 
var request = navigator.mozAlarms.add(myDate, "ignoreTimezone", data);

request.onsuccess = function () {
  console.log("The alarm has been scheduled");
};

request.onerror = function () { 
  console.log("An error occurred: " + this.error.name);
};
</pre>
<h3 id="Alarms_honoring_time_zones">표준 시간대 기준의 알람</h3>
<p>Those kind of alarms are dispatched based on the time in the time zone that defines when the alarm has been scheduled. If for some reason, the user of the device changes its time zone the alarm will be dispatched based on the original time zone. For example, if a user is in Paris and set an alarm that should be dispatched at 12pm CET (<em>Central European Time</em>) and if that user travel to San Francisco, the alarm will be dispatched at 3 AM PDT (<em>Pacific Daylight Time</em>).</p>
<pre class="brush: js">
// This the date to schedule the alarm
var myDate  = new Date("May 15, 2012 16:20:00");

// This is arbitrary data pass to the alarm
var data    = {
  foo: "bar"
}

// The "honorTimezone" string is what make the alarm honoring it
var request = navigator.mozAlarms.add(myDate, "honorTimezone", data);

request.onsuccess = function () {
  console.log("The alarm has been scheduled");
};

request.onerror = function () { 
  console.log("An error occurred: " + this.error.name);
};
</pre>
<h2 id="Managing_alarms">Managing alarms</h2>
<p>Once an alarm is scheduled, it's still possible to manage it.</p>
<p>The {{domxref("MozAlarmsManager.getAll")}} method will return the complete list of alarms currently scheduled by the application. This list is an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> of {{Anch("mozAlarm")}} objects.</p>
<h3 id="mozAlarm">mozAlarm</h3>
<p>{{page("/en-US/docs/Web/API/MozAlarmsManager.getAll","mozAlarm")}}</p>
<pre class="brush: js">
var request = navigator.mozAlarms.getAll();

request.onsuccess = function () {
  this.result.forEach(function (alarm) {
    console.log('Id: ' + alarm.id);
    console.log('date: ' + alarm.date);
    console.log('respectTimezone: ' + alarm.respectTimezone);
    console.log('data: ' + JSON.stringify(alarm.data));
  });
};

request.onerror = function () { 
  console.log("An error occurred: " + this.error.name);
};
</pre>
<p>The {{domxref("MozAlarmsManager.remove")}} method is used to unschedule an existing alarm.</p>
<pre class="brush: js">
var alarmId;

// Set an alarm and store it's id
var request = navigator.mozAlarms.add(new Date("May 15, 2012 16:20:00"), "honorTimezone");

request.onsuccess = function () {
  alarmId = this.result.id;
}

// ...

// Later on, removing the alarm if it exists
if (alarmId) {
  navigator.mozAlarms.remove(alarmId);
}
</pre>
<h2 id="Handling_alarms">Handling alarms</h2>
<p>Any application can react when an alarm is dispatched by the system. In order to be able to handle any alarms, an application must register itself as an alarm handler. This is done through the System Messaging API in two steps:</p>
<p>First, the applications must include <code>alarm</code> to the <a href="/en-US/docs/Apps/Manifest#messages" title="/en-US/docs/Apps/Manifest#messages">messages property of its application manifest</a> with the URL to the document which registers the callback function to be used when an alarm is dispatched.</p>
<pre class="brush: js">
"messages": [
  { "alarm": "/index.html" }
]</pre>
<p>Second, the application must bind a callback function with the <code>alarm</code> message. This is done using the {{domxref("window.navigator.mozSetMessageHandler","navigator.mozSetMessageHandler")}} method. This callback function will receive a {{Anch("mozAlarm")}} object containing the data attached to the alarm.</p>
<pre class="brush: js">
navigator.mozSetMessageHandler("alarm", function (mozAlarm) { 
  alert("alarm fired: " + JSON.stringify(mozAlarm.data)); 
});
</pre>
<p>If an application wants to know if there is a pending alarm at the system level, it's possible to use the {{domxref("window.navigator.mozHasPendingMessage","navigator.mozHasPendingMessage")}} method with the value <code>alarm</code>.</p>
<pre class="brush: js">
navigator.mozHasPendingMessage("alarm"); 
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('Alarm API')}}</td>
      <td>{{Spec2('Alarm API')}}</td>
      <td>Initial specification.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown()}}</td>
        <td>{{CompatGeckoDesktop("16")}} {{ property_prefix("moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{domxref("window.navigator.mozAlarms","navigator.mozAlarms")}}</li>
  <li>{{domxref("MozAlarmsManager")}}</li>
  <li>{{domxref("window.navigator.mozSetMessageHandler")}}</li>
</ul>
Revert to this revision