菜鸟教程小白 发表于 2022-12-12 15:11:35

javascript - iOS 是否支持 "beforeinstallpromp"事件？


                                            <p><p>Android 和桌面版 Chrome 支持“beforeinstallpromp”事件，该事件可以显示添加到主屏幕横幅。我尝试在 iOS 中为我​​的 PWA 使用相同的 javascript 代码，但它不起作用。 </p>

<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
* Clear caches
*/
function pwaClearCaches()
{
    //Clear caches
    caches.keys().then(function(names) {
      for (let name of names) {
            caches.delete(name);
      }
    });
}

var pwa_app_installed = false; //PWA is already installed
var deferredPrompt; //Link to show dialog event
$(document).ready(function(){
    if (window.location.protocol === &#39;http:&#39;) { //Если это HTTP протокол, а не HTTPS
      console.log(lang.t(&#39;You need HTTPS for work&#39;));
    }

    if (&#39;serviceWorker&#39; in navigator) {
      /**
         * Подвешиваемся на переключение режима правки, чтобы сразу очистить кэш
         */
      $(&#39;.debug-mode-switcher&#39;).on(&#39;click&#39;, function () {
            if (!$(&#39;.debug-mode-switcher .toggle-switch&#39;).hasClass(&#39;on&#39;)) {
                //Delete service worker
                navigator.serviceWorker.getRegistrations().then(function (registrations) {
                  for (let registration of registrations) {
                        registration.unregister();
                  }
                });

                //Clear caches
                pwaClearCaches();
            }
      });
    }

    if ($.cookie(&#39;update_pwa_cache&#39;)){ //Update cache if we have cookie на обновление
      pwaClearCaches();
      $.cookie(&#39;update_pwa_cache&#39;, &#39;&#39;, {expires: -1});
    }

    /**
   * Close window with prompt
   */
    function closePWAInstallWindow()
    {
      $(&#34;#pwaInstall&#34;).hide();
      $.cookie(&#39;not_show_pwa&#39;, &#39;1&#39;);
    }

    let body = $(&#39;body&#39;);
    /**
   * Add to homescreen event
   */
    body.on(&#39;click&#39;, &#39;#pwaAddToHomeScreen&#39;, function(){
      deferredPrompt.prompt(); // Show alert to install
      deferredPrompt.userChoice.then((choiceResult) =&gt; {//Wait for user choose
            if (choiceResult.outcome === &#39;accepted&#39;) { //Accept install
                closePWAInstallWindow();
            } else { //Cansel install
                closePWAInstallWindow();
            }
            deferredPrompt = null;
      });
      return false;
    });
    /**
   * Close intalll window
   */
    body.on(&#39;click&#39;, &#39;#pwaCloseInstall&#39;, function(){
      closePWAInstallWindow();
      return false;
    });
});


console.log(&#39;out&#39;);

//If we not in webapp and no session that we need to install
if (!(window.matchMedia(&#39;(display-mode: standalone)&#39;).matches) &amp;&amp; !$.cookie(&#39;not_show_pwa&#39;)) {
    /**
   * Event that app is installed
   */
    $(window).on(&#39;appinstalled&#39;, (evt) =&gt; {
      pwa_app_installed = true;
    });

    console.log(&#39;not fired&#39;);

    /**
   * Event beforeinstallprompt from browser
   */
    $(window).on(&#39;beforeinstallprompt&#39;, (e) =&gt; {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e.originalEvent;
      console.log(&#39;fired&#39;);

      var is_mobile_android = false;
      var ua = navigator.userAgent;

      if (/Android/i.test(ua) &amp;&amp; /Chrome/i.test(ua)){ //If we in Android and it is Chrome prevent native window
            is_mobile_android = true;
      }

      if (!pwa_app_installed &amp;&amp; !is_mobile_android){
            let body = $(&#39;body&#39;);
            body.append(&#39;&lt;div id=&#34;pwaInstall&#34; class=&#34;pwaInstall&#34; style=&#34;background-color: #fff&#34;&gt;&#39; +
                &#39;&lt;div class=&#34;content&#34;&gt;Please install our app&lt;/div&gt;&lt;div class=&#34;links&#34;&gt;&#39; +
                  &#39;&lt;a href=&#34;#&#34; id=&#34;pwaAddToHomeScreen&#34; style=&#34;background-color: #fff; color: #000;&#34;&gt;Add to homescreen&lt;/a&gt;&#39; +
                  &#39;&lt;a href=&#34;#&#34; id=&#34;pwaCloseInstall&#34; style=&#34;background-color: yellow; color: black;&#34;&gt;No Thanks&lt;/a&gt;&#39; +
                &#39;&lt;/div&gt;&#39; +
            &#39;&lt;/div&gt;&#39;);

            setTimeout(function () { //Show our banner
                $(&#34;#pwaInstall&#34;).addClass(&#39;show&#39;);
            }, 100);
      }
    });
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&#34;&gt;&lt;/script&gt;</code></pre>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>安装前提示在 iOS Safari 中不可用<br/>
请参阅本页底部的列表<br/>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent" rel="noreferrer noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - iOS 是否支持&#34;beforeinstallpromp&#34;事件？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/55302527/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/55302527/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - iOS 是否支持 &#34;beforeinstallpromp&#34;事件？