Строительство гибридной системы Чжуаньчжуань

предисловие

Повернись сейчасAppявляется типичнымHybrid App, использует общепринятую практику в отрасли: в клиенте используется большое количество бизнес-страниц.WebViewЗагрузите хост страницы H5.

Преимущества очевидны, а именно:

Частота появления веб-страниц в Интернете соответствует потребностям бизнеса в быстрой итерации и не ограничена сроками проверки и выпуска клиентом.
Работа по разработке каждого бизнес-направления может быть распределена между клиентскими командами каждого бизнеса, чтобы каждое бизнес-направление можно было развивать параллельно.

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

Архитектура гибридного приложения Zhuanzhuan

повернисьHybridАрхитектурный проект выглядит следующим образом

перевернуть всеHybridАрхитектура контейнера разделена на четыре уровня.

собственная веб-страницаЭто обычная среда веб-разработки, которую можно реализовать через Vue, React и т. д.
веб-улучшениеВключает в себя такие вещи, как автономные пакеты и контейнеры веб-страниц.
промежуточный слойУровень промежуточного программного обеспечения органично сочетает в себе контейнер веб-страницы и базовую структуру Zhuanzhuan, а также предоставляет различные механизмы жизненного цикла, механизмы событий и подключаемые модули расширения. промежуточный уровень черезJSBridgeСоедините различные возможности, предоставляемые уровнем клиента и промежуточного программного обеспечения, с интерфейсным веб-кодом.
Развернуть инфраструктуруВ основном содержитnativeСвязанная архитектура возможностей

Коммуникационный модуль — JSBridge

JSBridge — это краеугольный камень контейнера WebView, соединяющийJSокружающая среда иNative, выполненоNativeДвусторонняя связь между кодом и средой браузера.

NativeКод можно запустить, вызвав интерфейс, предоставляемый браузером.JS, чтобы позвонитьJSфункция, передающая параметры вJSОкружающая обстановка.

Браузер вJSСвязь с окружающей средой осуществляется черезNativeПерехватить запрос браузера на достижение.

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

Принцип работы JSBridge заключается в следующем.

Предварительно загруженные модули — автономная система пакетов

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

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

Схема автономной системы ресурса веб-приложения

Ниже мы объясним отдельно два направления разработки интерфейса, тестирования, выпуска и стратегии на стороне приложения:

Внешняя сборка, тестирование и выпуск

Мы используем плагин автономного пакета Webpack, созданный командой Tencent Alloy:Ak-webpack-plugin, который может сжимать статические ресурсы, созданные Webpack, в ZIP-архив, который сопоставляет статические ресурсы с URL-адресом пути CDN в соответствии с конфигурацией.

В то же время в процессе настройки вы также можете исключить некоторые файлы (например, изображения, не все созданные изображения доступны). В результате сжатая структура выглядит следующим образом:

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

Инкапсулируйте процесс создания и загрузки автономных пакетов ресурсов вnpm run build, создание проектов с помощью строительных лесов позволяет бизнес-партнерам получить доступ без индуктивности.

Как загрузить сгенерированные офлайн-ресурсы? Мы используем инструмент непрерывной интеграции и выпуска Beetle (система непрерывной интеграции собственной разработки, которую можно понимать как Jenkins) для автоматического выпуска.

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

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

Сторонняя стратегия приложения

Каждый раз, когда клиент запускает или повторно открывает Webview, он считывает через интерфейс таблицу конфигурации последнего автономного пакета и номер версии каждой бизнес-линии. Приложение сравнивает локальный файл конфигурации с онлайн-файлом и загружает ресурсы автономного пакета, которые необходимо обновить.

Оптимизация загрузки пакета ресурсов

Добавочные обновления ресурсов (bsdiff/bspatch)

На основе встроенного (или загруженного в среде WIFI) клиента используется полный пакет каждой службы.Чтобы уменьшить объем загружаемого и обновляемого пакета ресурсов каждый раз, мы принимаем стратегию добавочного обновления. В частности, стратегия:Каждый раз, когда выпускается версия, если перед этим направлением бизнеса существует автономный пакет, автономная система генерирует дифференциальный пакет и размещает его в CDN..

