Das Projekt ui5con-2018-1 ist das Projekt, das ich während der Präsentation clone (remix). Es ist mit dem github Projekt ui5con-htammen.github.com Branch glitch verbunden.
D.h. Änderungen sollten in dem Github Projekt vorgenommen werden, entweder in glitch oder lokal. In der Glitch Console können folgende Befehle verwendet werden.
- git branch -a (List both remote-tracking branches and local branches.)
- git remote
- git pull: zum pullen der Änderungen von github
- git push: zum pushen der Änderung aus glitch nach github
Git Readme Markdown ansehen
Prezi Presentation is here
Go to this url https://glitch.com/~ui5con-2018-1 and remix it. This is the starting point for our tour. It's a ui5 webapp that shows my user profile. It has a startpage with some tiles. Each tile leads to a detail page that uses the Object Page Floorplan.
After you remixed it, change the name of the new project to a meaningful one cause it is part of the apps url.
Open DevTools and have a look at the performance of the app on the network tab.
This is the result with disabled cache:
A PWA needs some meta tags so that the browsers can detect the app as PWA, set a viewport for zooming the app on mobile devices, set some colors, hide adress and status bar, ... Details are here
<!-- PWA related meta tags -->
<!-- sets the width of the browsers viewport to the device width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add to home screen for Safari on iOS -->
<!-- Hide Tabs and adress bar -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- hide status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Consultant Profile">
<!-- Windows related -->
<meta name="msapplication-TileImage" content="webapp/icons/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#427CAC">
<!-- Statusbar Color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#427CAC">
<!-- Icons -->
<!-- different browsers use different link tag for application icon which is used as homescreen icon as well -->
<link rel="icon" href="webapp/icons/favicon.ico?" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="webapp/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="webapp/icons/favicon-16x16.png">
<link rel="apple-touch-icon" href="webapp/icons/apple-touch-icon.png">
<link rel="mask-icon" href="webapp/icons/safari-pinned-tab.svg" color="#5bbad5">
PWAs use a manifest.json that holds information for the mobile OS to make the web app installable like a native app. We add this to the index.html and come back to it later.
Cause UI5 apps already use a manifest.json we can reuse the existing file.
<!-- PWA manifest -->
<link rel="manifest" href="webapp/manifest.json">
Services Workers are the central component of PWAs. They contain the code that is necessary to
Written with StackEdit.