feat: add experimental hardware back button support in browsers #28705
Conversation
| @@ -72,7 +72,32 @@ type IonicEvents = { | |||
| ): void; | |||
| }; | |||
|
|
|||
| type IonicWindow = Window & IonicEvents; | |||
| export interface CloseWatcher extends EventTarget { | |||
| new (options?: CloseWatcherOptions): any; | |||
There was a problem hiding this comment.
Having this return CloseWatcher gives me the following lint error:
/Users/liamdebeasi/Ionic/ionic/core/src/utils/browser/index.ts
76:3 error Interfaces cannot be constructed, only classes @typescript-eslint/no-misused-new
✖ 1 problem (1 error, 0 warnings)
However, using any still gives us type checking:
[ ERROR ] TypeScript: src/utils/hardware-back-button.ts:120:16
Property 'liam' does not exist on type
'CloseWatcher'.
L119: */
L120: watcher!.liam = true;
L121: watcher!.requestClose();
| @@ -1,6 +1,7 @@ | |||
| import type { ComponentInterface } from '@stencil/core'; | |||
| import { Build, Component, Element, Host, Method, h } from '@stencil/core'; | |||
| import type { FocusVisibleUtility } from '@utils/focus-visible'; | |||
| import { shoudUseCloseWatcher } from '@utils/hardware-back-button'; | |||
There was a problem hiding this comment.
I'm still deciding if we should target Ionic 8 vs. Ionic 7.7. Anyone have strong feelings one way or the other?
There was a problem hiding this comment.
No strong feelings since it's an opt-in feature. Maybe 7.7 b/c the sooner it comes out then the sooner the community can provide feedback if needed.
|
Will put up docs in a separate PR |
|
@liamdebeasi @thetaPC @amandaejohnston The CloseWatcher API, which was previously removed, is now back in Chromium version 126. I tested this feature and found it to work very well. However, there is an issue: when no overlays are present, I am unable to navigate back to the previous page. This seems to be a bug that needs to be addressed. Ideally, the CloseWatcher API should only be active when overlays are present. |
Issue number: resolves #28703
What is the current behavior?
Users are unable to dismiss modals and menus via the hardware back button in a mobile web browser/PWA.
What is the new behavior?
Does this introduce a breaking change?
Other information
Dev build:
7.6.1-dev.11702569564.1746fa9fFull design doc: https://github.com/ionic-team/ionic-framework-design-documents/pull/205