Постепенно улучшайте AngularJS для адаптации к устройству, возможностям браузера и доступности сети.

вступление

—

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

Мы поможем вам. Если вас интересует Использование PWA с React вместо этого.

С другой стороны, Angular превращается в платформу. Последние версии (2, 4.x, 5.x) улучшают сверхспособности для хорошей работы на нескольких платформах (сервер: рендеринг на стороне сервера, мобильный, Интернет, настольный компьютер: электронный и IoT) с почти такой же кодовой базой. React - это совершенно новая история.

Устранение неоднозначности: упомянутый выше универсальный не является универсальным javascript, также известным как изомпорфный.

Примечание: это третья из серии сообщений в блоге о миграции программного кода, поскольку я перемещаю Hoo.gy - платформу, которая помогает вам арендовать различные материалы от ваших друзей, соседей и коллег ” от Angular 1.x до Angular 4.x. Ваша рекомендация (👏 👏) - это моя мотивация для публикации новой статьи. Буду рад помочь вам, если у вас возникнут вопросы (оставляйте вопросы в комментариях ниже)! Надеюсь, этот пост вам поможет! Вот «Первая статья и Вторая статья, вы сейчас читаете третью.

Родной

—

Нативный код всегда близок к металлу. Это дает права доступа к ресурсам низкого уровня. С властью приходят обязанности (или жертвы). Трудно поверить, но в мире нативных приложений цикл Непрерывная доставка исчисляется днями, а не часами. Требуется время, чтобы одобрить опубликованные приложения в различных магазинах приложений. Это делает возможным выпускать несколько раз в день только в вашем веб-стеке. Учтите, что универсального языка программирования для мобильных приложений не существует. Каждая платформа имеет свой собственный язык программирования (Android: Java / Kotlin, iOS: ObjectiveC / Swift). Этот факт усложняет качество обслуживания (пользовательский опыт). Каждая платформа имеет свой тип ошибок, несколько разработчиков + тестировщиков, не говоря уже об инвестициях с точки зрения времени и денег. Эллиот опубликовал мысли о том, почему нативные мобильные устройства вероятно обречены: Нативные приложения обречены и последующее: Почему нативные приложения действительно обречены: нативные приложения обречены, часть 2, и я лично не могу с этим согласиться. Путь к унификации разработки приложений сегодня начинается с прогрессивных веб-приложений (PWA).

Опции

—

У вас есть несколько вариантов нацеливания на несколько платформ с почти одинаковой кодовой базой, но PWA имеет смысл. Если вы используете React в одном из своих проектов вместо Angular, вы защищены. Фактически, с React Native можно написать почти тот же код для iOS / Android, что и в Angular. Не в обиду! С помощью нескольких хаков, почти такая же кодовая база Angular для iOS / Android может быть достигнута путем изучения NativeScript. Если ваш код легко компонуем, а это так, большая часть кодовой базы может быть повторно использована на рабочем столе (с электроном и приятелями), даже на стороне сервера (nodejs). Если вы уже использовали библиотеки типа подчеркивание (или lodash), вы получите картину!

Прогрессивное веб-приложение

—

PWA объединяет различные парадигмы разработки внешнего интерфейса в последовательные и проверяемые шаги для улучшения взаимодействия с пользователем на основе возможностей устройства и браузера. Ваш цикл Непрерывная доставка теперь рассчитывается в часах, а не в днях. В дополнение к традиционным прогрессивному улучшению и отзывчивому дизайну, PWA обеспечивает безопасную связь через SSL, быструю передачу данных через HTTP2, автономную поддержку через Service Worker ( Cache API с возможным откатом hack- ish на HTML5 AppCache), фоновые задачи для синхронизации сервера через WebWorker - как API. Спецификация Service Worker позволяет PWA вести себя больше как нативные приложения с возможностью получать Push-уведомления (пока недоступны в Safari iOS), API геолокации (Geofencing). После установки PWA становится обнаруживаемым и связанным, как любое приложение (на Android Apple наверстывает упущенное).

CSS Async

—

Ленивая загрузка CSS без использования JavaScript. Условные таблицы стилей помогают изолировать инициализацию, специфичную для браузера. С другой стороны, ленивая загрузка помогает сначала рисовать без ожидания загрузки всего CSS браузером.

