ステップ 3：アラームと通知を追加する

重要: Chrome では、すべてのプラットフォームで Chrome アプリのサポートを終了します。Chrome ブラウザと Chrome ウェブストアで拡張機能のサポートは継続されます。詳しくは、お知らせをご覧ください。 詳しくは、アプリの移行をご覧ください。

注: ここから新たに始めるには、参照コードの zip で前のステップのコードを見つけます。 cheat_code > の下Solution_for_step2。

このステップでは、次のことを学びます。

• 指定した間隔でアプリを復帰させ、バックグラウンド タスクを実行する方法。
• 画面上の通知を使用して重要なことに注意を引く方法。

この手順を完了の推定所要時間: 20 分 このステップの内容を確認するには、このページの下部に移動 ↓ にアクセスしてください。

リマインダーで ToDo アプリの機能を強化しましょう

ToDo リストを開いているかユーザーに通知する機能を追加して、ToDo アプリを強化します。 アプリが閉じられたとき。

まず、未完了のタスクを定期的にチェックする方法をアプリに追加する必要があります。次に、アプリ Todo アプリのウィンドウを閉じた場合でも、ユーザーにメッセージを表示する必要がある。そのために Chrome アプリのアラームと通知の仕組みを理解する必要があります。

アラームの追加

chrome.alarms を使用して復帰間隔を設定します。Chrome が実行されている限り、アラーム リスナーは 設定したおおよそ間隔で呼び出されます。

アプリの権限の更新

manifest.json で、"alarms" 権限をリクエストします。

"permissions": ["storage", "alarms"],

バックグラウンド スクリプトを更新する

background.js で、onAlarm リスナーを追加します。今のところ、このコールバック関数は、 メッセージをコンソールに表示できます。

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});
chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
});

HTML ビューを更新する

index.html で、[アラームを有効にする] ボタンを追加します。

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  ...
</footer>

次に、この新しいボタン用の JavaScript イベント ハンドラを作成する必要があります。ステップ 2 で、 CSP のコンプライアンス違反として最も一般的なものの一つは、インライン JavaScript が原因です。index.html に、次のコードを追加します。 次の行を使用して、次の手順で新しい alarms.js ファイルをインポートします。

  </footer>
  ...
  <script src="js/app.js"></script>
  <script src="js/alarms.js"></script>
</body>

アラームのスクリプトを作成する

js フォルダに alarms.js という名前の新しいファイルを作成します。

以下のコードを使用して、checkAlarm()、createAlarm()、cancelAlarm()、toggleAlarm() を追加します。 メソッドと、クリック イベント ハンドラを使用して、[ActivateAlarm] ボタンが押されたときにアラームを切り替えるためのクリック イベント ハンドラが クリックします。

(function () {
  'use strict';
   var alarmName = 'remindme';
   function checkAlarm(callback) {
     chrome.alarms.getAll(function(alarms) {
       var hasAlarm = alarms.some(function(a) {
         return a.name == alarmName;
       });
       var newLabel;
       if (hasAlarm) {
         newLabel = 'Cancel alarm';
       } else {
         newLabel = 'Activate alarm';
       }
       document.getElementById('toggleAlarm').innerText = newLabel;
       if (callback) callback(hasAlarm);
     })
   }
   function createAlarm() {
     chrome.alarms.create(alarmName, {
       delayInMinutes: 0.1, periodInMinutes: 0.1});
   }
   function cancelAlarm() {
     chrome.alarms.clear(alarmName);
   }
   function doToggleAlarm() {
     checkAlarm( function(hasAlarm) {
       if (hasAlarm) {
         cancelAlarm();
       } else {
         createAlarm();
       }
       checkAlarm();
     });
   }
  $$('#toggleAlarm').addEventListener('click', doToggleAlarm);
  checkAlarm();
})();

アプリを再読み込みし、しばらくの間アラームを有効化（無効化）します。

注: ログメッセージはイベントページ（バックグラウンド スクリプト）を介して Google Cloud コンソールに送信されるため、 右クリック > する必要があります。バックグラウンド ページを調査して、ログメッセージを確認します。

注: 右クリック >要素を検証して、 他の JavaScript ファイルにエラーがないか確認する必要があります。

アラームを有効にするたびに、コンソールにログメッセージが出力されるはずです。 アラームが鳴るたび:

次の点に注目してください。

• Todo アプリのウィンドウを閉じても、アラームは鳴り続けます。
• ChromeOS 以外のプラットフォームでは、Chrome ブラウザ インスタンスをすべて完全に閉じると、アラーム トリガーされません

それでは、chrome.alarms メソッドを使用する alarms.js の一部を 1 つずつ見ていきましょう。

アラームを作成する

createAlarm() が有効になったときにchrome.alarms.create() API を使用してアラームを作成します アラームが切り替わります。

chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});

最初のパラメータは、アラームの一意の名前を識別するオプションの文字列です。例: remindme。（注: 名前でアラームをキャンセルするには、アラームの名前を設定する必要があります）。

2 番目のパラメータは alarmInfo オブジェクトです。alarmInfo の有効なプロパティは、when または delayInMinutes、periodInMinutes。ユーザーのマシンへの負荷を軽減するために、 アラームを 1 分に 1 回に制限しますここではデモ用に小さな値（0.1 分の 1）を使用します。 使用しないでください。

アラームを消去

cancelAlarm() で、chrome.alarms.clear() API を使用して、キャンセル時にアラームをキャンセルします。 アラームが切り替わります。

