Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Данилин Андрей - Построение offline приложения в SAP UI5

Данилин Андрей - Построение offline приложения в SAP UI5

Cee15b0246090c00f7de03e0a976f3ed?s=128

Ilya Kaznacheev

October 19, 2019
Tweet

Transcript

  1. Построение Offline приложения в SAP UI5 Данилин Андрей РИФ 2019

  2. 2 Мобильность и SAP – SAP Logon

  3. 3 Мобильность и SAP – SAP Cloud

  4. Варианты «оффланизации» SAP Offline oData + Cordova • требует установки

    контейнера на устройство Apache Cordova; • встроенные инструменты для синхронизации данных; • Offline оData. Neptune UX • стороннее решение со своим Launchpad; • Offline oData; • встроенные инструменты для синхронизации данных; • Данные offline, приложение нет; Progressive web application • Работа обеспечивается силами браузера; • Возможность работы приложения offline на всех платформах; • Бизнес данные хранятся и синхронизируются силами разработчика;
  5. 5 Progressive Web Application Основные черты: 1. Надежность 2. Быстрота

    3. Красота + Checklist by Google
  6. 6 SAP UI5 vs Google check list • Site is

    served over HTTPS • Pages are responsive on tablets & mobile devices • All app URLs load while offline • Metadata provided for Add to Home screen • First load fast even on 3G • Site works cross-browser • Page transitions don't feel like they block on the network • Each page has a URL
  7. 7 Технология PWA Service worker App shell Web app manifest,

    push notification, HTTPS
  8. 8 PWA и SAP UI5: архитектура SAPUI5 Core sap-ui-core.js Index.html

    Libs sap.m … Component manifest Theme/i18n css, properties Views xml/js fragments Controller js Moduls formatter, utils Component-preload.js + manifest.json Service worker sw.js Local storage Network
  9. 9 PWA и SAP UI5: Service worker + Google Workbox

    Download Install • Precache Activate Routing • Strategies Workbox возможности работы с кэшом: • Precache – создание offline ресурсов, до старта приложения; • Route – создание правил кэширования определенных файлов/путей; • Strategies – определение паттерна поведения (сначала сеть, сначала кэш). Особенность: • Не работает с синхронными XHR; • Активация занимает время.
  10. 10 PWA и SAP UI5: SW + UI5 Precache +

    загрузка в async режиме: 1. SAP UI5 Core – bootstrap script; 2. SAP UI5 Libs; 3. Manifest.json + Component-preload.js 4. Styles + Text; 5. Additional dependencies (sap.ui.thirdparty.*.js) Service worker (sw.js) SAP UI5 Core SAP UI5 Main libs (sap.m, …) Manifest.json Component- preload.js Styles + Texts (css, fonts, properties) Dependencies (ext. libs, additional libs …)
  11. 11 PWA и SAP UI5: SW + UI5 (Service-worker.js) Сначала

    загружаем sw, затем ui5: Пример простого sw:
  12. 10/18/2019 - confidential - 12 PWA и SAP UI5: особенности

    асинхронности • Асинхронность где возможно • Bootstrap script; • Component; • Dependency (async + lazy); • sap.ui.define и sap.ui.require;
  13. 13 PWA и SAP UI5: особенности асинхронности (Сomponent) Активация асинхронной

    загрузки manifest.json
  14. 14 PWA и SAP UI5: особенности асинхронности (SAP UI5 1.56)

    Core (1.56) Ui5loader.js sap.ui.loader.config Включаем асинхронность перед инициализацией приложения
  15. 15 PWA и SAP UI5: manifest • Указать в index.html

    • Расширить для PWA.
  16. 16 Итого App offline 1.56 или с ограничениями Offline oData

    и бизнес данные реализуется в SW программистом SW ускорение загрузки за счет кэширования Возможность установки на устройство Работает только при загрузке из index.html (Launchpad - )
  17. 17 Ресурсы • PWA: https://developers.google.com/web/progressive-web-apps • Service worker: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API •

    Google workbox: https://developers.google.com/web/tools/workbox/reference-docs/latest • GitHub пример использования: https://github.com/Neasit/sapui5_pwa.git (пока только исходный код)
  18. 18 Вопросы