Можете ли вы обнаружить iPhone против Android с помощью AMP? - PullRequest
Новая
       6

Можете ли вы обнаружить iPhone против Android с помощью AMP?

1 голос
/ 16 января 2020

Допустим, у меня есть кнопка APPLE PODCASTS и кнопка GOOGLE PODCASTS, и я хотел бы показать:

  • APPLE PODCASTS для iPhone пользователей
  • GOOGLE PODCASTS для Android пользователи
  • ОБА для пользователей ПК

В настоящее время я достигаю этого с помощью AMP, используя <amp-list> и вызывая динамически создаваемый файл JSON. Это прекрасно работает; но мне интересно, есть ли собственный способ, который убрал бы требование для этих трех файлов - <amp-list>, <amp-mustache> и файла динамического c JSON - для загрузки.

1 Ответ

4 голосов
/ 16 января 2020

Вы можете обнаружить строку UA в amp-script и затем соответствующим образом обновить кнопки: 

<amp-script layout="fixed-height" height="50"
  script="user-agent-script">
  <button id="android" hidden>Android</button>
  <button id="iOS" hidden>iOS</button>
</amp-script>

<script id="user-agent-script"
  type="text/plain"
  target="amp-script">

  function getMobileOS() {
    const userAgent = navigator.userAgent;
    if (/android/i.test(userAgent)) {
      return "android";
    }
    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      return "ios";
    }

    return "other";
  }

  const androidButton = document.querySelector('#android');
  const iosButton = document.querySelector('#ios');

  const os = getMobileOS();
  if (os === 'android') {
    androidButton.removeAttribute('hidden');
  } else if (os === 'ios') {
    ios.removeAttribute('hidden');
  } else {
    androidButton.removeAttribute('hidden');
    ios.removeAttribute('hidden');
  }

</script>

Пример: https://amp.dev/documentation/examples/components/amp-script/#detecting - android -vs- ios -in -amp

...