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

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