アプリ開発FAQ

端末APIと、そのできること

クロスドメイン要求をするには?

There are a few different potential solutions here:

• Proxy Server: Use a server to proxy all cross origin requests. This requires you to maintain such a server.
• JavaScript Object Notation with Padding (JSONP): This is good in many circumstances, but is vulnerable to CSRF, and disabled with CSP in privileged apps.
• Cross Origin Resource Sharing (CORS): This requires modified response headers, which you can’t control if it’s not your server. Enable CORS has some useful introductory information, and the MDN HTTP access control (CORS) page contains detailed guide and reference information. For installable apps, you need to set the origin property in your manifest to set packaged apps to a known origin.
• SystemXHR-enabled XHR: Installable apps require privileged type and systemXHR in manifest.webapp permissions. Initialize your XHR object with

  new XMLHttpRequest({mozSystem: true});

  This is a powerful permission and will get extra scrutiny during review, use with caution! See the MDN XMLHttpRequest page for more information.

通知を表示するには?

You can use system notifications on desktop Firefox, Firefox for Android, Firefox OS, Chrome and Safari. Read Using Web Notifications for a basic introduction, and Notifying users via the Notification and Vibration APIs for a more detailed example.

Note that the Notification API changed as of Firefox OS 1.2 (Gecko 26). See the Using Web Notifications Gecko notes for more specifics, and this example from the Firefox OS IRC app for a cross-version solution.

ネットワークスピードを得たり、wifi/モバイルブロードバンドを見分けるには?

Yes, when Network Information API lands. See バグ 713199 for more information.

Marketplaceのレビューが私のアプリに対して、新規ウィンドゥでリンクが開かないと注意します!

Your app will run in a chromeless runtime, without URL bar or navigation elements. When users navigate within your app to external websites, they can’t get back.

Within a running instance of a web app on Firefox OS, there is no browser chrome such as the navigation bar, refresh, home, or back buttons. It’s important then to make sure that usage of your app does not depend on these features. You can try disabling the browser chrome in Firefox by unchecking View > Toolbars > Navigation Toolbar and then navigating around your app. If you link to a site outside of your own, with no means to return, then the user must close the app and restart it just to go back. This is a poor user experience that we should try our best to avoid.

So how can we fix it? One way is to open all links to external domains in a new tab using the target="_blank" attribute. Find a target blank example. If you are not able to change all links, you can use an automated script that assigns the attribute on click. See also another example, which forces external links to open in a new window in Firefox OS.

バックグラウンドサービスの実行の仕方?

This can't be done yet, but it is a high priority for Firefox OS v1.2 (Q1 2014). Push notifications will also help.

プッシュ通知を得るには?

Push notifications are available in Firefox OS 1.1 and above. See Simple Push on MDN.

SIMカードから国/地域やキャリアを見分けるには?

For privileged apps, the Mobile Connection API provides access to carrier and region codes; these need to be translated to the actual country codes. For a snippet that allows you to do this, look at Detect carrier and region from `mozMobileConnection`'s `MNC` and `MCC`.

email送信をするのにwebアクティビティを使えるか?

Mozilla Hacks has an in-depth blog post about web activities, with technical details and several examples.

Specific example code:

new MozActivity({
    name: "new",
    data: {
           type: "mail",
           url: "mailto:?Subject=hello&body=world"
}
});

See also:

• Firefox OS boilerplate app
• Web activities guide on MDN

email経由で URL を共有するには?

This is not implemented correctly yet.

marketplaceで私のリストを開くには?

Use web activities. See the Firefox Marketplace Web Activities guide for more specifics.

アプリが権限アプリか、認証アプリか見分けるには?

In your app, you can use Apps.getSelf() to get a DOMRequest object, and then onsuccess the request result will be an application object representing the app itself. You can then use the manifest property on the app object and the type property on the manifest to tell you if your app is privileged, certified, etc. An example follows:

var request = window.navigator.mozApps.getSelf();
request.onsuccess = function() {
    console.log("Your app's name is: " + request.result.manifest.name);
    console.log(request.result.manifest.name + " is a " + request.result.manifest.type + " app.");
};

メディア

メディアの表示方法?

Currently, for security reasons, the h.264 decoder on Firefox OS devices is only available to privileged code. Because of that, you can't use the <video> element to present h.264 content at this time. You can, however, use a Web Activity. Here's a code snippet that can help:

var activity = new MozActivity({
  name: "view",
  data: {
    type: [
      "video/webm",
      "video/mp4",
      "video/3gpp",
      "video/youtube"
    ],
    url: "https://example.com/myvideo.mp4"
  }
});

