1 {{+bindTo:partials.standard_nacl_article}}
3 <section id=
"distributing-your-application">
4 <span id=
"distributing"></span><h1 id=
"distributing-your-application"><span id=
"distributing"></span>Distributing Your Application
</h1>
5 <div class=
"contents local" id=
"contents" style=
"display: none">
7 <li><a class=
"reference internal" href=
"#portable-native-client" id=
"id2">Portable Native Client
</a></li>
8 <li><p class=
"first"><a class=
"reference internal" href=
"#non-portable-native-client" id=
"id3">Non-portable Native Client
</a></p>
10 <li><a class=
"reference internal" href=
"#chrome-apps" id=
"id4">Chrome apps
</a></li>
11 <li><a class=
"reference internal" href=
"#extension" id=
"id5">Extension
</a></li>
12 <li><a class=
"reference internal" href=
"#hosted-application" id=
"id6">Hosted application
</a></li>
13 <li><a class=
"reference internal" href=
"#registering-native-client-modules-to-handle-mime-types" id=
"id7">Registering Native Client modules to handle MIME types
</a></li>
18 </div><p>This document describes how to distribute Portable Native Client applications
19 on the web, and Native Client applications through the
20 <a class=
"reference external" href=
"/webstore">Chrome Web Store
</a> (CWS).
</p>
21 <h2 id=
"portable-native-client">Portable Native Client
</h2>
22 <p>Portable Native Client is enabled by default for web pages, so no separate
23 distribution step is requred. Making PNaCl a part of your web application is as
24 simple as embedding a manifest file that points to a
<strong>pexe
</strong>. See the
25 <a class=
"reference internal" href=
"/native-client/overview.html"><em>technical overview
</em></a> for more details.
</p>
26 <img alt=
"/native-client/images/nacl-in-a-web-app.png" src=
"/native-client/images/nacl-in-a-web-app.png" />
27 <p>The only constraint for distributing PNaCl modules with a web application is
28 abiding by the
<a class=
"reference external" href=
"http://en.wikipedia.org/wiki/Same_origin_policy">Same-origin policy
</a>. The PNaCl manifest and
29 <strong>pexe
</strong> must either be served from the same domain with the HTML, or the
<a class=
"reference external" href=
"http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS
31 be used to safely host them on a different domain.
</p>
32 <h2 id=
"non-portable-native-client">Non-portable Native Client
</h2>
33 <p>NaCl modules are only allowed for applications distributed through the
<a class=
"reference external" href=
"https://chrome.google.com/webstore/category/apps">Chrome
35 The CWS requirement is in place to prevent the proliferation of Native Client
36 executables (
<strong>nexe
</strong>s) compiled for specific architecures (e.g., x86-
32,
38 <p>In general, the considerations and guidelines for distributing applications
39 through the Chrome Web Store apply to applications that contain NaCl modules as
40 well. Here are a few pointers to relevant documentation:
</p>
41 <ul class=
"small-gap">
42 <li><a class=
"reference external" href=
"/webstore">CWS Overview
</a></li>
43 <li><a class=
"reference external" href=
"/webstore/choosing">Choosing an App Type
</a></li>
44 <li><a class=
"reference external" href=
"/apps">Getting started with Chrome apps
</a></li>
45 <li><a class=
"reference external" href=
"/extensions">Chrome extensions
</a></li>
47 <p>In this document, we
’ll focus only on distribution issues specific to
48 applications that contain NaCl modules.
</p>
49 <h3 id=
"chrome-apps"><span id=
"distributing-packaged"></span>Chrome apps
</h3>
50 <p>A Chrome app is a special zip file (with a .crx extension) hosted in the Chrome
51 Web Store. This file contains all of the application parts: A Chrome Web Store
52 manifest file (manifest.json), an icon, and all of the regular Native Client
53 application files. Refer to
<a class=
"reference external" href=
"/apps">Chrome Apps
</a> for more information about
54 creating a Chrome app.
</p>
55 <h4 id=
"reducing-the-size-of-the-user-download-package">Reducing the size of the user download package
</h4>
58 Packaging an app in a multi-platform zip file can significantly reduce the
59 download and storage requirements for the app.
61 <p>As described above, to upload a Chrome app to the CWS you have to create a zip
62 file with all the resources that your app needs, including .nexe files for
63 multiple architectures (x86-
64, x86-
32, and ARM). Prior to Chrome
28, when users
64 installed your app they had to download a .crx file from the CWS with all the
65 included .nexe files.
</p>
66 <p>Starting with Chrome
28, the Chrome Web Store includes a feature called
67 <strong>multi-platform zip files.
</strong> This feature lets you structure your application
68 directory and zip file in a way that reduces the size of the user download
69 package. Here
’s how this feature works:
</p>
70 <ul class=
"small-gap">
71 <li>You still include all the .nexe files in the zip file that you upload to
72 the CWS, but you designate specific .nexe files (and other files if
73 appropriate) for specific architectures.
</li>
74 <li>The Chrome Web Store re-packages your app, so that users only download
75 the files that they need for their specific architecture.
</li>
77 <p>Here is how to use this feature:
</p>
79 <li><p class=
"first">Create a directory called
<code>_platform_specific
</code>.
80 Put this directory at the same level where your CWS manifest file,
81 <code>manifest.json
</code>, is located.
</p>
83 <li><p class=
"first">Create a subdirectory for each specific architecture that you support,
84 and add the files for each architecture in the relevant subdirectory.
</p>
85 <p>Here is a sample app directory structure:
</p>
94 | |-- _platform_specific/
96 | | | |-- my_module_x86_64.nexe
98 | | | |-- my_module_x86_32.nexe
100 | | | |-- my_module_arm.nexe
102 | | | |-- my_module_x86_64.nexe
103 | | | |-- my_module_x86_64.nexe
104 | | | |-- my_module_x86_32.nexe
106 <p>Please note a few important points about the app directory structure:
</p>
107 <ul class=
"small-gap">
108 <li><p class=
"first">The architecture-specific subdirectories:
</p>
109 <ul class=
"small-gap">
110 <li><p class=
"first">can have arbitrary names;
</p>
112 <li><p class=
"first">must be directly under the
<code>_platform_specific
</code> directory; and
</p>
114 <li><p class=
"first">must be listed in the CWS manifest file (see step
3 below).
</p>
118 <li><p class=
"first">You can include a fallback subdirectory that provides a download package
119 with all the architecture-specific files. (In the example above this
120 is the
<code>all/
</code> subdirectory.) This folder is used if the user has an
121 earlier version of Chrome (prior to Chrome
28) that does not support
122 multi-platform zip files.
</p>
124 <li><p class=
"first">You cannot include any files directly in the folder
125 <code>_platform_specific
</code>. All architecture-specific files
126 must be under one of the architecture-specific subdirectories.
</p>
128 <li><p class=
"first">Files that are not under the
<code>_platform_specific
</code> directory are
129 included in all download packages. (In the example above, that
130 includes
<code>my_app.html
</code>,
<code>my_module.nmf
</code>,
131 and the
<code>css/
</code>,
<code>images/
</code>, and
<code>scripts/
</code> directories.)
</p>
135 <li><p class=
"first">Modify the CWS manifest file,
<code>manifest.json
</code>, so that it specifies which
136 subdirectory under
<code>_platform_specific
</code> corresponds to which architecture.
</p>
137 <p>The CWS manifest file must include a new name/value pair, where the name
138 is
<code>platforms
</code> and the value is an array. The array has an object for
139 each Native Client architecture with two name/value pairs:
</p>
140 <table border=
"1" class=
"docutils">
143 <thead valign=
"bottom">
144 <tr class=
"row-odd"><th class=
"head">Name
</th>
145 <th class=
"head">Value
</th>
149 <tr class=
"row-even"><td><code>nacl_arch
</code></td>
150 <td><code>x86-
64</code>,
<code>x86-
32</code>, or
<code>arm
</code></td>
152 <tr class=
"row-odd"><td><code>sub_package_path
</code></td>
153 <td>the path of the directory (starting
154 with
<code>_platform_specific
</code>) that
155 contains the files for the designated
156 NaCl architecture
</td>
160 <p>Here is a sample
<code>manifest.json
</code> file:
</p>
163 "name
":
"My Reminder App
",
164 "description
":
"A reminder app that syncs across Chrome browsers.
",
165 "manifest_version
":
2,
166 "minimum_chrome_version
":
"28",
167 "offline_enabled
": true,
168 "version
":
"0.3",
169 "permissions
": [
170 {
"fileSystem
": [
"write
"]},
175 "background
": {
176 "scripts
": [
"scripts/background.js
"]
180 "16":
"images/icon-
16x16.png
",
181 "128":
"images/icon-
128x128.png
"
183 "platforms
": [
185 "nacl_arch
":
"x86-
64",
186 "sub_package_path
":
"_platform_specific/x86-
64/
"
189 "nacl_arch
":
"x86-
32",
190 "sub_package_path
":
"_platform_specific/x86-
32/
"
193 "nacl_arch
":
"arm
",
194 "sub_package_path
":
"_platform_specific/arm/
"
197 "sub_package_path
":
"_platform_specific/all/
"
202 <p>Note the last entry in the CWS manifest file above, which specifies a
203 <code>sub_package_path
</code> without a corresponding
<code>nacl_arch
</code>. This entry
204 identifies the fallback directory, which is included in the download
205 package if the user architecture does not match any of the listed NaCl
206 architectures, or if the user is using an older version of Chrome that
207 does not support multi-platform zip files.
</p>
209 <li><p class=
"first">Modify your application as necessary so that it uses the files for the
210 correct user architecture.
</p>
211 <p>To reference architecture-specific files, use the JavaScript API
212 <a class=
"reference external" href=
"/extensions/runtime.html#method-getPlatformInfo">chrome.runtime.getPlatformInfo()
</a>.
213 As an example, if you have architecture-specific files in the directories
214 <code>x86-
64</code>,
<code>x86-
32</code>, and
<code>arm
</code>, you can use the following JavaScript
215 code to create a path for the files:
</p>
216 <pre class=
"prettyprint">
217 function getPath(name) {
218 return '_platform_specific/' +
219 chrome.runtime.getPlatformInfo().nacl_arch +
224 <li><p class=
"first">Test your app, create a zip file, and upload the app to the CWS as before.
</p>
227 <h4 id=
"additional-considerations-for-a-chrome-app"><span id=
"additional-considerations-packaged"></span>Additional considerations for a Chrome app
</h4>
228 <ul class=
"small-gap">
229 <li>In the description of your application in the CWS, make sure to mention that
230 your application is a Native Client application that only works with the
231 Chrome browser. Also make sure to identify the minimum version of Chrome
232 that your application requires.
</li>
233 <li><p class=
"first">Hosted and packaged applications have a
“launch
” parameter in the CWS
234 manifest. This parameter is present only in apps (not extensions), and it
235 tells Google Chrome what to show when a user starts an installed app. For
238 "launch
": {
239 "web_url
":
"http://mail.google.com/mail/
"
243 <li>If you want to write local data using the Pepper
244 <a class=
"reference external" href=
"/native-client/peppercpp/classpp_1_1_file_i_o">FileIO
</a>
245 API, you must set the
‘unlimitedStorage
’ permission in your Chrome Web
246 Store manifest file, just as you would for a JavaScript application that
247 uses the HTML5 File API.
</li>
248 <li>For Chrome apps, you can only use in-app purchases.
</li>
249 <li>You can place your application in the Google Web Store with access only to
250 certain people for testing. See
<a class=
"reference external" href=
"/webstore/publish">Publishing to test accounts
</a> for more information.
</li>
252 <h3 id=
"extension">Extension
</h3>
253 <p>The NaCl-specific notes for a
<a class=
"reference internal" href=
"#distributing-packaged"><em>package application
</em></a>
254 apply to extensions as well.
</p>
255 <h3 id=
"hosted-application">Hosted application
</h3>
256 <p>The .html file, .nmf file (Native Client manifest file), and .nexe files must
257 be served from the same domain, and the Chrome Web Store manifest file must
258 specify the correct, verified domain. Other files can be served from the same
259 or another domain.
</p>
260 <p>In addition, see
<a class=
"reference internal" href=
"#additional-considerations-packaged"><em>Additional considerations for a Chrome apps
</em></a>.
</p>
261 <h3 id=
"registering-native-client-modules-to-handle-mime-types">Registering Native Client modules to handle MIME types
</h3>
262 <p>If you want Chrome to use a Native Client module to display a particular type
263 of content, you can associate the MIME type of that content with the Native
264 Client module. Use the
<code>nacl_modules
</code> attribute in the Chrome Web Store
265 manifest file to register a Native Client module as the handler for one or more
266 specific MIME types. For example, the bold code in the snippet below registers
267 a Native Client module as the content handler for the OpenOffice spreadsheet
271 "name
":
"My Native Client Spreadsheet Viewer
",
272 "version
":
"0.1",
273 "description
":
"Open spreadsheets right in your browser.
",
274 "nacl_modules
": [{
275 "path
":
"SpreadsheetViewer.nmf
",
276 "mime_type
":
"application/vnd.oasis.opendocument.spreadsheet
"
280 <p>The value of
“path
” is the location of a Native Client manifest file (.nmf)
281 within the application directory. For more information on Native Client
282 manifest files, see
<a class=
"reference internal" href=
"/native-client/devguide/coding/application-structure.html#manifest-file"><em>Manifest Files
</em></a>.
</p>
283 <p>The value of
“mime_type
” is a specific MIME type that you want the Native
284 Client module to handle. Each MIME type can be associated with only one .nmf
285 file, but a single .nmf file might handle multiple MIME types. The following
286 example shows an extension with two .nmf files that handle three MIME types.
</p>
289 "name
":
"My Native Client Spreadsheet and Document Viewer
",
290 "version
":
"0.1",
291 "description
":
"Open spreadsheets and documents right in your browser.
",
292 "nacl_modules
": [{
293 "path
":
"SpreadsheetViewer.nmf
",
294 "mime_type
":
"application/vnd.oasis.opendocument.spreadsheet
"
297 "path
":
"SpreadsheetViewer.nmf
",
298 "mime_type
":
"application/vnd.oasis.opendocument.spreadsheet-template
"
301 "path
":
"DocumentViewer.nmf
",
302 "mime_type
":
"application/vnd.oasis.opendocument.text
"
306 <p>The
<code>nacl_modules
</code> attribute is optional
—specify this attribute only if
307 you want Chrome to use a Native Client module to display a particular type of
311 {{/partials.standard_nacl_article}}