Merged PR 24012: preload api for embedding

preload api for embedding.
user can give his embedUrl to "warm-start" the scripts, or uses a default reportEmbed url.
This can run angular bootstrap & script downloading\parsing and utilize browser cache.
This helps background loading as well as multi iframe scenario

Author: breueran

demo/bower.json

@@ -20,7 +20,7 @@
     "es6-promise": "^3.2.2",
     "bootstrap": "^3.3.6",
     "jquery": "^3.1.0",
-    "powerbi-client": "^2.2.1"
+    "powerbi-client": "2.4.3"
   },
   "devDependencies": {}
 }

demo/package.json

@@ -35,7 +35,7 @@
     "fetch": "^1.0.0",
     "http-server": "^0.9.0",
     "jquery": "^3.1.0",
-    "powerbi-client": "^2.4.1",
+    "powerbi-client": "2.4.3",
     "syntaxhighlighter": "4.0.1"
   },
   "devDependencies": {}

demo/v2-demo/scripts/index.js

@@ -4,6 +4,7 @@ var anyReportSectionLoaded = false;
 
 $(function() {
     OpenSampleSection();
+    WarmStartSampleReportEmbed();
 });
 
 function OpenSampleSection() {

demo/v2-demo/scripts/step_authorize.js

@@ -184,6 +184,23 @@ function OpenEmbedStepFromUserSettings() {
     OpenEmbedStep(EmbedViewMode, EntityType.Report);
 }
 
+function WarmStartSampleReportEmbed() {
+  FetchUrlIntoSession(reportUrl, false /* updateCurrentToken */).then((response) => {
+    var embedUrl = GetParameterByName(SessionKeys.EmbedUrl);
+    if (!embedUrl)
+    {
+        embedUrl = GetSession(SessionKeys.EmbedUrl);
+    }
+    const config= {
+      type: 'report',
+      embedUrl: embedUrl
+    };
+  
+    // Preload sample report
+    powerbi.preload(config);
+  });
+}
+
 function setSession(accessToken, embedUrl, embedId, dashboardId)
 {
     SetSession(SessionKeys.AccessToken, accessToken);

dist/powerbi-client.d.ts

@@ -943,6 +943,7 @@ declare module "service" {
         /** TODO: Look for way to make wpmp private.  This is only public to allow stopping the wpmp in tests */
         wpmp: wpmp.WindowPostMessageProxy;
         private router;
+        private static DefaultInitEmbedUrl;
         /**
          * Creates an instance of a Power BI Service.
          *
@@ -1039,6 +1040,15 @@ declare module "service" {
          * @param {IEvent<any>} event
          */
         private handleEvent(event);
+        /**
+         * API for warm starting powerbi embedded endpoints.
+         * Use this API to preload Power BI Embedded in the background.
+         *
+         * @public
+         * @param {embed.IEmbedConfigurationBase} [config={}]
+         * @param {HTMLElement} [element=undefined]
+         */
+        preload(config: embed.IEmbedConfigurationBase, element?: HTMLElement): HTMLIFrameElement;
     }
 }
 declare module "create" {

dist/powerbi.js

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-client",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "JavaScript library for embedding Power BI into your apps. Provides service which makes it easy to embed different types of components and an object model which allows easy interaction with these components such as changing pages, applying filters, and responding to data selection.",
   "main": "dist/powerbi.js",
   "typings": "dist/powerbi-client.d.ts",

dist/powerbi.js.map

@@ -103,6 +103,8 @@ export class Service implements IService {
   wpmp: wpmp.WindowPostMessageProxy;
   private router: router.Router;
 
+  private static DefaultInitEmbedUrl: string = "http://app.powerbi.com/reportEmbed";
+
   /**
    * Creates an instance of a Power BI Service.
    * 
@@ -422,4 +424,32 @@ export class Service implements IService {
       utils.raiseCustomEvent(embed.element, event.name, value);
     }
   }
+
+  /**
+   * API for warm starting powerbi embedded endpoints.
+   * Use this API to preload Power BI Embedded in the background.
+   * 
+   * @public
+   * @param {embed.IEmbedConfigurationBase} [config={}]
+   * @param {HTMLElement} [element=undefined]
+   */
+  preload(config: embed.IEmbedConfigurationBase, element?: HTMLElement) {
+    var iframeContent = document.createElement("iframe");
+    iframeContent.setAttribute("style", "display:none;");
+    iframeContent.setAttribute("src", config.embedUrl);
+    iframeContent.setAttribute("scrolling", "no");
+    iframeContent.setAttribute("allowfullscreen", "false");
+
+    var node = element;
+    if (!node) {
+      node = document.getElementsByTagName("body")[0];
+    }
+
+    node.appendChild(iframeContent);
+    iframeContent.onload = () => {
+      utils.raiseCustomEvent(iframeContent, "preloaded", {});
+    };
+
+    return iframeContent;
+  }
 }