This asks Firefox OS to present the MP4 video at the specified URL. You can include one or more video format types in the type list to permit.

MP4/H264/MP3/AAC/とかサポートしてる?

Firefox OS and Firefox on Android support additional codecs through hardware playback.

Support summary:

• Video: OGG, WebM, MPEG 4 & H.264 (AAC or MP3)
• Audio: MP3, AAC, M4A, OGG Vorbis, WAV

Read Supported media formats for more detail.

We recommend H.264 and MP3 for Firefox OS as it’s using hardware playback and therefore will use less CPU and battery.

See also:

• Starting an activity
• Media presentation tips
• B2G limitations

バックグラウンドの音楽再生は?

This requires the audio-channel-content permission in manifest and setting the following property on audio objects/elements:

audio.mozAudioChannelType = 'content';

Permission is available to all apps.

This is subject to change in the future, as the behaviour is not well defined.

ダウンロードしたファイルを電話機に保存する方法は?

The Device Storage API allows writing, reading and manipulation of files on the phones SD card, including access to the users music, videos and photos.

This API is privileged; it requires a packaged app and allows fine-grained permissions: see the device-storage:* permissions in our App permissions reference page.

Firefox OS は HTTP ライブストリーミング(HLS)を再生してる?

While HLS (HTTP Live Streaming) is a fantastic protocol, it's exclusive to Apple and Apple has taken no steps to standardize it other than an initial submission to the IETF. There is the possibility of using another transmission protocol, but requiring adaptive bitrate streaming; to this end, we have implemented experimental support for Media Source Extensions; you also have the options of streaming data over HTTP or WebSockets.

音楽/動画用のDRM取得方法は?

We are evaluating the feasibility of EME.

動画を録画できる?

Yes, with MediaRecorder.

アプリ開発と発行

ビジネス上の機密な資産/コードを保護するには?

Fact: Every bit of code on the client side can be "compromised". Developers need to understand and design accordingly.

You can make this harder via obfuscation with advanced compression (like Google closure compiler), and "bitcode"-style JavaScript generation via Emscripten and asm.js.

Some developers frown on JavaScript because native code requires obfuscation of source during compilation to run; JavaScript doesn't have to be obfuscated to run, but it can be, easily. Obfuscated JavaScript is analogous to compiled native code. Someone could de-obfuscate JavaScript just as they could de-compile compiled native code, but there's still a loss of information (spacing, comments, variable names) in both cases. And it is certainly possible for someone to analyze the obfuscated JavaScript code to fully understand what the code is doing, just as someone could analyze the bytecode of a compiled native binary; Rome wasn't built in a day, however.

For more detailed information and specific techniques, read Protecting your Firefox OS app code.

コード/資産用の保護された/暗号化された電話機内のストレージ?

No, packaged apps are not encrypted. Developers can implement their own algorithms to store encrypted data but storing the secrets is another problem.

ゲームをするのに電話が遅すぎる理由は?

Develop it with low-powered mobile phones in mind.

The best first step is to profile it maybe with the Firefox profiler or Webkit profiler, but this is better done through the phone.

General bottlenecks to avoid:

• Reduce/remove some optional "juice" (effects, particles, blending/composition, post processing)
• Don't scale images in your render loop with drawImage.
• Don't scale the oversized canvas down with CSS to fit device.
• Don't use heavy-weight libraries like Box2D, write physics to your own needs.
• Be aware of garbage collection and the pauses it can introduce while creating/destroying game entities, re-use object from pools.
• Use WebGL for rendering, Canvas still uses a lot of CPU!

For more information and specific code examples, read Optimizing your JavaScript game for Firefox OS.

パッケージアプリの更新版の登録方法は?

1. Go to the Firefox Marketplace
2. Sign in
3. View submissions
4. Click your app
5. Click "Manage Status & Version" on left
6. Click "Select a File..." under Upload New Version
7. Submit updated .zip file

appcache マニフェストを更新していても、アプリが更新されない?

Please check if you send Cache Headers for your appcache manifest. If you don't, Gecko will use heuristic caching and will serve it from its cache for a few hours. We recommend that you configure an immediate expiration for your appcache manifest. The following Apache config will do just that:

AddType text/cache-manifest .appcache
ExpiresByType text/cache-manifest "access"

This might be a good idea for your webapp manifest too:

AddType application/x-web-app-manifest+json .webapp
ExpiresByType application/x-web-app-manifest+json "access"

ホストアプリをパッケージアプリに置き換えるには?