chrome.alarms.clear(alarmName);

最初のパラメータは、アラート名で使用した識別文字列を chrome.alarms.create()。

2 番目の（オプション）パラメータは、次の形式を取るコールバック関数です。

function(boolean wasCleared) {...};

アラームを設定する

checkAlarm() で、chrome.alarms.getAll() API を使用して、作成されたすべてのアラームの配列を取得します。 トグルボタンの UI 状態を更新します。

getAll() は、Alarm オブジェクトの配列を渡すコールバック関数を受け入れます。内容を確認する Alarm を含む場合、DevTools コンソールで次のようにして実行中のアラームを検査できます。

chrome.alarms.getAll(function(alarms) {
  console.log(alarms);
  console.log(alarms[0]);
});

これにより、次のようなオブジェクトが出力されます。 {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} を以下のようになります。

次のセクションに備えましょう

アプリを一定間隔でポーリングするアラームが設定されました。これをベースとして使用し、 表示することもできます。

通知を追加する

アラーム通知をユーザーが簡単に認識できるものに変更しましょう。使用 chrome.notifications: 次のようなデスクトップ通知を表示します。

ユーザーが通知をクリックすると、Todo アプリのウィンドウが表示されます。

アプリの権限の更新

manifest.json で、"notifications" 権限をリクエストします。

"permissions": ["storage", "alarms", "notifications"],

バックグラウンド スクリプトを更新する

background.js で、chrome.app.window.create() コールバックをスタンドアロン メソッドにリファクタリングします。 再利用できるようにします。

chrome.app.runtime.onLaunched.addListener(function() {
function launch() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
}
});
chrome.app.runtime.onLaunched.addListener(launch);
...

アラーム リスナーを更新する

background.js の先頭に、アラームで使用するデータベース名の変数を追加します。 リスナー:

var dbName = 'todos-vanillajs';

dbName の値は、js/app.js の 17 行目で設定したデータベース名と同じです。

var todo = new Todo('todos-vanillajs');

通知を作成する

単に新しいアラームをコンソールに記録する代わりに、onAlarm リスナーを更新して保存されるようにします。 chrome.storage.local.get() でデータを取得し、showNotification() メソッドを呼び出します。

chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
  chrome.storage.local.get(dbName, showNotification);
});

次の showNotification() メソッドを background.js に追加します。

function launch(){
  ...
}

function showNotification(storedData) {
  var openTodos = 0;
  if ( storedData[dbName].todos ) {
    storedData[dbName].todos.forEach(function(todo) {
      if ( !todo.completed ) {
        openTodos++;
      }
    });
  }
  if (openTodos>0) {
    // Now create the notification
    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon_128.png',
        title: 'Don\'t forget!',
        message: 'You have '+openTodos+' things to do. Wake up, dude!'
     }, function(notificationId) {});
  }
}

chrome.app.runtime.onLaunched.addListener(launch);
...

showNotification() は、未完了（未完了）の ToDo アイテムをチェックします。未対応の時間枠が 1 つ以上ある場合 ToDo アイテム、chrome.notifications.create() で通知ポップアップを作成します。

最初のパラメータは、一意に識別する通知名です。正しい順序で ID を設定する必要があります。 その特定の通知に対する操作を消去または処理します。ID が既存の ID と一致した場合、 create() は、新しい通知を作成する前に、まずその通知を消去します。

2 番目のパラメータは NotificationOptions オブジェクトです。レンダリングには多くのオプションがあります。 クリックします。ここでは、「基本的な」アイコン、タイトル、メッセージ付きの通知を作成できます。 その他の通知タイプには、画像、リスト、進行状況インジケーターがあります。このページには セクションを確認して、他の通知機能も試してみてください。

3 つ目の（省略可能な）パラメータは、次の形式を取るコールバック メソッドです。

function(string notificationId) {...};

通知インタラクションを処理する

ユーザーが通知をクリックしたときに ToDo アプリを開きます。background.js の最後に、 chrome.notifications.onClicked イベント ハンドラ:

chrome.notifications.onClicked.addListener(function() {
  launch();
});

イベント ハンドラ コールバックは、単に launch() メソッドを呼び出します。いずれか chrome.app.window.create() は、新しい Chrome アプリ ウィンドウを作成します（まだ存在しない場合）。または、現在のウィンドウにフォーカスします。 ウィンドウ ID が main のウィンドウが開いている。

完成した Todo アプリを起動する

これでステップ 3 は完了です。リマインダーを追加して Todo アプリを再読み込みしてください。

以下の動作が想定どおりに動作することを確認します。

• 未完了の ToDo アイテムがない場合、ポップアップ通知は表示されません。
• アプリを閉じているときに通知をクリックすると、ToDo アプリが開くか、 焦点を当てます

トラブルシューティング

最終的な background.js ファイルは次のようになります。通知が表示されない場合は Chrome のバージョンが 28 以降であることを確認します。それでも通知が表示されない場合は、 DevTools コンソールのメイン ウィンドウの両方でエラー メッセージが表示される（右クリック > [要素を検証]）。 バックグラウンド ページを表示します（右クリック > [バックグラウンド ページを検証]）。

詳細情報

このステップで導入した API の一部の詳細については、以下をご覧ください。

• 権限を宣言する ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

次のステップに進む準備はできましたか？ステップ 4 - WebView で外部リンクを開く » に移動します。