pwa一些问题总结

[alanhe421]

PWA 应用本质是桌面快捷方式

配置项说明

display

minimal-ui

standalone

name/short_name/display配置修改更新

比如name修改，再浏览器重启访问网站是会提示更新，但比如display配置修改，重启浏览器访问app，不会提示，直接会使用最新的。

theme_color

控制title bar部分

动态修改theme_color，可以通过动态修改<meta name="theme-color" content="#0066ff"/>来解决

调试

• 首先service workerjs因为是后台运行因此不在network下可以查看到对应请求，需要在application 面板下查看
• application面板下，manifest和serviceworker可以看到具体情况，比如地址栏没有提示安装按钮，报错都可以在这里找到原因

  shortcuts

  MacOS/iOS目前还不支持. Windws/Android效果可能如下，目前来看该设置还没有普遍使用

  chrome隐私模式下不支持pwa安装提示，也不支持serviceWorker提示

[alanhe421]

icon尺寸

[alanhe421]

自定义安装按钮唤起PWA安装

 let deferredPrompt;
  const installApp = document.getElementById('installApp');

  window.addEventListener('beforeinstallprompt', (e) => {
    installApp.style.display = 'block';
    deferredPrompt = e;
  });

  installApp.addEventListener('click', async () => {
    if (deferredPrompt !== null) {
      deferredPrompt.prompt();
      const {outcome} = await deferredPrompt.userChoice;
      if (outcome === 'accepted') {
        deferredPrompt = null;
      }
    }
  });

[alanhe421]

pwa兼容性

• 桌面版Firefox不支持
• Chrome/Edge支持

[alanhe421]

相关文章

• https://time.geekbang.org/column/article/211924