You have to upload it as a new app and disable the old app. There is no upgrade path for users provided by Marketplace at the moment.

To get the same URL/slug for the new app:

1. Rename the old app's slug: Edit the listing page, click [Edit] on Basic Information and change the App URL, e.g. by appending -hosted
2. Delist the old app on the Manage Status & Versions page
3. Submit the new packaged app

パッケージアプリを端末にインストールするには?

The best way is to use the Firefox OS App Manager, which requires Firefox OS 1.2 or above.

You can also using the Firefox OS Simulator if needed:

1. Install the latest version of the Firefox OS Simulator Add-on in Firefox
2. Open the simulator through the Firefox Menu: Tools > Web Developer > Firefox OS Simulator
3. Add your app's manifest to the simulator dashboard (by pointing the simulator to either your hosted manifest or a local copy of it)
4. Connect the device
5. Make sure that remote debugging is enabled on the device (Settings > Device Information > More Information > Developer > check Remote Debugging)
6. With adb installed, run adb devices from the terminal and you should see your device listed. The simulator will recognize the device
7. Click "Push to Device" for your app

デバッグ

電話機内のアプリをデバッグするには?

The best way is to use the Firefox OS App Manager, which is compatible with Firefox OS 1.2 and above.

Alternatively, Install ADB and run adb logcat (Remote Debugging and Console needs to be enabled on the phone’s Developer Settings). Remote debugging from Firefox will be enabled in later versions.

logcat output can be filtered (only showing console logs, JS errors and filter out CSS warnings):

adb logcat GeckoConsole:* *:F | grep -vE "parsing value|Unknown property|declaration|invalid source| but found |pseudo-"

アプリが Simulator では速いけど、端末ではきわめて遅いのは?

Profiling results are very different between Desktop and phone, due to different Firefox versions and hardware. We recommend profiling on the device!

• Using Firefox built-in Profiler on device
• New Profiler for B2G (requires building and flashing)

アプリが開始してすぐに終了されてしまうのは?

Your app got killed probably due to excessive memory use or memory spikes (Out-Of-Memory; OOM).

Causes:

• localStorage access causing memory spikes
• Loading and processing large images
• Memory leaks

メモリ使用のデバッグ方法とOOM(低メモリ)は?

Look for sigkill being sent to your app. The size is listed in pages (4 KB/page). This is done via

adb shell dmesg | tail -20

The following shows the memory usage of processes on the device, at a high level.

adb shell b2g-procrank

There is also a script available: get_about_memory, which gets about:memory information off the phone. It's the same info we get in the browser if you type about:memory into the location bar. This doesn't work on Windows.

Steps to investigate OOM crashes:

