Question

我正在使用React PWA，并且已成功将其作为应用程序安装在iOS（使用Safari）和android（使用Chrome）中，但是在通过PC上的浏览器（Chrome）安装时遇到了麻烦

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

这是我的清单。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，我相信您将获得的最接近的是“添加到主屏幕”

无法从Web浏览器安装PWA

1 个答案: