웹앱은 표준 웹 기술들을 사용하여 만들어진 앱입니다. 이것은 어느 최신 웹 브라우저에서나 동작하며 여러분들이 선호하는 도구를 사용하여 만들 수 있습니다. 웹 사이트와 구분되는 웹앱의 몇가지는 특징들이 여러가지가 있는데, 사용자가 앱을 설치 할 수 있다는거, 앱 자체가 독립적이며 항상 브라우저 창의 모습을 필요로 하지 않는다는거 그리고 오프라인에서 동작할 수 있다는 점이 있습니다. Gmail, Twitter, and Etherpad와 같은 것이 웹앱의 한 예입니다.
Mozilla 오픈 웹앱 프로젝트는 기존의 사이트들을 풍부하고 재미있고 강력한 컴퓨팅 환경에서 작동하는 앱으로 바꾸기 위해 몇몇 작은 기능들을 제안하고 있습니다. 이 앱들은 데스크탑 브라우저와 모바일 기기들에서 돌아가며, 웹 사이트보다 사용자들이 더 쉽게 찾아 실행할 수 있습니다. 사용자 기기간의 동기화와 같은 새로 생겨나는 기술들을 사용할 수도 있습니다.
시작하기 전에
웹앱을 처음 만들어보는 개발자라면 implementation state of the API을 한번 읽어보시기 바랍니다.
앱 퍼블리싱
웹 사이트를 웹앱으로 만들기 위해서 여러분이 해줘야하는 유일한 일은 앱 manifest를 추가하는 것입니다. 이것은 이름, 아이콘을 포함한 여러분의 앱을 설명하는 JSON 파일이다.
Manifest 파일은 여러분의 웹 사이트와 같은 도메인에 있어야 하며, Content-Type은 application/x-web-app-manifest+json 이어야 합니다 (참고: 현재 Firefox에서는 강제적인 것은 아니지만, Firefox OS Marketplace에는 반드시 필요합니다). Manifest에 대한 자세한 내용은 이 문서를 참조하시기 바랍니다. 여러분의 manifest의 유효성을 검사하는 도구들이 있습니다. Validating a manifest를 확인하세요.
Same origin 정책
각각의 앱은 각자 자신의 도메인에 호스팅 되어야 한다는 사실을 아는 것은 중요합니다. 다른 앱들은 같은 도메인을 공유할 수 업습니다. 각각의 앱을 서로 다른 서브 도메인에 호스팅 하는 한가지 해결책이 있기는 합니다. 이에 대한 더 자세한 정보는 FAQs about apps manifests에서 보실 수 있습니다.
앱이 설치되었는지 확인하기
웹 브라우저가 앱의 페이지를 불러올 때, 이 페이지는 사용자가 앱을 설치하지는 않은 경우를 처리할 필요가 있습니다. 아래와 같은 방법으로 getSelf()를 호출하여 앱이 설치되었는지를 확인할 수 있습니다:
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// we're installed
} else {
// not installed
}
};
request.onerror = function() {
alert('Error checking installation status: ' + this.error.message);
};
앱 설치하기
여러분의 사이트에서 직접 앱을 배포할 수 있습니다. 또한 Firefox OS Marketplace에 등록하기 전에 여러분의 사이트에서 설치하는 것을 테스트하고, manifest 유효성 검사를 하는 것은 좋은 아이디어입니다.
이 자바스크립트를 실행시키는 버튼 또는 링크를 만드세요:
var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
// great - display a message, or redirect to a launch page
};
request.onerror = function() {
// whoops - this.error.name has details
};
navigator.mozApps.install()를 실행하면 브라우저가 manifest (예: example.webapp)를 불러오고 사용자에게 어플리케이션 설치 여부를 물어봅니다. 만약 사용자가 설치를 수락하면, 브라우저에 앱이 설치됩니다. OS X에서는 어플리케이션이 "Applications" 폴더에 설치 될 것입니다.
navigator.mozApps.install()의 두번째 파라미터는 install_data이며, 사용자의 이미 설치된 어플리케이션 데이터 저장소에 몇몇 정보를 저장합니다. 이 정보는 다른 기기들에 동기화 될 수 있으며, getSelf() 호출을 사용하는 여러분의 어플리케이션이 조회할 수 있습니다(Checking whether the app is installed 보기). 예제는 다음과 같습니다:
navigator.mozApps.install(
"https://path.to/my/example.webapp",
{
user_id: "some_user"
}
);
Promoting the app
Mozilla는 검색, 리뷰, 평점 및 결제를 처리하는 app marketplace를 구축하고 있으며, 써드파티 업체들이 그들의 스토어를 열 수 있도록 개방형 내부 구조를 사용합니다. 하지만 여러분의 앱을 스토어에 열거할 필요가 없습니다.
만약 여러분이 만든 앱을 사람들에게 판매하길 원한다면, Marketplace payments를 보십시오.
Firefox OS Marketplace는 곧 이용 가능할 예정입니다. 또한 sign up for the Apps Developer newsletter에서 가입하시면, 앱 제작에 관한 팁이나 조언뿐만 아니라 Firefox OS Marketplace의 진행 상황에 관한 소식도 받을 수 있습니다.
오프라인 실행과 고급 디바이스 API 사용하기
최신 버전의 웹 브라우저는 여러분의 애플리케이션이 오프라인에서 실행되거나 혹은 장치의 기능에 접근할 수 있도록 하기 위해 매우 많은 기능을 포함하고 있습니다. 다음의 문서에서 더욱 유용한 정보를 얻을 수 있습니다:
- Running offline: HTML5 App Cache를 어떻게 사용하는지 보여주는 세부적인 내용과 데모들
- Online and Offline Events: 온라인과 오프라인 상태에서의 장치의 변화를 감지
- Using audio and video in your application
- Drawing Graphics with Canvas
- Drawing 3D Graphics with WebGL
- Using Content-Editable to create full and fast rich-text editors in your app
- Using Files from Web Applications with the HTML5 File API
- Using Drag and Drop to drag items between and within web applications
- Detecting Device Orientation
Storing data locally
The localStorage API provides a key-value store of persistent data that you can use to keep track of user data between visits to your app. If the user has a modern browser, such as Firefox 4 or later, or Google Chrome, you can also use IndexedDB, a structured, high-performance client-side datastore.
If you have data that should be shared between instances of your app across all devices that a user uses, then you should use the install_data parameter to the install() function, as described above.
Examples
Some examples of open web apps:
- MozillaBall Example (uses canvas for drawing graphics and JavaScript API to install app)