| OLD | NEW |
| 1 # Ballista Explained | 1 # Ballista Explained |
| 2 | 2 |
| 3 **Date**: 2015-09-25 | 3 **Date**: 2015-09-25 |
| 4 | 4 |
| 5 **Ballista** is a project to explore inter-website communication; specifically, | 5 **Ballista** is a project to explore inter-website communication; specifically, |
| 6 communication between one website and another site of the user's choosing. | 6 communication between one website and another site of the user's choosing. |
| 7 Imagine being able to: | 7 Imagine being able to: |
| 8 | 8 |
| 9 * Click a "share" button, then choose which social network or other web/native | 9 * Click a "share" button, then choose which social network or other web/native |
| 10 app to share it with, based on which apps *you* have installed (not a | 10 app to share it with, based on which apps *you* have installed (not a |
| (...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 107 | 107 |
| 108 To let the user share the current page's URL with an app or website of their | 108 To let the user share the current page's URL with an app or website of their |
| 109 choosing, just attach this JavaScript code to a "share" button. | 109 choosing, just attach this JavaScript code to a "share" button. |
| 110 | 110 |
| 111 > **Note:** Only one-way actions can be requested from a foreground page. | 111 > **Note:** Only one-way actions can be requested from a foreground page. |
| 112 | 112 |
| 113 #### foreground.js | 113 #### foreground.js |
| 114 | 114 |
| 115 ```js | 115 ```js |
| 116 shareButton.addEventListener('click', () => { | 116 shareButton.addEventListener('click', () => { |
| 117 navigator.actions.performAction('share', {url: window.location.href}) | 117 navigator.share({url: window.location.href}) |
| 118 .then(action => console.log(action)); | 118 .then(console.log('Share successful')); |
| 119 }); | 119 }); |
| 120 ``` | 120 ``` |
| 121 | 121 |
| 122 #### User experience | 122 #### User experience |
| 123 | 123 |
| 124 1. The user clicks the "share" button. The browser shows a list of registered | 124 1. The user clicks the "share" button. The browser shows a list of registered |
| 125 share handlers, and the user can pick one. | 125 share handlers, and the user can pick one. |
| 126 | 126 |
| 127 ### Share handler | 127 ### Share handler |
| 128 | 128 |
| 129 Here's how to register a website to appear in the list of apps that can handle a | 129 Here's how to register a website to appear in the list of apps that can handle a |
| 130 "share" intent on Android, or a "share" action from another website. | 130 "share" intent on Android, or a "share" action from another website. |
| 131 | 131 |
| 132 You need both a [web app manifest](https://w3c.github.io/manifest/) and a | 132 You need both a [web app manifest](https://w3c.github.io/manifest/) and a |
| 133 [service | 133 [service |
| 134 worker](http://slightlyoff.github.io/ServiceWorker/spec/service_worker/), | 134 worker](http://slightlyoff.github.io/ServiceWorker/spec/service_worker/), |
| 135 so that your site can be contacted even when the user does not have it open in | 135 so that your site can be contacted even when the user does not have it open in |
| 136 any tabs. | 136 any tabs. |
| 137 | 137 |
| 138 #### manifest.webmanifest | 138 #### manifest.webmanifest |
| 139 | 139 |
| 140 ```JSON | 140 ```JSON |
| 141 { | 141 { |
| 142 "name": "Includinator", | 142 "name": "Includinator", |
| 143 "short_name": "Includinator", | 143 "short_name": "Includinator", |
| 144 "icons": [...], | 144 "icons": [...], |
| 145 "actions": [ | 145 "supports_share": true |
| 146 { | |
| 147 "verb": "share" | |
| 148 } | |
| 149 ] | |
| 150 } | 146 } |
| 151 ``` | 147 ``` |
| 152 | 148 |
| 153 #### serviceworker.js | 149 #### serviceworker.js |
| 154 | 150 |
| 155 ```js | 151 ```js |
| 156 navigator.actions.addEventListener('handle', event => { | 152 navigator.actions.addEventListener('share', event => { |
| 157 if (event.options.verb == 'share') { | 153 if (event.data.url === undefined) |
| 158 if (event.data.url === undefined) | 154 throw new Error('Did not contain URL.'); |
| 159 throw new Error('Did not contain URL.'); | |
| 160 | 155 |
| 161 includinate(event.data.url); | 156 includinate(event.data.url); |
| 162 } | |
| 163 }); | 157 }); |
| 164 ``` | 158 ``` |
| 165 | 159 |
| 166 #### User experience | 160 #### User experience |
| 167 | 161 |
| 168 1. When the user is on your site, the browser provides a button to register the | 162 1. When the user is on your site, the browser provides a button to register the |
| 169 app as a "share handler". | 163 app as a "share handler". |
| 170 2. The user clicks this button. The app is registered and appears in the list of | 164 2. The user clicks this button. The app is registered and appears in the list of |
| 171 share handlers that the browser shows to the user. | 165 share handlers that the browser shows to the user. |
| 172 | 166 |
| (...skipping 108 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 281 app as an editor for text files. | 275 app as an editor for text files. |
| 282 2. The user clicks this button. The app is registered and appears in the list of | 276 2. The user clicks this button. The app is registered and appears in the list of |
| 283 text file editors that the browser shows to the user. It is also registered | 277 text file editors that the browser shows to the user. It is also registered |
| 284 as a file association for `*.txt` files in the host OS. | 278 as a file association for `*.txt` files in the host OS. |
| 285 3. When the user opens a text file from another website, the browser lets them | 279 3. When the user opens a text file from another website, the browser lets them |
| 286 pick your app. Or, the user can right-click on a text file in their local | 280 pick your app. Or, the user can right-click on a text file in their local |
| 287 file browser and choose to open it with your app. Either way, this pops open | 281 file browser and choose to open it with your app. Either way, this pops open |
| 288 your app in a new browser tab. | 282 your app in a new browser tab. |
| 289 4. When the user clicks "Save" in your app, the updated file is passed back to | 283 4. When the user clicks "Save" in your app, the updated file is passed back to |
| 290 the requester website, or written back to disk. | 284 the requester website, or written back to disk. |
| OLD | NEW |