CSS и PWA: несколько советов по созданию прогрессивных веб-приложений

Появление стандартов дизайна, таких как Material Design, и таких фреймворков, как Bootstrap, помогает создавать независимые от платформы проекты.

Фактически используемая среда обычно может работать с устройствами с различными возможностями, в то время как школа дизайна обеспечивает однородный внешний вид на разных платформах, позволяя разработчику сосредоточиться на функциях и функциях приложения.

Если, с другой стороны, вы бы предпочли отказаться от всего внешнего вида, вы сможете использовать своего сервисного работника, чтобы сделать это.

JavaScript предоставляет ряд функций, которые могут помочь принимать решения на основе платформы и доступных возможностей. Поэтому вы можете использовать свой код для тестирования платформы, а затем соответствующим образом применить таблицу стилей.

Например, метод navigator.platform возвращает платформу, на которой запущено приложение, в то время как navigator.userAgent возвращает используемый браузер.

Агент браузера ненадежен, когда дело доходит до обнаружения браузера, поэтому приведенный ниже код является скорее демонстрацией концепции, чем кода, который следует использовать в реальной среде.

Платформа navigator.platform является более надежным методом, но огромное количество доступных платформ делает его использование в нашем примере громоздким.

 /**
* Determine the mobile operating system.
* This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
*
* @returns {String}
*/

function getMobileOperatingSystem()
{
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // Windows Phone must come first because its UA also contains "Android"
  if (/windows phone/i.test(userAgent))
  {
    return  "Windows Phone";
  }

  if (/android/i.test(userAgent))
  {
    return  "Android";
  }

  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream)
  {
    return  "iOS";
  }

  return  "unknown";
  // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android
}

Используя возвращаемое значение getMobileOperatingSystem()

Из приведенного выше кода мы видим, что такая логика может быть очень запутанной и сложной в обслуживании, поэтому я рекомендую использовать ее только в ситуациях, когда не зависящий от платформы дизайн не подходит.

Другой вариант — использовать более простую цветовую схему, только CSS, примененный к основным стилям, которые соответствуют базовой ОС, хотя это все еще может «сломаться» в случае, когда пользователи сделали скин для своего устройства.

PWA Frameworks

Изучая, как разрабатывать PWA, здорово создавать все вручную: это отличный способ изучить все основные принципы построения прогрессивных веб-приложений.

Когда вы ознакомитесь со всеми важными аспектами, вы можете начать использовать несколько инструментов, которые помогут вам повысить эффективность разработки.

Как и в большинстве сценариев разработки, существуют платформы, позволяющие ускорить и повысить эффективность разработки PWA.

 ng add @angular/pwa --project project_name