开发PWA时如何点击退出按钮关闭Onsen UI应用？

Hey there! Let's tackle this PWA exit button issue you're facing. First, let's break down why the methods you tried didn't work:

• window.stop() only halts page loading, it doesn't close the app at all.
• navigator.app.exitApp() is actually a Cordova/PhoneGap-specific API—it won't work in a pure web-based PWA, only if you've wrapped your app in a native container like Cordova.

Now, here's what you can do depending on your PWA's environment:

1. For installed PWAs running in standalone mode (Chrome Android, Edge, etc.) #

Modern browsers like Chrome 86+ allow closing standalone PWAs using window.close(), but you need to first check if the app is running in standalone mode to avoid errors in regular browser tabs:

closeApp() {
  this.dialogVisible = false;
  // Check if PWA is running in standalone mode
  if (window.matchMedia('(display-mode: standalone)').matches) {
    // Try to close the window
    if (window.close) {
      window.close();
    } else {
      // Fallback: Prompt user to close manually
      alert('Please close the app using your system\'s back button or task manager');
    }
  } else {
    // If running in a browser tab, prompt user to close the tab
    alert('Please close this tab to exit the app');
  }
}

Note that this won't work in all browsers (like Safari on iOS, which has stricter restrictions), but it covers most major desktop and mobile browsers that support standalone PWAs.

2. If you're wrapping your PWA in Cordova/Capacitor #

If you're using a tool like Cordova or Capacitor to turn your PWA into a native app, you'll need to use their dedicated exit APIs:

For Capacitor:

First install the App plugin:

npm install @capacitor/app
npx cap sync

Then update your closeApp function:

import { App } from '@capacitor/app';

async closeApp() {
  this.dialogVisible = false;
  await App.exitApp();
}

For Cordova:

You can use the original navigator.app.exitApp(), but make sure you have the Cordova core plugins installed and your app is built as a native package (not just running in a browser).

Key Takeaway #

Pure web-based PWAs are limited by browser security policies—you can't force-close a window that the user opened manually. The best approach is to adapt to the environment: check if it's a standalone PWA and use window.close() where supported, otherwise guide the user to close the tab/app manually.

内容的提问来源于stack exchange，提问作者Mr. Pyramid