La informática es insólita muchas veces. En su momento, en el blog de Moldeo Interactive, escribí sobre un error que ocurría al compilar en Android con Capacitor, el cual rompía por completo el botón de hardware para volver hacia atrás, también conocido como back button. Este botón es el equivalente a apretar el botón de "borrar" del teclado en un navegador, es decir, ejecuta un windows.history.back(). Comenté soluciones que seguí en aquel entonces para resolver el conflicto, pero la solución no era definitiva y hace un tiempo volvió a fallar. Esta es una breve entrada con la razón por la cual ocurre y su solución; espero que sirva y si es así compartanla con todo el mundo.
¿Por qué pasa?
Por si le sirve a alguien, luego de dar miles de vueltas llegué a la conclusión de que el error está en la librería de Apache Cordova. Es decir que este error aparece cuando en Capacitor utilizamos una librería de Cordova, como bien puede ser la Barcode; pero no si solo tenemos las nativas de Capacitor como la Camera. Gracias a este dato, logré revisar algunos issues de Cordova donde aparentemente comentaban la incidencia aunque no con tanta contundencia. Pero por lo menos tuve pasos que seguir.
Solución
La solución está en el index.html. Luego de muchas pruebas llegué a la conclusión de que hace falta agregar lo siguiente antes de las tags <app-root>, de ser posible dentro del propio <head>:
<script>
window.addEventListener = function () {
EventTarget.prototype.addEventListener.apply(this, arguments);
};
window.removeEventListener = function () {
EventTarget.prototype.removeEventListener.apply(this, arguments);
};
document.addEventListener = function () {
EventTarget.prototype.addEventListener.apply(this, arguments);
};
document.removeEventListener = function () {
EventTarget.prototype.removeEventListener.apply(this, arguments);
};
</script>
Esto debería ser suficiente para que el back button funcione correctamente, pero, por si acaso, agregué la estrategia de rutas del paquete ionic. No creo que sea necesario, pero puede servirle a mas de uno. Primero, como es lógico, instalamos el paquete (aunque es probable que ya lo tengamos):
npm i @ionic/angular
Luego en el app.module.ts vamos a importar los paquetes de la estrategia de rutas:
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
Y finalmente lo asignamos en los providers del @NgModule:
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
Esperemos que esta vez si sea la solución definitiva.
