OpenUI5-ServiceWorker/index.html at gh-pages · pensoffsky/OpenUI5-ServiceWorker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">

      <script>

      //get the loading indicator div and create an interval that adds a "." to the
      //div textContent every second
      fLoadingIndicatorStart = function (sText) {
          var loadingIndicator = document.getElementById("loadingIndicator");
          if(loadingIndicator) {
              loadingIndicator.textContent = sText;
          }
          nLoadingIndicatorInterval = window.setInterval(function (argument) {
              var loadingIndicator = document.getElementById("loadingIndicator");
              if(loadingIndicator) {
                  loadingIndicator.textContent += ".";
              }
          }, 1000);
      };

      //change the text of the loadingIndicator div
      fLoadingIndicatorText = function (sText) {
          var loadingIndicator = document.getElementById("loadingIndicator");
          if(loadingIndicator) {
              loadingIndicator.textContent = sText;
          }
      };

      //remove the loading indicator div and clear the "." interval
      fLoadingIndicatorRemove = function () {
          window.clearInterval(nLoadingIndicatorInterval);
          var loadingIndicator = document.getElementById("loadingIndicator");
          if(loadingIndicator) {
              loadingIndicator.remove();
          }
      };

      //function that gets called when the UI5 resources were loaded
      //and the "app" can be created
      fUI5Loaded = function(){
            sap.ui.getCore().attachInit(function() {
              sap.ui.require([], function(HTML) {
                sap.ui.getCore().getLibraryResourceBundle();
                //the text control which will display the queried stock price
                var oStockText = new sap.m.Text("idStockPrice", {text:""});

                // create a mobile app
                  var app = new sap.m.App("myApp", {});

                  var fLoadStockPrice = function() {
                      var sStockQuery = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22SAP%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json";
                      var oRes = jQuery.ajax(sStockQuery);
                      oRes.done(function (a,b,c) {
                          var sCreated = a.query.created;
                          var sPrice = a.query.results.quote.LastTradeWithTime;
                          var sDate = a.query.results.quote.LastTradeDate;
                          console.log(sCreated + " " + sDate + " " + sPrice);
                          oStockText.setText(sCreated + "\n" + sDate + "\n" + sPrice);
                      });
                  };

                  //initial load of the stock price
                  fLoadStockPrice();

                  // create the first page
                  var page1 = new sap.m.Page("page1", {
                      title : "UI5 ServiceWorker v03",
                      showNavButton : false,
                      content : new sap.m.VBox({items: [oStockText,
                          new sap.m.Button({
                          text : "Refresh stock price",
                          press : fLoadStockPrice
                      })]})
                  });

                  // add page to the app
                  app.addPage(page1)

                   //remove the loading indicator div
                 fLoadingIndicatorRemove();

                  // place the app into the HTML document
                  app.placeAt("content");
              });
            });
        }


      //function that adds the UI5 bootstrap script tag to the document
      fLoadUI5 = function(){
          fLoadingIndicatorText("Loading UI5 resources...");
          var s, r, t;
          r = false;
          s = document.createElement('script');
          s.type = 'text/javascript';
          s.src = "dist/resources/sap-ui-custom.js";
          s.id = "sap-ui-bootstrap";
          s.setAttribute("data-sap-ui-libs", "sap.m");
          s.setAttribute("data-sap-ui-theme", "sap_hcb");
          s.setAttribute("data-sap-ui-bindingSyntax", "complex");
          s.setAttribute("data-sap-ui-compatVersion", "edge");
          s.setAttribute("data-sap-ui-xx-supportedLanguages", "en");
          s.setAttribute("data-sap-ui-preload", "async");
          s.onload = s.onreadystatechange = function() {
              console.log( this.readyState ); //uncomment this line to see which ready states are called.
              if (!r && (!this.readyState || this.readyState == 'complete')) {
                  r = true;
                  //change loading indicator text
                  document.getElementById("loadingIndicator").textContent = "Initializing UI5...";
                  fUI5Loaded();
              }
          };
          t = document.getElementsByTagName('script')[0];
          t.parentElement.insertBefore(s, t);
      };

      //show the loading indicator
      document.addEventListener("DOMContentLoaded", function(event) {
        fLoadingIndicatorStart("Loading...");
      });

      //check if serviceWorker feature is supported by browser
      //if so register the sw.js as serviceWorker
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function(registration) {
            // Registration was successful
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
            //now load the UI5 resources
            fLoadUI5();
        }).catch(function(err) {
            // registration failed
            console.log('ServiceWorker registration failed: ', err);
            //now load the UI5 resources
            fLoadUI5();
        });
    } else {
        //if the browser does not support serviceworker then just load the app
        fLoadUI5();
    }

      </script>
  </head>
  <body class="sapUiBody" id="content">
  <div id="loadingIndicator" style="font-size:4rem;"></div>
    </body>
</html>