locked
live tile update each 15 minutes

    Question

  • hello everybody !

    I have an app who need change the tile each 15 minutes .. even when the user has closed the application.

    how can I do that ?

    I'm using html/js , and I'm a little confused, the examples aren't helping ! =/

    thx all ! ^^

    Thursday, April 19, 2012 8:47 PM

Answers

  • In a nutshell, you need to use a background task with a timer trigger.  Here is an example:

    First here is a simple html file with a button to launch the background process and a div for status.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>HelpTileUpdate</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    
        <!-- HelpTileUpdate references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
        <button id="startService">Start Background</button>
        <div id="status">Status of service</div>
    </body>
    </html>

    Next, the default.js which handles the button click event and first requests to use the lock screen (required for timer background tasks) and registers the task with a timeTrigger set for 15 minutes (the minimum allowed interval).

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var app = WinJS.Application;
    
        app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize 
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension. 
                    // Restore application state here.
                }
                WinJS.UI.processAll().then(function onComplete(processedElements) {
                    document.getElementById("startService").addEventListener("click", beginBackgroundService, false);
            });
            }
        };
    
        app.oncheckpoint = function (eventObject) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the 
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // eventObject.setPromise(). 
        };
    
        app.start();
    
        function beginBackgroundService() {
    
            requestLockScreenAccess();
            registerBackgroundTask();
        }
    
        function displayStatus(msg) {
            document.getElementById("status").innerText = msg;
        }
    
        function registerBackgroundTask() {
            var builder = new Windows.ApplicationModel.Background.BackgroundTaskBuilder();
            builder.name = "myTask";
            builder.taskEntryPoint = "backgroundtask.js";
            var timeTrigger = new Windows.ApplicationModel.Background.TimeTrigger(15, false);
            //var timeTrigger = new Windows.ApplicationModel.Background.SystemTrigger(Windows.ApplicationModel.Background.SystemTriggerType.timeZoneChange, false);
            builder.setTrigger(timeTrigger);
            var conditionType = Windows.ApplicationModel.Background.SystemConditionType.internetAvailable;
            var taskCondition = new Windows.ApplicationModel.Background.SystemCondition(conditionType);
            builder.addCondition(taskCondition);
            var backgroundTaskRegistration = builder.register();
    
        }
    
        //
        // This is a helper function to add your app to the lock screen.
        // Time events require the app to be on the lock screen to fire
        //
        function requestLockScreenAccess() {
            var Background = Windows.ApplicationModel.Background;
    
            //
            // An app can call the add or query API as many times as it wants; however, it will only present the dialog box to the user one time.
            //
            Background.BackgroundExecutionManager.requestAccessAsync().then(function (result) {
                switch (result) {
                    case Background.BackgroundAccessStatus.denied:
                        displayStatus("This app is not on the lock screen.");
                        break;
    
                    case Background.BackgroundAccessStatus.allowedWithRealTimeConnectivity:
                        displayStatus("This app is on the lock screen and has access to Real Time Connectivity.");
                        break;
    
                    case Background.BackgroundAccessStatus.allowedWithoutRealTimeConnectivity:
                        displayStatus("This app is on the lock screen, but does not have access to Real Time Connectivity.");
                        break;
    
                    case Background.BackgroundAccessStatus.unspecified:
                        displayStatus("The user has not yet taken any action. This is the default setting and the app is not on the lock screen.");
                        break;
                }
            }, function (e) {
                displayStatus(e);
                console.log(e);
            });
        }
    
    
    
    
    
    })();

    Next, you will need to add a backgroundtask.js file to your project. This code simply checks the date and writes it to a wide tile.

    //Background task
    //Checks for new events and notifies user.
    //Updates tiles
    
    (function () {
        "use strict";
    
        importScripts("//Microsoft.WinJS.0.6/js/base.js");
    
        //Begin task
        var backgroundTaskInstance = Windows.UI.WebUI.WebUIBackgroundTaskInstance.current;
    
        var notifications = Windows.UI.Notifications;
    
        var date = new Date();
    
    
        displayTileNotification(date);
        backgroundTaskInstance.succeeded = true;
        close();
    
        function displayTileNotification(content) {
            // get a filled in version of the template by using getTemplateContent
            var tileXml = notifications.TileUpdateManager.getTemplateContent(notifications.TileTemplateType.tileWideText01);
    
            // get the text attributes for this template and fill them in
            var tileAttributes = tileXml.getElementsByTagName("text");
    
            var title = "Tile Updated At";
            tileAttributes[0].appendChild(tileXml.createTextNode(title));
            tileAttributes[1].appendChild(tileXml.createTextNode(content));
    
            // create the notification from the XML
            var tileNotification = new notifications.TileNotification(tileXml);
    
            // send the notification to the app's default tile
            notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
        }
    
    })();

    Finally, you need to configure the manifest. Double-click package.manifest to bring up the wizard.

    1. In the Application UI tab, change Lock screen notifications to Badge and Tile Text
    2. Supply pointers to a wide tile image and badge image of the required sizes.
    3. In the Declarations tab, add a Background Task
    4. Select Timer
    5. Add backgroundtask.js in the field for Start Page

    Run the program.  Click the button and the first time, you will be prompted to enable lock screen access.  Allow it.

    Watch the Start Screen.  Find your tile and change it to wide format.  Wait.  The tile should update in 15-30 minutes then every 15 minutes thereafter even if the program is terminated.

    Hope this helps.



    Thursday, April 19, 2012 10:52 PM
  • Hi xazin:

    The message is normal.

    Assuming you just copied and pasted my code, there are still a few things that could go wrong.

    Here are some things to check:

    1. In this example, the tile that is written is a wide tile.  So on the start screen, switch the tile to wide.
    2. Did you wait long enough?  It may take up to 30 minutes for the tile to change for the first time (although, I've never seen it take that long.)
    3. For this example the backgroundtask.js file should be in the root directory.
    4. Check the manifest carefully according to the directions in my post.

    Sunday, April 22, 2012 2:21 AM

All replies

  • In a nutshell, you need to use a background task with a timer trigger.  Here is an example:

    First here is a simple html file with a button to launch the background process and a div for status.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>HelpTileUpdate</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    
        <!-- HelpTileUpdate references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
        <button id="startService">Start Background</button>
        <div id="status">Status of service</div>
    </body>
    </html>

    Next, the default.js which handles the button click event and first requests to use the lock screen (required for timer background tasks) and registers the task with a timeTrigger set for 15 minutes (the minimum allowed interval).

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var app = WinJS.Application;
    
        app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize 
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension. 
                    // Restore application state here.
                }
                WinJS.UI.processAll().then(function onComplete(processedElements) {
                    document.getElementById("startService").addEventListener("click", beginBackgroundService, false);
            });
            }
        };
    
        app.oncheckpoint = function (eventObject) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the 
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // eventObject.setPromise(). 
        };
    
        app.start();
    
        function beginBackgroundService() {
    
            requestLockScreenAccess();
            registerBackgroundTask();
        }
    
        function displayStatus(msg) {
            document.getElementById("status").innerText = msg;
        }
    
        function registerBackgroundTask() {
            var builder = new Windows.ApplicationModel.Background.BackgroundTaskBuilder();
            builder.name = "myTask";
            builder.taskEntryPoint = "backgroundtask.js";
            var timeTrigger = new Windows.ApplicationModel.Background.TimeTrigger(15, false);
            //var timeTrigger = new Windows.ApplicationModel.Background.SystemTrigger(Windows.ApplicationModel.Background.SystemTriggerType.timeZoneChange, false);
            builder.setTrigger(timeTrigger);
            var conditionType = Windows.ApplicationModel.Background.SystemConditionType.internetAvailable;
            var taskCondition = new Windows.ApplicationModel.Background.SystemCondition(conditionType);
            builder.addCondition(taskCondition);
            var backgroundTaskRegistration = builder.register();
    
        }
    
        //
        // This is a helper function to add your app to the lock screen.
        // Time events require the app to be on the lock screen to fire
        //
        function requestLockScreenAccess() {
            var Background = Windows.ApplicationModel.Background;
    
            //
            // An app can call the add or query API as many times as it wants; however, it will only present the dialog box to the user one time.
            //
            Background.BackgroundExecutionManager.requestAccessAsync().then(function (result) {
                switch (result) {
                    case Background.BackgroundAccessStatus.denied:
                        displayStatus("This app is not on the lock screen.");
                        break;
    
                    case Background.BackgroundAccessStatus.allowedWithRealTimeConnectivity:
                        displayStatus("This app is on the lock screen and has access to Real Time Connectivity.");
                        break;
    
                    case Background.BackgroundAccessStatus.allowedWithoutRealTimeConnectivity:
                        displayStatus("This app is on the lock screen, but does not have access to Real Time Connectivity.");
                        break;
    
                    case Background.BackgroundAccessStatus.unspecified:
                        displayStatus("The user has not yet taken any action. This is the default setting and the app is not on the lock screen.");
                        break;
                }
            }, function (e) {
                displayStatus(e);
                console.log(e);
            });
        }
    
    
    
    
    
    })();

    Next, you will need to add a backgroundtask.js file to your project. This code simply checks the date and writes it to a wide tile.

    //Background task
    //Checks for new events and notifies user.
    //Updates tiles
    
    (function () {
        "use strict";
    
        importScripts("//Microsoft.WinJS.0.6/js/base.js");
    
        //Begin task
        var backgroundTaskInstance = Windows.UI.WebUI.WebUIBackgroundTaskInstance.current;
    
        var notifications = Windows.UI.Notifications;
    
        var date = new Date();
    
    
        displayTileNotification(date);
        backgroundTaskInstance.succeeded = true;
        close();
    
        function displayTileNotification(content) {
            // get a filled in version of the template by using getTemplateContent
            var tileXml = notifications.TileUpdateManager.getTemplateContent(notifications.TileTemplateType.tileWideText01);
    
            // get the text attributes for this template and fill them in
            var tileAttributes = tileXml.getElementsByTagName("text");
    
            var title = "Tile Updated At";
            tileAttributes[0].appendChild(tileXml.createTextNode(title));
            tileAttributes[1].appendChild(tileXml.createTextNode(content));
    
            // create the notification from the XML
            var tileNotification = new notifications.TileNotification(tileXml);
    
            // send the notification to the app's default tile
            notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
        }
    
    })();

    Finally, you need to configure the manifest. Double-click package.manifest to bring up the wizard.

    1. In the Application UI tab, change Lock screen notifications to Badge and Tile Text
    2. Supply pointers to a wide tile image and badge image of the required sizes.
    3. In the Declarations tab, add a Background Task
    4. Select Timer
    5. Add backgroundtask.js in the field for Start Page

    Run the program.  Click the button and the first time, you will be prompted to enable lock screen access.  Allow it.

    Watch the Start Screen.  Find your tile and change it to wide format.  Wait.  The tile should update in 15-30 minutes then every 15 minutes thereafter even if the program is terminated.

    Hope this helps.



    Thursday, April 19, 2012 10:52 PM
  • hi @jrboddie , thx a lot ! ^^

    I have a silly question , When I allowed the app run in background , this message show up for me .. "This app is on the lock screen, but does not have access to Real Time Connectivity."

    and my tile didn't change ! =/ 

    Sunday, April 22, 2012 1:59 AM
  • Hi xazin:

    The message is normal.

    Assuming you just copied and pasted my code, there are still a few things that could go wrong.

    Here are some things to check:

    1. In this example, the tile that is written is a wide tile.  So on the start screen, switch the tile to wide.
    2. Did you wait long enough?  It may take up to 30 minutes for the tile to change for the first time (although, I've never seen it take that long.)
    3. For this example the backgroundtask.js file should be in the root directory.
    4. Check the manifest carefully according to the directions in my post.

    Sunday, April 22, 2012 2:21 AM
  • Any chance to get this in XAML/C#?  This is what I have been looking for.
    Thursday, August 09, 2012 9:06 PM
  • Hi Paul Beaton

    if you want to implement same using c#/XAML then use the following link 

    http://msdn.microsoft.com/en-us/library/windows/apps/br208628.aspx

    Regards,

    Atul Gaikwad.


    Tuesday, May 07, 2013 5:17 AM