Стратегия добавочного обновления используетbsdiff/bspatchпакет npm инструмента бинарного дельта-алгоритмаbsdp. Клиент загружает дифференциальный пакет и использует егоBspatchПакет синтетических обновлений.

Независимо контролировать, использует ли каждое бизнес-приложение автономный механизм.

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

Проверка согласованности данных и безопасность данных

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

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

Пакетная загрузка офлайн-пакетов

При запуске приложение загружает ресурсы офлайн-пакетов для каждого бизнес-направления пакетами. Мы используем CDN, в котором хранятся ресурсы офлайн-пакетов.HTTP/2протокола, так что клиенту достаточно один раз установить соединение с CDN, а все ресурсы можно загружать параллельно.

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

Базовые пакеты автоматически обновляются

Когда объем инкрементного пакета достигает60%над. Мы подумали, что нам нужно заменить базовый пакет.

Резервный механизм автономного пакета

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

Когда локальный встроенный базовый пакет (файл ZIP) не распаковывается
Тайм-аут автономного системного интерфейса
Не удалось загрузить офлайн-ресурсы
Сбой инкрементного объединения автономных ресурсов и т. д.

В этих случаях мы обратимся к запросу онлайн-документов.

Реализация автономного пакета WKWebView

Существует два типа iOSWebviewТипыWKWebViewа такжеUIWebView,UIWebViewпосколькуiOS 2.0есть, иWKWebViewотiOS 8.0Да, без сомненияWKWebViewпостепенно заменит громоздкиеUIWebView.

UIWebViewЕсть много проблем, таких как использование слишком большого объема памяти и т. д.WKWebViewУлучшение во многих аспектах, например, скорость загрузки веб-страниц была значительно улучшена, улучшение памяти также очень очевидно, и поддерживается больше функций HTML5.

Обернитесь и переключитесь на очень раннееWKWebView. ноWKWebViewВы не можете напрямую перехватывать запросы, такие как Android.WKWebViewСуществует три схемы реализации офлайн-пакетов в

Сценарий частного API
схема пользовательского протокола
Схема LocalWebServer

Zhuanzhuan попробовал это на практике и столкнулся со многими проблемами. Это не будет расширяться здесь. Вы можете следить за нами и с нетерпением ждать нашей следующей статьи "Практика использования офлайн-пакетов WKWebView".

Оффлайн-платформа управления ресурсами

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

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

К его основным функциям относятся:

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

Предварительная загрузка общедоступных ресурсов

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

Чтобы повысить эффективность открытия WebView на стороне приложения, будет использоваться стратегия повторного использования пула WebView. Первым шагом в его стратегии является инициализация альтернативного WebView при запуске приложения.

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

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

предварительный запрос интерфейса страницы

Мы решили проблему загрузки ресурсов через офлайн-пакеты, но запрос интерфейса главной страницы — это тоже место, которое нужно оптимизировать.

Существующий процесс загрузки веб-страницы можно кратко обобщить следующим образом: сначала загрузите JS, запросите данные в жизненном цикле, дождитесь возврата данных и отобразите страницу.

Так можем ли мы помочь запросить интерфейс заранее через клиент, а затем получить данные непосредственно от клиента? Ответ положительный.

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

Как сообщить клиенту, что нам нужно запросить эти интерфейсы

Создаем новый на конфигурационном файле оффлайн пакетаajaxПоле:

ajax: {
  "mode": "hash",
  "split": "#",
  "routes": [
    {
      "router": "/content/index",
      "requestOffline": true,
      "route":[
        {
          url: '/zzgift/creditandexchangecount',
          key: 'creditandexchangecount',
          des: '获取星星信息',
          method: 'post',
          isNeedLogin: false,
          params: {}
        }
      ]
    }
  ]
}

Сначала пользователь щелкает, чтобы открыть веб-представление, приложение запрашивает интерфейс списка Ajax и удаляет последние запрошенные данные локально, а также одновременно загружает веб-представление.

Когда JS запрашивает интерфейс, он сначала извлекает данные через JSBridge, а Key поддерживает передачу нескольких значений вместе.

Если данные возвращаются до запроса JSBridge, запишите данные в значение локального соответствующего ключа, и JSBridge вернет данные после чтения.

