reactjs - 无法从 Web 浏览器安装 PWA

Question

我正在开发 React PWA，我已经成功地将它作为应用程序安装在 iOS(使用 Safari)和 android(使用 Chrome)中，但是我在通过 PC 上的浏览​​器 (Chrome) 安装它时遇到了麻烦。

据我所知，加载时应该有安装提示或地址栏右侧的添加图标，这将允许用户将 PWA 作为应用程序安装在 PC 中，但是当我没有显示安装 PWA 的选项时在浏览器上打开我的 React Web 应用程序。

这是我的 manifest.JSON:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

这是我的 service-worker.JS:

// Flag for enabling cache in production
var doCache = true;
var CACHE_NAME = "pwa-app-cache";
// Delete old caches
self.addEventListener("activate", event => {
  const currentCachelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(keyList =>
      Promise.all(
        keyList.map(key => {
          if (!currentCachelist.includes(key)) {
            return caches.delete(key);
          }
        })
      )
    )
  );
});
// This triggers when user starts the app
self.addEventListener("install", function(event) {
  if (doCache) {
    console.log("install");
    event.waitUntil(
      caches.open(CACHE_NAME).then(function(cache) {
        fetch("asset-manifest.json")
          .then(response => {
            console.log(response.json());
            response.json();
          })
          .then(assets => {
            console.log("installs");
            // We will cache initial page and the main.js
            // We could also cache assets like CSS and images
            const urlsToCache = ["/", assets["main.js"]];
            cache.addAll(urlsToCache);
          });
      })
    );
  }
});
// Here we intercept request and serve up the matching files
self.addEventListener("fetch", function(event) {
  if (doCache) {
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
  }
});

Answer 1

使用 PC，我相信您最接近的是“添加到主屏幕”