Android端Progressive Web App（PWA）无法自动弹出安装提示及手动安装异常问题求助

阿华AIGC实验室

2026-4-7

各位好，我遇到了一个PWA在Android端的安装问题，想请大家帮忙看看：

目前我的PWA在桌面端的Brave和Chrome浏览器里都正常工作，地址栏会显示安装图标，manifest.json和Service Worker（sw.js）也都被浏览器识别，DevTools里能看到SW处于运行状态，我本来以为代码是完整的，但在Android设备上测试时却出了问题：

无论是Brave还是Chrome，都不会自动弹出PWA的安装提示；
手动操作也有异常：
- Brave里手动找到“添加到主屏幕”选项后，会给出“Install”和“Add a shortcut”两个选择，但即使我选Install，屏幕显示“Installing...”后，实际也只是创建了一个普通的主屏幕快捷方式，并没有真正安装成独立的PWA应用；
- Chrome里虽然有“Install app”和“Add shortcut”两个选项，但必须手动去菜单里找，不会像桌面端那样自动提示，而且我更希望能让用户一满足条件就看到自动安装提示。

我先贴出我的sw.js代码，麻烦大家帮忙看看有没有问题：

// Service Worker
const cacheName = "paul-address";
const filesToCache = [
  "/test/",
  "/test/index.html",
  "/test/js/index.js",
  "/test/styles/styles.css"
];

self.addEventListener("install", e => {
  console.log("[ServiceWorker**] Install");
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      console.log("[ServiceWorker**] Caching app shell");
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener("activate", event => {
  caches.keys().then(keyList => {
    return Promise.all(
      keyList.map(key => {
        if (key !== cacheName) {
          console.log("[ServiceWorker] - Removing old cache", key);
          return caches.delete(key);
        }
      })
    );
  });
});

// sw.js - Cache-first strategy for static assets
self.addEventListener('fetch', event => {
  // Only handle GET requests
  if (event.request.method !== 'GET') return;

  const url = new URL(event.request.url);

  // Cache-first for static assets
  if (url.pathname.match(/\.(css|js|png|jpg|jpeg|gif|svg|ico)$/)) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          if (response) {
            console.log('Serving from cache:', event.request.url);
            return response;
          }
          // Fetch and cache new resources
          return fetch(event.request)
            .then(response => {
              // Don't cache non-successful responses
              if (!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }

              const responseToCache = response.clone();
              caches.open(CACHE_NAME)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });

              return response;
            });
        })
      .catch(() => {
        // Return fallback for images
        if (event.request.destination === 'image') {
          return caches.match('/images/fallback.png');
        }
      })
    );
  }
});

我自己排查了一些点，但还没解决：

确认了manifest.json里有name、short_name、start_url、display（设为standalone）、icons（192x192和512x512的PNG）这些必填字段，且通过DevTools的Application面板能正常加载，没有报错；
服务端是HTTPS部署的（测试时也用了localhost，结果一样）；
SW在DevTools里显示激活且无报错，但没仔细看fetch事件里的逻辑是否有问题。

我注意到的代码问题（还没验证是否影响PWA识别）：

fetch事件里的缓存逻辑用了CACHE_NAME，但前面定义的缓存名称变量是小写的cacheName，这里会抛出ReferenceError: CACHE_NAME is not defined，导致无法缓存新的静态资源；
activate事件里没有用event.waitUntil()包裹异步操作，浏览器可能在缓存清理完成前就结束activate流程，旧缓存无法被正确清理。