Unity Web API, or how to integrate your site in Ubuntu
In November, Mozilla released Firefox 17. In the release, among other things, there was support for the so-called Social API. This API allows social services (those with constant interaction with other users) in a user-friendly way to attract its attention even when it has another tab open with another site. Moreover, there is an opportunity to add your sidebar (sidebar) to the browser and to display something there all the time, regardless of what tab is currently open to the user (outwardly, this is somewhat similar to frames that were used a lot before on many sites in order to display the main content separately, and independently of it to display a separate sidebar).
The browser developers themselves say that such an API for interacting with the browser is necessary for social networks and similar interactive web applications, since such sites are something more for the user than “another tab” in the browser. And so they decided to add the possibility of two-way interaction (that is, the initiating party can be both the user and the site) of the user to the site during the entire time when the user is running the browser (that is, the user may not have any open tabs with the site , and at the same time he can see information about new messages or even use the sidebar, which is displayed when viewing any pages of any site).
Nevertheless, although the Mozilla blog says that it is expected that more providers will be supported (“providers” in the context of the Social API are those web applications that provide the browser with a special structured text file that indicates which features the Social API wants request), and Facebook is the first supported provider, it does not mention the fact that even those web developers who want to add Social API support for their site cannot do this now. Rather, of course, they can, but for this all users who want to use it will need to open about: config and manually add the website address to the social.activation.whitelist parameter (by default, there is only one website: https: // www .facebook.com ).
And this is not to mention the fact that although the Social API is in a stable branch of Firefox, but the documentation on it is still not ready. For example, after the release I went to MDN and looked at the documentation on the Social API. One of the pages then, for example, looked like this:
')
What does she look like now? Yes, strictly speaking, exactly the same. :)
But after all, the idea is, in general, good, and the ability to interact with the user when he switched to another tab (or to another window) can really be useful. Is it possible to do this in other ways? Of course you can. Depending on the browser and platform, there may be different tools, but let's start with the Unity Web API , which is in the latest version of Ubuntu (12.10).
Unlike the Social API added to Firefox, the Unity Web API can only use open site tabs. If the user has closed all the tabs, then neither the browser nor the Unity will be associated with the site in the background. Unity Web API works, by the way, not only with Firefox, but also with Chromium, which adds to the pleasant universality of this approach. Another difference is that the site is not integrated into the browser, but into the Unity working environment itself — into the launcher, into the tray, and so on. Accordingly, after the user has installed your “webapp” (the browser asks permission to install the web application into the system, if the Unity is supported in this web application), its icon appears in the launcher every time the user logs in your website. The user can even “pin” your web application in the launcher, and then it will always appear there, and the user will be able to launch it directly from the launcher.
So, how to add support for integration with Unity on your site? Very simple: you just need to add a Unity API object to JS (using external.getUnityObject) and execute an initialization method (init) for this object, passing the name of the application, the URL of the icon and, if necessary, the callback function to be performed at the end initialization. That's all you need to do in order for the browser to ask the user for permission to install your web application in the system, and install it if the user has agreed. As a matter of fact, if you just want your site to appear in the user’s launcher, this will be enough:
By the way, when a user opens a dash and enters the name of your site (more precisely, the name of your web application that you specify in the parameters of the Unity API JS object initialization method), it can, again, launch your site directly from the search results (outside it depends on whether it is your launcher application or not), which is also very convenient.
If you need to do something immediately after the initialization of the Unity object is completed, use the onInit parameter:
In this example, we use the showNotification method, which, as the name suggests, simply displays the system notification in the upper right corner of the screen.
The first parameter is summary (message essence, header), the second is body (message body), the third is iconUrl (the address of the image that will be displayed to the left of the message text). If the address of the image is not specifically set, the image of the web application will be used (the same as displayed in the launcher).
Another interesting possibility is to add a number (messages or something else) and a progress bar to the icon in the launcher (it can be very useful when downloading files, for example).
Amount:
Progress bar, similarly (scale from 0 to 1):
By the way, a progress bar with beautiful animation is added and removed.
If it is required to display exactly the number of messages (and, preferably, so that the fact of the appearance of new messages was noticeable to the user), then the Unity.MessagingIndicator interface is very well suited.
As soon as you add information about new messages using the showIndicator method, the user can view the information by clicking on the blue envelope in the tray. He will also be able to proceed to reading the messages from the menu that opens - you yourself determine which function should be performed if the user clicks on one or another menu item related to your web application.
In addition to the number of messages, the MessagingIndicator interface allows you to add “actions” (for example, “New message”) and information about individual messages (for them, instead of the number, the time elapsed since they were received).
In general, the documentation is still a lot of interesting things. You can find out the status of the user, for example (that is, if the user went somewhere), and you can also broadcast information about what music is playing on the site - in this case, it is displayed when you click on the speaker icon in the tray (along with the volume control). You can, of course, also add callbacks to user actions — that is, let him, for example, pause the music on your site through the same menu.
Learn what are the methods of integrating web applications into the user work environment, use the ones that you like best, experiment. It is obvious that in the future these methods will become better and better, and the possibilities will be even wider than they are now. It is possible that manufacturers of different operating systems even decide to decide on a common standard, and if not, then libraries will appear that create a level of abstraction over different APIs available in different operating systems.
Good luck and have a nice day! Write cool, user-friendly programs.
The browser developers themselves say that such an API for interacting with the browser is necessary for social networks and similar interactive web applications, since such sites are something more for the user than “another tab” in the browser. And so they decided to add the possibility of two-way interaction (that is, the initiating party can be both the user and the site) of the user to the site during the entire time when the user is running the browser (that is, the user may not have any open tabs with the site , and at the same time he can see information about new messages or even use the sidebar, which is displayed when viewing any pages of any site).
Nevertheless, although the Mozilla blog says that it is expected that more providers will be supported (“providers” in the context of the Social API are those web applications that provide the browser with a special structured text file that indicates which features the Social API wants request), and Facebook is the first supported provider, it does not mention the fact that even those web developers who want to add Social API support for their site cannot do this now. Rather, of course, they can, but for this all users who want to use it will need to open about: config and manually add the website address to the social.activation.whitelist parameter (by default, there is only one website: https: // www .facebook.com ).
And this is not to mention the fact that although the Social API is in a stable branch of Firefox, but the documentation on it is still not ready. For example, after the release I went to MDN and looked at the documentation on the Social API. One of the pages then, for example, looked like this:
')
What does she look like now? Yes, strictly speaking, exactly the same. :)
But after all, the idea is, in general, good, and the ability to interact with the user when he switched to another tab (or to another window) can really be useful. Is it possible to do this in other ways? Of course you can. Depending on the browser and platform, there may be different tools, but let's start with the Unity Web API , which is in the latest version of Ubuntu (12.10).
Unlike the Social API added to Firefox, the Unity Web API can only use open site tabs. If the user has closed all the tabs, then neither the browser nor the Unity will be associated with the site in the background. Unity Web API works, by the way, not only with Firefox, but also with Chromium, which adds to the pleasant universality of this approach. Another difference is that the site is not integrated into the browser, but into the Unity working environment itself — into the launcher, into the tray, and so on. Accordingly, after the user has installed your “webapp” (the browser asks permission to install the web application into the system, if the Unity is supported in this web application), its icon appears in the launcher every time the user logs in your website. The user can even “pin” your web application in the launcher, and then it will always appear there, and the user will be able to launch it directly from the launcher.
So, how to add support for integration with Unity on your site? Very simple: you just need to add a Unity API object to JS (using external.getUnityObject) and execute an initialization method (init) for this object, passing the name of the application, the URL of the icon and, if necessary, the callback function to be performed at the end initialization. That's all you need to do in order for the browser to ask the user for permission to install your web application in the system, and install it if the user has agreed. As a matter of fact, if you just want your site to appear in the user’s launcher, this will be enough:
if (window.external && external.getUnityObject) { var Unity = external.getUnityObject(1.0); Unity.init({ name: "My Cool Website", iconUrl: "http://site.com/static/img/icon.png" }); } By the way, when a user opens a dash and enters the name of your site (more precisely, the name of your web application that you specify in the parameters of the Unity API JS object initialization method), it can, again, launch your site directly from the search results (outside it depends on whether it is your launcher application or not), which is also very convenient.
If you need to do something immediately after the initialization of the Unity object is completed, use the onInit parameter:
function unityReady() { Unity.Notification.showNotification("", "", null); } if (window.external && external.getUnityObject) { var Unity = external.getUnityObject(1.0); Unity.init({ name: "My Cool Website", iconUrl: "http://site.com/static/img/icon.png", onInit: unityReady }); } In this example, we use the showNotification method, which, as the name suggests, simply displays the system notification in the upper right corner of the screen.
The first parameter is summary (message essence, header), the second is body (message body), the third is iconUrl (the address of the image that will be displayed to the left of the message text). If the address of the image is not specifically set, the image of the web application will be used (the same as displayed in the launcher).
Another interesting possibility is to add a number (messages or something else) and a progress bar to the icon in the launcher (it can be very useful when downloading files, for example).
Amount:
Unity.Launcher.setCount(123); // Unity.Launcher.setCount(124); // Unity.Launcher.clearCount(); // Progress bar, similarly (scale from 0 to 1):
Unity.Launcher.setProgress(0.5); // - Unity.Launcher.setProgress(0.7); // Unity.Launcher.clearProgress(); // By the way, a progress bar with beautiful animation is added and removed.
If it is required to display exactly the number of messages (and, preferably, so that the fact of the appearance of new messages was noticeable to the user), then the Unity.MessagingIndicator interface is very well suited.
As soon as you add information about new messages using the showIndicator method, the user can view the information by clicking on the blue envelope in the tray. He will also be able to proceed to reading the messages from the menu that opens - you yourself determine which function should be performed if the user clicks on one or another menu item related to your web application.
In addition to the number of messages, the MessagingIndicator interface allows you to add “actions” (for example, “New message”) and information about individual messages (for them, instead of the number, the time elapsed since they were received).
In general, the documentation is still a lot of interesting things. You can find out the status of the user, for example (that is, if the user went somewhere), and you can also broadcast information about what music is playing on the site - in this case, it is displayed when you click on the speaker icon in the tray (along with the volume control). You can, of course, also add callbacks to user actions — that is, let him, for example, pause the music on your site through the same menu.
Learn what are the methods of integrating web applications into the user work environment, use the ones that you like best, experiment. It is obvious that in the future these methods will become better and better, and the possibilities will be even wider than they are now. It is possible that manufacturers of different operating systems even decide to decide on a common standard, and if not, then libraries will appear that create a level of abstraction over different APIs available in different operating systems.
Good luck and have a nice day! Write cool, user-friendly programs.
Source: https://habr.com/ru/post/163437/
All Articles