Cordova アプリを開発中に遭遇したちょっとした不具合の修正方法です。
Android 端末の戻るボタンをタップすると、前のページに戻らず、アプリがバックグラウンドに移動してしまう現象が発生していました。
致命的というほどではないのですが、不便ではあるので対応しました。
今回参考にさせていただいた記事はこちらから。
JavaScript – Androidのバックボタンを無効にしたい|teratail
https://teratail.com/questions/131999
teratail で全く同じ質問をされている方がいらっしゃり、こちらがとても参考になりました。
対処方法ですが、onsen UI のメソッドを使いました。
公式ページはこちらです。
用意されているメソッドに disableDeviceBackButtonHandler()
という端末の戻るボタンのイベントを受け付けないようにするメソッドがあり、こちらを使用しました。
実装方法は下記のとおりです。
なお、必要な部分だけを抜粋しているので、適宜修正してください。
import ons from 'onsenui'; …… componentWillMount() { ons.ready(function() { ons.disableDeviceBackButtonHandler(); }); }
なお、この disableDeviceBackButtonHandler()
メソッドは、Onsen UI が初期化されていないタイミングで実行するとエラーになるため、ready()
のコールバック関数内で実行するようにしてください。
かく言う私も初期化が完了する前に読んでしまい、怒られました。
で、こちらを追加してからアプリを実行したところ、端末の戻るボタンが正常に動作し、遷移前のページに戻ることができるようになりました。
てっきり、戻るボタンが完全に無効になるのかと思っていたのですが…。
ですが、アプリが即バックグラウンドに行くのを防ぐことができたのでこれで問題なしです。
念のため、複数台の Android 端末でも動作確認するつもりです。
以上、Cordova アプリで Android 端末の戻るボタンを押すとアプリがバックグラウンドに行ってしまう不具合を防ぐ方法でした。
Onsen UI を導入する必要があるので、どんな環境にも適した方法ではありませんが…ご参考になれば幸いです。