Вы можете найти следующие ссылки, полезные для аудита, рефакторинга CSS для повышения отзывчивости и производительности (ленивая загрузка или встраивание). Рефакторинга CSS для прогрессивного улучшения может быть достигнуто путем 1) взятия существующего кода CSS, который считается поддерживаемым для наименьшего устройства 2) Добавление медиа-запроса от среднего к наибольшему устройству, поддерживаемого вашим кодом 3) Принятие модульной конструкции ( BEM, SMACKS или OCSS) .Bootstrap упрощает переход с помощью применения мета-CSS-классов к существующим классам CSS. Чтобы двигаться быстрее, поскольку ваша существующая база кода была разработана для настольных компьютеров (более крупная среда), имеет смысл удалить (или скрыть) компоненты, которые не требуются для мобильных устройств. Разрушение происходит быстрее, чем созидание. На программирование нового материала уходит больше времени, чем на удаление ненужного. В качестве быстрого примера загрузочная программа CSS предоставляет .hidden- [xs | ms | md | lg] и .visible- [xs | ms | md | lg] - [block | inline | inline-block] служебные классы, которые можно использовать для добавления функций в зависимости от размера экрана. Это экономит время.

Bootstrap упрощает переход с помощью применения мета-CSS-классов к существующим классам CSS. Чтобы двигаться быстрее, поскольку ваша существующая база кода была разработана для настольных компьютеров (более крупная среда), имеет смысл удалить (или скрыть) компоненты, которые не требуются для мобильных устройств. Разрушение происходит быстрее, чем созидание. На программирование нового материала уходит больше времени, чем на удаление ненужного. В качестве быстрого примера загрузочная программа CSS предоставляет .hidden- [xs | ms | md | lg] и .visible- [xs | ms | md | lg] - [block | inline | inline-block] отзывчивые служебные классы, которые вы можете использовать для добавления функций в зависимости от размера экрана. Это экономит время.

Возможность установки PWA

—

Нет мобильной стратегии? Без проблем. Применение принципов PWA к устаревшим веб-приложениям в долгосрочной перспективе окупается. При использовании кеша веб-приложение загружается быстрее, поскольку большинство статических ресурсов сохраняется на клиенте. Кроме того, вы экономите на пропускной способности. При использовании push-уведомлений повторное вовлечение пользователя становится таким же простым, как и в собственных приложениях (PS: Apple не поддерживает push-уведомления в Safari Mobile). С фоновыми задачами, которые синхронизируют данные с сервером при восстановлении сети, PWA гарантирует BASE (в основном доступно, мягкое состояние, в конечном итоге согласовано: аналогично ACID, но в распределенном systems), что довольно сложно найти в сценарии классических веб-приложений.

Манифест

—

manifest.json позволяет установить ваше приложение на Android. Манифест также сообщает Safari, где найти жизненно важные ресурсы для расширенного домашнего экрана. Для установки PWA требуются один манифест и тег HTML. Устройства Apple позволяют добавлять вместо этого на главный экран. Что мало, но неплохо. Установленный PWA не будет включать функции, близкие к железу, такие как Contact API. Это можно исправить путем глубокой интеграции со сторонними сервисами, такими как Google / iCloud и т. Д., Чтобы получить доступ к списку контактов пользователей и т. Д.

# Add this line 
# <link rel="manifest" href="/manifest.json"/>

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

Если вы уже используете Angular 2, некоторые идеи можно найти в этом сообщении в блоге: Прогрессивные веб-приложения с Angular 2+ от Houssein Djirdeh.

Полноэкранный режим

—

С парой строк HTML-кода в заголовке iOS Safari предоставляет возможность использовать полноэкранный режим даже для не устанавливаемых веб-приложений. В полноэкранном режиме на iPhone / iPad (Safari) minimal-ui предотвращает лишний верхний и нижний колонтитулы, тогда как -scale метаданные предотвращают масштабирование (строка №1). Строка №2 изменяет внешний вид строки состояния. Строка №3 превращает заголовок в полупрозрачный черный. Заголовок, используемый на главном экране, добавляется в строку №4, используйте строку №5, чтобы добавить собственный значок. Строка №6 определяет изображение экрана запуска. Если у вас уже есть магазин в AppStore, вы можете добавить строку №7 для рекламы через смарт-баннер приложения. Дополнительные пояснения можно найти на сайте Apple.

В Основах веб-браузера Chrome есть еще пара примеров, которые вы можете изучить для лучшего понимания. Урезанный еще более поясняющий пример можно найти здесь на носителе: « Сервис-воркеры заменяют AppCache: кувалда, чтобы сломать орех ». Добавление баннеров установки приложений для Chrome, дополнительные сведения об устанавливаемых веб-приложениях спецификации или источник оболочки приложения: Smashing Magazine и закрепленные приложения Firefox. Регистрация работника с использованием Firefox:

HTML5 Камера и видеокамера

—

Довольно редко можно найти приложения, которые не записывают (не загружают) изображения. HTML ‹input type = file /› играет большую роль в этом отношении. Однако у вашего приложения не будет доступа к файловой системе. Обходной путь - спецификация камеры и видеокамеры HTML5. Это поможет вашему коду делать снимки в мобильных браузерах и откатиться к вводу или перетаскиванию в обычных браузерах. Используя существующий код, вы можете улучшить запись с камеры или видео благодаря свойствам HTML5.

<input type="file" accept="image/*"> #taking picture
<input type="file" accept="video/*;capture=camcorder"/> #video rec.

