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 |