無法從 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，我相信您最接近的是“添加到主屏幕”