Сервисные работники

—

Сервис-воркеры - один из строительных блоков PWA. Service worker использует Cache API для кэширования статических ресурсов и их обслуживания всякий раз, когда приложение получает ресурсы с удаленного сервера. Поскольку не все браузеры реализуют Cache API, Service Worker откатывается к App Cache API (HTML5 AppCache). Чтобы это работало, необходимо добавить манифест AppCache по-старому. Обратите внимание, что этот подход не квалифицируется Lighthouse (одностороннее решение). Если вы ищете поддержки AppCache, Джейк Арчибальд еще в 2012 году написал прекрасную статью, которая поможет вам начать работу: Application Cache - это тупица. Для инициализации вашего Service Worker вам потребуются версия кеша и статические файлы (для оболочки приложения).

# service worker to load app shell
var version = 'version:or:app-name';
#files to cache
var files = ['/index.html',
             '/style.css',
             '/script.js',
             '/favicon.ico'];

Service Worker против Web Worker против Web Socket

—

Важно отметить, что Service Workers отличаются, независимы и, следовательно, отличаются от Web Workers. Также важно отметить, что как Service Workers, так и Web Workers отличаются от WebSockets и, следовательно, отличаются от них. Если вы хотите пропустить и получить относительно быстрое глубокое понимание этих 3 технологий, перейдите к Различия между Service Workers, Web Workers и WebSockets от Аарона Т. Грогга.

  • jQuery обслуживающего персонала. Для начала вы можете выбрать Vanilla или использовать некоторые библиотеки. Есть два, которые я считаю весьма полезными: UpUp и Workbox (от Google). PS: не существует такого понятия, как «jQuery, но для веб-воркеров ;-)»
  • UpUp. Библиотека UpUp помогает быстро приступить к работе с Service Workers. Библиотека далека от jQuery Service Workers, но действительно упрощает работу. Ребята из OAuth сделали краткое вступление, в котором используется быстрая установка UpUp: Создание автономных веб-приложений с помощью сервис-воркеров. Если копнуть глубже, ознакомьтесь с руководством по UpUp от разработчика: Начало работы с автономным режимом. Сначала используйте UpUp.
  • Рабочая панель. Я понятия не имею, насколько сложна или проста эта библиотека, но первое впечатление - это швейцарский нож, а кухонный нож справится со своей задачей. Предоставляет доступ к офлайн-поддержке (очевидно), офлайн-аналитике и фоновой синхронизации.
  • Модернизр. Эта библиотека помогает определить, поддерживает ли браузер определенные части спецификации. Поскольку Safari еще не поддерживает Service Worker, он в конечном итоге определит, может ли ваш браузер использовать вашу библиотеку или нет.
  • События обслуживающего персонала. Чтобы погрузиться в это, Mozilla подготовила несколько документов, таких как Service Worker API и Использование Service Workers. В дополнение к этапу регистрации рабочего вам необходимо будет обеспечить обработку событий установки, получения и активации.

Регистрация сервис-воркеров

—

Чтобы включить Service Worker, вам понадобится код, подобный приведенному ниже. В последней версии Modernizr условие «if» можно украсить как «if (Modernizr.serviceworker)».

Установка сервис-воркера

—

Событие install инициализирует ваш кеш. Это место, куда вы добавляете свои статические ресурсы.

Кэш сервис-воркера

—

Событие fetch требует стратегии. Доступен широкий выбор. Важными из них являются «кэш с откатом к сети» или «сеть с откатом к кешу». В конце дня вы примете решение на основе вашего варианта использования. У Джейка Арчибальда есть кулинарная книга в автономном режиме, которая может дать глубокое понимание. Поваренная книга офлайн.

Service Worker Clean Cache

—

Событие activate содержит место для очистки кеша. Альтернативой сбросу кеша (особенно в производственной среде) является обновление версии (или добавление хеша к имени вашего кеша). Если вы жаждете большего, Паскаль Прехт ʕ • ̫͡ • ʔ рассказал об этих событиях. Слайды можно найти здесь: Angular Service Workers.

Модульное тестирование

—

Как включить ваших обслуживающих работников в существующий набор тестов? Есть длинная статья Testing Service Workers от Мэтта Гона, которая может вам помочь.

Список для чтения

—

Чтобы сохранить ваш моджо.

Список для чтения - о производительности PWA

Outro

—

Гоша, ты молодец, Если читаешь все выше добра! Спасибо! Как и в прошлый раз, ВАША рекомендация (👏 👏 👏) побуждает меня дополнить этот пост методами, которые я использую при обновлении Hoo.gy - платформы, которая позволяет вам арендовать вещи от друзей и соседей. Это зеленая экономика совместного использования, чтобы обуздать потребительское отношение и сэкономить тысячи долларов в долгах по кредитным картам и нашей планете ;-).