Next.js开发的PWA移动端返回按钮功能优化求助

要实现PWA移动端按路由层级返回而非逐个清空历史栈的需求，核心思路是在独立运行的PWA环境中监听返回事件，自定义路由跳转逻辑，具体实现步骤如下：

1. 识别PWA独立运行环境 #

通过浏览器的display-mode媒体查询，判断当前是否是用户下载后独立运行的PWA（而非在浏览器标签页中打开）：

const isStandalone = window.matchMedia('(display-mode: standalone)').matches;

2. 监听返回事件并自定义逻辑 #

在Next.js的_app.js（或全局布局组件）中添加popstate事件监听，仅在PWA环境下生效，并重写返回行为：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
    if (!isStandalone) return; // 浏览器环境保留默认行为

    const handleBackButton = (event) => {
      event.preventDefault(); // 阻止默认的一步回退
      const currentPath = router.asPath;
      const pathParts = currentPath.split('/').filter(part => part);

      // 当前在根路由，处理退出逻辑
      if (pathParts.length === 0) {
        if (window.confirm('确定要退出应用吗？')) {
          // 安卓环境支持直接退出，iOS需用户手动关闭
          if (navigator.app?.exitApp) {
            navigator.app.exitApp();
          } else {
            window.close();
          }
        } else {
          // 用户取消退出，恢复历史栈状态
          history.pushState(null, null, currentPath);
        }
        return;
      }

      // 计算父级路由路径
      const parentPath = pathParts.length === 1 
        ? '/' 
        : `/${pathParts.slice(0, -1).join('/')}`;

      // 用replace跳转，避免历史栈堆积
      router.replace(parentPath);
    };

    window.addEventListener('popstate', handleBackButton);
    return () => window.removeEventListener('popstate', handleBackButton);
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

3. 关键细节说明 #

• 路由层级计算：通过拆分当前路径的分段，直接取上一级路径，比如/projects/123会跳转到/projects，/projects跳转到/。
• 历史栈管理：使用router.replace()而非push()，避免在历史栈中新增记录，保证后续返回逻辑正常。
• 兼容性处理：安卓PWA支持navigator.app.exitApp()直接退出，iOS则无法主动退出，需用户手动滑走应用，代码中做了兼容判断。
• 取消退出的恢复：当用户取消退出时，通过history.pushState()恢复当前路由的历史记录，避免后续返回行为异常。

这样配置后，你的PWA在移动端独立运行时，返回按钮就会按照路由层级跳转，从/projects/[ID]直接回到/projects，再回到/，最后点击返回会提示退出应用，完美解决多次点击返回的问题。

内容的提问来源于stack exchange，提问作者John Roice M. Aldeza