【pwa】如何在chrome浏览器地址配置添加到主屏

先看结果

条件：

• 网站必须是 https
• manifest.webmanifest
  需要添加

<link rel=“manifest” href=“manifest.webmanifest”>

{
  "background_color": "purple",
  "description": "",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "会工作爱生活",
  "short_name": "会生活",
  "start_url": "/"
}

• 需要注册 service worker; 简单注册就可以，不需要处理太多；

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('ibeeger-store').then((cache) => cache.addAll([
      '/logos/1.png'
    ])),
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((response) => response || fetch(e.request)),
  );
});

其实安装后 也得不到太多的权限； 只是感觉上是一个独立的应用；
如果想让离线体验的比较好， service worker 需要多处理一些离线资源；

---

最后 如何判断 是在 浏览器 还是在 pwa 环境中， 做一些特殊处理；

function isPwa() {
    return ["fullscreen", "standalone", "minimal-ui"].some(
        (displayMode) => window.matchMedia('(display-mode: ' + displayMode + ')').matches
    );
}