Как не вернуться, прочитать локальный ключ пуст, вернуть пустой напрямую.

Данные, возвращаемые интерфейсом, не должны оцениваться или обрабатываться Приложением. Если страница не получена, а запрос инициируется через JS в следующий раз, такие политики, как последующий тайм-аут и повторный запрос, остаются прежними.

Картинка-скелет экрана

Большой проблемой с гибридным интерфейсом является белый экран страницы.

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

прочитать файл конфигурации

Клиент читает конфигурационный файл экрана каркаса изображения при запуске:

// 传入设备分辨率ratioWidth:400, ratioHeight:500
{
  "code":0, // code 是0 代表请求成功   -1 代表图片骨架屏功能关闭
  "data":{
    "m.zhuanzhuan.com/enjoy-given/eg/index.html": {
      "rege": '#/content/index'
      "routes":{
        "#/content/index": {
          "downloadUrl": 'https://m.zhuanzhuan.com/pic.png?400*500'
          "imgName": 'pic.png',
          "id": '10001',
        }
      }
    },
  "msg":""
  }
}

Клиент читает интерфейс при запуске приложения.

Если он используется впервые, просмотрите файл конфигурации, установите путь и загрузите образ.

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

Клиент создает файл в памяти

zzSkeleton/10001/pic.png

Разобрать URL и отобразить его

Когда клиент открывает веб-просмотр, прочитайте URL

Например:https://m.zhuanzhuan.com/enjoy-given/eg/index.html?__isonshowpro=1&metric=rhtjEzu4TBGu6npSjDyXcQ282171v&fromGiftPage=cateList&fromCateId=0#/content/index?ada=asdad

выигратьm.zhuanzhuan.com/enjoy-given/eg/index.html（location.host + location.pathnameУдалите его из файла конфигурации, возвращаемого интерфейсом.

{
  "rege": '#/content/index'
  "routes":{
    "#/content/index": {
      "downloadUrl": 'https://m.zhuanzhuan.com/pic.png?400*500'
      "imgName": 'pic.png',
      "id": '10001',
    }
  }
}

Разобрать согласно rege#/content/indexмаршрут, то согласноidа такжеimgNameПриходите отсюда, чтобы удалить файл

затем согласноzzSkeleton + 10001 + pic.pngЧтение локальных изображений и отображение их в WebView

Как решить проблему растяжения изображения

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

Единая платформа для прыжков в приложение

Для каждой страницы или каждого действия в приложении мы можем использоватьURIОпределено, этоURIВ Чжуаньчжуань это называется равномерным прыжком.

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

Система относительно проста, параметры добавляются через динамические формы. Генерация QR-кода одним щелчком мыши для быстрого тестирования.

Гибридная сводка и прогноз

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

Конечно, технологии постоянно развиваются. Zhuanzhuan Hybrid создан в стремлении к технологическому прогрессу. Есть еще много областей для улучшения.

Подарите себе полное спа-процедуру В настоящее время переход на страницу в основном заключается в повторном открытии WebView, что снижает производительность некоторых проектов. Мы планируем использовать внешний интерфейс, чтобы взять на себя нативную маршрутизацию, чтобы конечный конец мог получить реальный опыт SPA.
Запросы интерфейса и скрытые точки отправляются клиентом Все текущие запросы Zhuanzhuan и скрытые точки отправляются через сам внешний интерфейс. Но есть проблемы, такие как отсутствие скрытых точек. Мы планируем пройти через клиент и отправку фронтенд-запросов. В то же время внешний интерфейс также может использовать аутентификацию безопасности клиента и другие возможности.

Раздел благосостояния

В соответствии с уведомлением мы опубликуем практику и мышление Zhuanzhuan в микро-интерфейсе, Umi, библиотеке компонентов и другой инфраструктуре и технологиях среднего уровня.Приглашаем всех обратить внимание и надеемся на дальнейшее общение с вами. Статья также будет отправлена на публичный аккаунт "Да Чжуань Чжуань ФЭ", а в паблик аккаунте будет проведена лотерея. Призом в этой статье будет памятная футболка Чжуань Чжуаня. Просим всех обратить внимание ✿✿ヽ(°▽°)ノ✿