• Check adb shell dmesg to ensure that the crash is actually due to OOM. If it is, you'll see something about the LMK sending SIGKIL to the app process.
• Run get_about_memory every few seconds. Getting a memory report is not very expensive (if you don't have DMD enabled), so if you can get a memory report soon before the app crashes, we can get a lot of info that way.

For more information, read Debugging out of memory errors on Firefox OS.

別のユーザエージェントを取得してしまう?

Some websites are on a whitelist to send a different user agent. This is to force the website to serve the mobile website if it doesn’t recognize the B2G user agent.

Check if the website is on this whitelist.

Why does my app stop rendering on load without error?

This may be due to

• GPU Out Of Memory or Long-running script got stopped without notice (see バグ 921519 for more details)
• View contains many scaled down images

電話機が更新されることを知るには?

Browse the phone storage using adb shell and look in:

• /system/b2g/defaults/pref/user.js
• /data/b2g/mozilla/[profile]/prefs.js

mozilla-central/b2g/app/b2g.js -> https://update.boot2gecko.org/[channel]/update.xml

Marketplace が起動しなかったり、エラーページ表示になる

The time in your device probably isn’t set correctly. it is highly likely that it is still set to some date in 1980. The big year difference causes invalid HTTPS certificates.

Set the correct time, date and timezone in Settings > Time & Date

間違って Marketplace をアンインストールしたけど、元に戻すには?

To re-install the marketplace:

1. In the browser application on device go to the Firefox Marketplace
2. Click the gear icon in the top right to open settings
3. Change the region dropdown to Worldwide, hit ok, then Save Changes
4. After settings are saved, use the Marketplace search "marketplace" without the quotes
5. If you successfully changed your region to worldwide then Marketplace should be the first result
6. Click Free, then Install

開発の際の便利なコマンドは?

In the commands below, the output is piped through colored-logcat, remove if not used.

Heavily filtered log (only JS logs and errors)

alias b2g-log='adb logcat GeckoConsole:* *:F | grep -vE "parsing value|Unknown property|declaration|invalid source| but found |pseudo-" | ~/bin/coloredlogcat.py'

Mostly log (no CSS warnings)

alias b2g-log-all='adb logcat | grep -vE "parsing value|Unknown property|declaration|invalid source| but found |pseudo-" | ~/bin/coloredlogcat.py'

Show running processes

alias b2g-ps='watch -n1 adb shell b2g-ps'

Restart B2G on device (faster than a power cycling)

alias b2g-restart='adb shell stop b2g && adb shell start b2g'

Edit device prefs (Sublime), store them and restart device

alias b2g-pref='adb pull /system/b2g/defaults/pref/user.js ~/Downloads/user.js && 
subl ~/Downloads/user.js --wait && 
adb shell mount -o rw,remount /system && 
adb push ~/Downloads/user.js /system/b2g/defaults/pref/user.js && 
adb shell mount -o ro,remount /system && 
adb reboot'

<meta name="viewport"> が動きませんが?

This is currently only supported in the browser and not in installable apps. For more information, read バグ 830306 and バグ 845690.

AngularJS使用時に "address wasn't understood" エラーや、壊れた画像が出るのは?

If you have developed a packaged app with AngularJS, you may see a broken image or run into this error message:

The address wasn't understood 
Firefox doesn't know how to open this address, because the protocol (unsafe) isn't associated with any program. 

When you use Angular data binding to generate a URL, Angular will match the URL against its whitelist. If the URL does not match, Angular prefixes the url with "unsafe:" (see the Angular documentation). To make you app work with AngularJS, you can add "app:/"--the protocol FirefoxOS packaged apps use--to Angular's whitelist. In your app's configuration, this is how to whitelist "app:/":

var app = angular.module( 'myApp', [] ).config(['$compileProvider', function($compileProvider) {
        $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|app):/);
    }
]);

Or in AngularJS 1.1+

var app = angular.module( 'myApp', [] ).config(['$compileProvider', function($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|app):/);
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|app):/);
    }
]);

端末

端末の初期設定を編集するには?

These steps depend on Sublime Text being installed.

1. Pull the configuration file from the phone into your Downloads folder (edit target folder if needed):

   adb pull /system/b2g/defaults/pref/user.js ~/Downloads/user.js &&
   

2. Open the user.js file which is now in ~/Downloads/ in your favorite code editor to add or edit preferences.
3. Upload the file back to the phone and restart the main process:

   adb shell mount -o rw,remount /system &&
   adb push ~/Downloads/user.js /system/b2g/defaults/pref/user.js &&
   adb shell mount -o ro,remount /system &&
   adb reboot

If you have Sublime Text installed you can also execute this one-liner which pulls the file, opens Sublime, waits until you close Sublime and uploads the edited file back to the phone:

adb pull /system/b2g/defaults/pref/user.js ~/Downloads/user.js &&
subl ~/Downloads/user.js --wait &&
adb shell mount -o rw,remount /system &&
adb push ~/Downloads/user.js /system/b2g/defaults/pref/user.js &&
adb shell mount -o ro,remount /system &&
adb reboot

 Geeksphone KeonやPeakを更新するには?

See Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone

The easy way: Geeksphone provide updates on a public download server:

1. Go to the Geeksphone download server.
2. Download the latest stable or nightly build for your device
3. Unzip the downloaded assets
4. Connect device
5. Enable remote debugging on device (Settings > Device Information > More Information > Developer > Remote Debugging)
6. Run ./flash.sh from the unzipped downloaded assets

The hard way: Replace app.update.url with B2G Nightly updates:

1. Grab and edit the user.js preferences from the phone (the following command uses Sublime, change if needed):

   adb pull /system/b2g/defaults/pref/user.js ~/Downloads/user.js &&
   subl ~/Downloads/user.js --wait &&
   adb shell mount -o rw,remount /system &&
   adb push ~/Downloads/user.js /system/b2g/defaults/pref/user.js &&
   adb shell mount -o ro,remount /system &&
   adb reboot

2. Find pref("app.update.url", "https://gpfos.s3.amazonaws.com/keon/update.xml");
3. Change the URL value to https://update.boot2gecko.org/nightly/update.xml
4. Save and close your editor, the previous command will put the updated prefs back and relaunch b2g

You can force OTA updates using Check Now in the Firefox OS Settings. Changes in user.js should be persisted between updates, but I am not sure.

The hardest way: Flash only gecko and gaia.