Pebble.js: Passing existing options to webview

The docs explain how to get data out of the webview, but not how to pass data into it.

Right now, I set a dummy variable and return the correct URL in the open callback:

function onSettingsOpen(e) {
    var options = Settings.option();
    return URL_ROOT + '/settings?options=' + encodeURIComponent(JSON.stringify(options));
}

Settings.config(
    { url: 'DUMMY' },
    onSettingsOpen,
    onSettingsUpdated
);

(I discovered this by trial-and-error. It wasn't mentioned anywhere in the docs.)

If I pass the URL directly to Settings.config (instead of calculating it each time), this is what happens:

Open settings page → webview gets data.
Make some changes and save → app gets new data.
Open settings page again → webview gets stale data.

Solution

Settings passes the options to the webview the same way it is expected to be passed back to pebble.js; that is, suffixed after a hash '#' symbol as a URI encoded JSON object. In your configuration page, you would use

JSON.parse(decodeURIComponent(window.location.hash.substr(1)))

to obtain the options. You can see this by having the window.location displayed as debug output in your configuration page. Assuming you have a jQuery-like:

$('.some-element').text(window.location)

If your configuration page is served by a dynamic server, it won't receive the options since hash sections of URLs aren't sent to the server. Therefore, to pass options to a server, the URL has to be constructed. While this seems like a huge limitation, it was chosen this way because it doesn't force a certain query format. Example formats are all settings in a single query param or options spread apart multiple query parameters.

With that said, perhaps I could accept a template URL to automate probably the second largest use case, which is all settings in a single query param. Something like

// Non-functioning feature request
Settings.config({ url: 'http://server/settings?options=${options}' }, ...)