代码之家  ›  专栏  ›  技术社区  ›  Harish Karthick

PWA添加到主屏幕不显示弹出窗口

  •  4
  • Harish Karthick  · 技术社区  · 6 年前

    我为我的静态站点实现了PWA。服务工作者注册成功,我的页面也按我的预期脱机工作,但真正的问题是添加到 主屏幕

    我包括 杰森 有了适当的图标,仍然,我看不到添加主屏幕弹出,当试图推动添加到主屏幕检查只有我能看到弹出

    此“我的网站”URL: https://www.savesoftinc.com/

    清单JSON:

    {
     "name": "Save Soft",
     "short_name": "SaveSoft",
      "start_url": ".",
      "display": "standalone",
      "background_color": "#fff",
      "theme_color": "#0EC3F7",
      "description": "IT Services & Solutions.",
     "icons": [
      {
       "src": "\/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image\/png",
       "density": "0.75"
      },
      {
       "src": "\/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image\/png",
       "density": "1.0"
      },
      {
       "src": "\/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image\/png",
       "density": "1.5"
      },
      {
       "src": "\/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image\/png",
       "density": "2.0"
      },
      {
       "src": "\/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image\/png",
       "density": "3.0"
      },
      {
       "src": "\/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image\/png",
       "density": "4.0"
      },
      {
       "src": "\/ms-icon-512x512.png",
       "sizes": "512x512",
       "type": "image\/png",
       "density": "5.0"
      }
     ]
    }
    

    并尝试以下代码弹出横幅 如谷歌建议

    window.addEventListener('beforeinstallprompt', (e) => {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
      // Update UI notify the user they can add to home screen
      btnAdd.style.display = 'block';
    });
    btnAdd.addEventListener('click', (e) => {
      // hide our user interface that shows our A2HS button
      btnAdd.style.display = 'none';
      // Show the prompt
      deferredPrompt.prompt();
      // Wait for the user to respond to the prompt
      deferredPrompt.userChoice
        .then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt');
          } else {
            console.log('User dismissed the A2HS prompt');
          }
          deferredPrompt = null;
        });
    });
    window.addEventListener('appinstalled', (evt) => {
      app.logEvent('a2hs', 'installed');
    });
    

    但它显示错误:

    未捕获引用错误:未定义btnadd

    裁判: https://developers.google.com/web/fundamentals/app-install-banners/

    2 回复  |  直到 6 年前
        1
  •  7
  •   Mathias    6 年前

    添加到主屏幕(A2HS)自动弹出测试的第一步是使用灯塔审计工具。
    您需要运行PWA审核并更正警告,直到看到
    ---“可以提示用户安装Web应用程序”

    灯塔审计工具可以作为chrome dev工具中的选项卡或chrome扩展来提供。
    扩展通常具有更当前的特性。

    一旦看到该消息,您就可以在Chrome桌面和Android(Chrome&Edge)上测试自动弹出消息。
    需要注意的重要事项
    在您第一次看到它之后,要再次看到弹出窗口,您可能需要完全清除浏览器缓存,
    边-删除快捷方式
    Chrome桌面-在此处卸载应用程序:chrome://apps/
    crome android-卸载应用程序中的webapk

    一旦你知道自动A2hs弹出窗口工作,你就可以(如果需要)截获自动弹出窗口,使它对你的用户不那么烦人。给他们看一个按钮,让他们知道他们可以在方便的时候。
    如本文所述
    https://developers.google.com/web/fundamentals/app-install-banners/

    这里是 my tester for A2HS .
    您将看到按钮显示而不是自动弹出。

        2
  •  0
  •   sat20786    6 年前

    所有指南均在: https://developers.google.com/web/fundamentals/app-install-banners/

    以下是PWA“添加到主屏幕”横幅的要点

    1. 尚未安装Web应用程序。
    2. 添加服务工作程序和清单文件。服务工作者应该在其作用域中的start_url目录中。

    (例如,“/public/home”在“/”或“/public/”范围内)

    .

    1. 在manifest.json中,prefer_-related_applications未设置为true
    2. manifest.json包括:
      • 简称或名字,
      • 图标必须包括192px和512px大小的图标,
      • 启动URL,
      • 显示必须是以下之一:全屏、独立或最小用户界面
    3. 通过HTTPS提供服务(服务人员需要)
    4. 已向获取事件处理程序注册了服务工作程序。例如

      self.addEventListener('fetch', function(event) {})

    5. 目前,用户已与域交互至少30次 秒

    6. 代码用于在根JS文件中加载服务工作者。

      function registerServiceWorker() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js') // .then(function(reg){ console.log("service worker registered") }).catch(function(err) { console.log(err) }); } else { console.log("Could not find serviceWorker in navigator") } } registerServiceWorker()

    7. 在HTML页面中添加清单文件

      <link rel="manifest" href="/pwa/manifest.json">

    8. 横幅没有被取消之前(将不会出现3个月,根据指南 mini-info-bar )你可以通过清除cookies把它带回来。

    9. 对于iOS设备,需要根据 Safari Web Content Guide :目前只有Safari浏览器支持“添加到主屏幕”。您可以通过单击共享图标找到它。