feat(app): hardware back button support

Author: manucorporat

core/src/components.d.ts

@@ -3638,6 +3638,7 @@ export namespace Components {
   }
 
   interface IonRouter {
+    'goBack': () => Promise<void> | undefined;
     'navChanged': (intent: number) => Promise<boolean>;
     'printDebug': () => void;
     /**

core/src/components/app/app.tsx

@@ -1,6 +1,7 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
 import { Config } from '../../interface';
+import { rIC } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
 
 @Component({
@@ -16,11 +17,12 @@ export class App {
   @Prop({ context: 'queue' }) queue!: QueueApi;
 
   componentDidLoad() {
-    setTimeout(() => {
+    rIC(() => {
       importTapClick(this.win);
       importInputShims(this.win, this.config);
       importStatusTap(this.win, this.queue);
-    }, 32);
+      importHardwareBackButton(this.win);
+    });
   }
 
   hostData() {
@@ -32,6 +34,13 @@ export class App {
   }
 }
 
+function importHardwareBackButton(win: Window) {
+  if (isPlatform(win, 'hybrid')) {
+    // tslint:disable-next-line:no-floating-promises
+    import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton(win));
+  }
+}
+
 function importStatusTap(win: Window, queue: QueueApi) {
   if (isPlatform(win, 'hybrid')) {
     // tslint:disable-next-line:no-floating-promises

core/src/components/ripple-effect/ripple-effect.tsx

@@ -1,5 +1,7 @@
 import { Component, Element, Method, Prop, QueueApi } from '@stencil/core';
 
+import { rIC } from '../../utils/helpers';
+
 @Component({
   tag: 'ion-ripple-effect',
   styleUrl: 'ripple-effect.scss',
@@ -17,11 +19,6 @@ export class RippleEffect {
    */
   @Method()
   addRipple(pageX: number, pageY: number) {
-    let rIC = (this.win as any).requestIdleCallback;
-    if (!rIC) {
-      rIC = window.requestAnimationFrame;
-    }
-
     rIC(() => this.prepareRipple(pageX, pageY));
   }
 

core/src/components/router/router.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
-import { Config, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
+import { BackButtonEvent, Config, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
 import { debounce } from '../../utils/helpers';
 
 import { RouterIntent } from './utils/constants';
@@ -80,6 +80,11 @@ export class Router {
     return this.writeNavStateRoot(path, direction);
   }
 
+  @Listen('window:ionBackButton')
+  protected onBackButton(ev: BackButtonEvent) {
+    ev.detail.register(0, () => this.goBack());
+  }
+
   /** Navigate to the specified URL */
   @Method()
   push(url: string, direction: RouterDirection = 'forward') {
@@ -91,6 +96,12 @@ export class Router {
     return this.writeNavStateRoot(path, intent);
   }
 
+  @Method()
+  goBack() {
+    this.win.history.back(1);
+    return this.waitPromise;
+  }
+
   /** @hidden */
   @Method()
   printDebug() {

core/src/components/tab/tab.tsx

@@ -57,7 +57,7 @@ export class Tab {
   /**
    * The name of the tab.
    */
-  @Prop() name?: string;
+  @Prop({ mutable: true }) name?: string;
 
   /**
    * If true, the user cannot interact with the tab. Defaults to `false`.

core/src/components/tabbar/tabbar.tsx

@@ -124,7 +124,7 @@ export class Tabbar {
           'tab-btn-has-icon-only': hasIcon && !hasLabel,
           'tab-btn-has-badge': badge !== undefined,
           'tab-btn-disabled': disabled,
-          'tab-btn-hidden': !!tab.show
+          'tab-btn-hidden': !tab.show
         }}
         onClick={ev => {
           if (!tab.disabled) {

core/src/interface.d.ts

@@ -40,6 +40,9 @@ export type ComponentTags = keyof StencilIntrinsicElements;
 export type ComponentRef = Function | HTMLElement | string;
 export type ComponentProps<T = null> = T extends ComponentTags ? StencilIntrinsicElements[T] : {[key: string]: any};
 export type CssClassMap = { [className: string]: boolean };
+export type BackButtonEvent = CustomEvent<{
+  register(priority: number, handler: () => Promise<void> | void): void;
+}>
 
 declare global {
   interface StencilGlobalHTMLAttributes {

core/src/utils/hardware-back-button.ts

@@ -0,0 +1,43 @@
+import { BackButtonEvent } from '../interface';
+
+type Handler = () => Promise<void> | void;
+
+interface HandlerRegister {
+  priority: number;
+  handler: Handler;
+}
+
+export function startHardwareBackButton(win: Window) {
+  let busy = false;
+  win.addEventListener('backbutton', () => {
+    if (busy) {
+      return;
+    }
+    busy = true;
+    const handlers: HandlerRegister[] = [];
+    const ev: BackButtonEvent = new CustomEvent('ionBackButton', {
+      bubbles: false,
+      detail: {
+        register(priority: number, handler: Handler) {
+          handlers.push({ priority, handler });
+        }
+      }
+    });
+    win.dispatchEvent(ev);
+
+    if (handlers.length > 0) {
+      let selectedPriority = Number.MIN_SAFE_INTEGER;
+      let handler: Handler;
+      handlers.forEach(h => {
+        if (h.priority >= selectedPriority) {
+          selectedPriority = h.priority;
+          handler = h.handler;
+        }
+      });
+      const result = handler!();
+      if (result) {
+        result.then(() => busy = false);
+      }
+    }
+  });
+}

core/src/utils/helpers.ts

@@ -9,6 +9,14 @@ export function reorderArray(array: any[], indexes: {from: number, to: number}):
   return array;
 }
 
+export function rIC(callback: () => void) {
+  if ('requestIdleCallback' in window) {
+    (window as any).requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, 32);
+  }
+}
+
 export function hasShadowDom(el: HTMLElement) {
   return !!el.shadowRoot && !!(el as any).attachShadow;
 }