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

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 Вопросы