【Cordova】Androidの戻るボタンでアプリが終了するのを防ぐ

Cordova アプリを開発中に遭遇したちょっとした不具合の修正方法です。
Android 端末の戻るボタンをタップすると、前のページに戻らず、アプリがバックグラウンドに移動してしまう現象が発生していました。
致命的というほどではないのですが、不便ではあるので対応しました。

今回参考にさせていただいた記事はこちらから。

JavaScript – Androidのバックボタンを無効にしたい|teratail
https://teratail.com/questions/131999

teratail で全く同じ質問をされている方がいらっしゃり、こちらがとても参考になりました。

 

対処方法ですが、onsen UI のメソッドを使いました。
公式ページはこちらです。

ons – Onsen UI
https://ja.onsen.io/v2/api/js/ons.html

用意されているメソッドに disableDeviceBackButtonHandler() という端末の戻るボタンのイベントを受け付けないようにするメソッドがあり、こちらを使用しました。

実装方法は下記のとおりです。
なお、必要な部分だけを抜粋しているので、適宜修正してください。

import ons from 'onsenui';

……

componentWillMount() {
  ons.ready(function() {
    ons.disableDeviceBackButtonHandler();
  });
}

なお、この disableDeviceBackButtonHandler() メソッドは、Onsen UI が初期化されていないタイミングで実行するとエラーになるため、ready() のコールバック関数内で実行するようにしてください。
かく言う私も初期化が完了する前に読んでしまい、怒られました。

で、こちらを追加してからアプリを実行したところ、端末の戻るボタンが正常に動作し、遷移前のページに戻ることができるようになりました。
てっきり、戻るボタンが完全に無効になるのかと思っていたのですが…。
ですが、アプリが即バックグラウンドに行くのを防ぐことができたのでこれで問題なしです。
念のため、複数台の Android 端末でも動作確認するつもりです。

 

以上、Cordova アプリで Android 端末の戻るボタンを押すとアプリがバックグラウンドに行ってしまう不具合を防ぐ方法でした。
Onsen UI を導入する必要があるので、どんな環境にも適した方法ではありませんが…ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG