반응형

ionic project 생성시 이제 default가 version 2로 지정됨


http://ionicframework.com/getting-started/ 들어가보면 기존에는 


버전 2로 하려면 아래와 같이 생성했었는데, 

1
ionic start ExampleProject blank --v2

이제는 버전 1로 만들고 싶을때 아래와 같이 해야 한다. 

1
ionic start ExampleProject blank --v1


단, npm install  한번 더 하고 테스트 해보시길. 

> npm install -g cordova ionic


device에 넣을때에도 ionic run android 가 아니라 

> ionic cordova run android




.

반응형
반응형

cordova-plugin-inappbrowser


https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/


Installation

cordova plugin add cordova-plugin-inappbrowser

If you want all page loads in your app to go through the InAppBrowser, you can simply hook window.open during initialization. For example:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
}

cordova.InAppBrowser.open

Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.

var ref = cordova.InAppBrowser.open(url, target, options);
  • ref: Reference to the InAppBrowser window when the target is set to '_blank'(InAppBrowser)

  • url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.

  • target: The target in which to load the URL, an optional parameter that defaults to _self(String)

    • _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
    • _blank: Opens in the InAppBrowser.
    • _system: Opens in the system's web browser.
  • options: Options for the InAppBrowser. Optional, defaulting to: location=yes(String)

    The options string must not contain any blank space, and each feature's name/value pairs must be separated by a comma. Feature names are case insensitive. All platforms support the value below:

    • location: Set to yes or no to turn the InAppBrowser's location bar on or off.

    Android only:

    • hidden: set to yes to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to no (default) to have the browser open and load normally.
    • clearcache: set to yes to have the browser's cookie cache cleared before the new window is opened
    • clearsessioncache: set to yes to have the session cookie cache cleared before the new window is opened
    • zoom: set to yes to show Android browser's zoom controls, set to no to hide them. Default value is yes.
    • hardwareback: set to yes to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is yes, so you must set it to no if you want the back button to simply close the InAppBrowser.
    • mediaPlaybackRequiresUserAction: Set to yes to prevent HTML5 audio or video from autoplaying (defaults to no).
    • shouldPauseOnSuspend: Set to yes to make InAppBrowser WebView to pause/resume with the app to stop background audio (this may be required to avoid Google Play issues like described in CB-11013).
    • useWideViewPort: Sets whether the WebView should enable support for the "viewport" HTML meta tag or should use a wide viewport. When the value of the setting is no, the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is yes and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used. (defaults to yes).

    iOS only:

    • closebuttoncaption: set to a string to use as the Done button's caption. Note that you need to localize this value yourself.
    • disallowoverscroll: Set to yes or no (default is no). Turns on/off the UIWebViewBounce property.
    • hidden: set to yes to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to no (default) to have the browser open and load normally.
    • clearcache: set to yes to have the browser's cookie cache cleared before the new window is opened
    • clearsessioncache: set to yes to have the session cookie cache cleared before the new window is opened
    • toolbar: set to yes or no to turn the toolbar on or off for the InAppBrowser (defaults to yes)
    • enableViewportScale: Set to yes or no to prevent viewport scaling through a meta tag (defaults to no).
    • mediaPlaybackRequiresUserAction: Set to yes to prevent HTML5 audio or video from autoplaying (defaults to no).
    • allowInlineMediaPlayback: Set to yes or no to allow in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. The HTML's video element must also include the webkit-playsinline attribute (defaults to no)
    • keyboardDisplayRequiresUserAction: Set to yes or no to open the keyboard when form elements receive focus via JavaScript's focus() call (defaults to yes).
    • suppressesIncrementalRendering: Set to yes or no to wait until all new view content is received before being rendered (defaults to no).
    • presentationstyle: Set to pagesheetformsheet or fullscreen to set the presentation style (defaults to fullscreen).
    • transitionstyle: Set to fliphorizontalcrossdissolve or coververtical to set the transition style (defaults to coververtical).
    • toolbarposition: Set to top or bottom (default is bottom). Causes the toolbar to be at the top or bottom of the window.

    Windows only:

    • hidden: set to yes to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to no (default) to have the browser open and load normally.
    • fullscreen: set to yes to create the browser control without a border around it. Please note that if location=no is also specified, there will be no control presented to user to close IAB window.
    • hardwareback: works the same way as on Android platform.

Supported Platforms

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • Firefox OS
  • iOS
  • OSX
  • Windows 8 and 8.1
  • Windows Phone 7 and 8
  • Browser




.

반응형
반응형

cordova ionic install 중 권한에러 발생시


http://ionicframework.com/getting-started/ 에서  


> npm -g install cordova ionic 


이었는데, 에러 발생 - code: 'EACCES'




그런데, 권한문제인거같아 찾아보니 sudo 권한으로 실행하면 성공.


> sudo npm -g install cordova ionic


stackoverflow 참조 :  Fail to install cordova with npm on Mac os x



반응형
반응형


https://github.com/vilic/cordova-plugin-tts


 error issue :  https://forum.ionicframework.com/t/problems-with-text-to-speech/31927


Cordova Text-to-Speech Plugin

Platforms

iOS 7+
Windows Phone 8
Android 4.0.3+ (API Level 15+)

Installation

cordova plugin add cordova-plugin-tts

Usage

// make sure your the code gets executed only after `deviceready`.
document.addEventListener('deviceready', function () {
    // basic usage
    TTS
        .speak('hello, world!', function () {
            alert('success');
        }, function (reason) {
            alert(reason);
        });
    
    // or with more options
    TTS
        .speak({
            text: 'hello, world!',
            locale: 'en-GB',
            rate: 0.75
        }, function () {
            alert('success');
        }, function (reason) {
            alert(reason);
        });
}, false);

Tips: speak an empty string to interrupt.

반응형
반응형



cordova 한글 문서 : https://cordova.apache.org/docs/ko/5.4.0/guide/overview/index.html



아파치 코르도바는 오픈 소스 모바일 개발 프레임 워크입니다. 각 모바일 플랫폼의 네이티브 개발 언어를 피하고 크로스 플랫폼 개발을 위한 HTML5, CSS3, 자바 스크립트 등 표준 웹 기술을 사용할 수 있습니다. 응용 프로그램 각 플랫폼을 타겟으로 래퍼 내에서 실행 하 고 표준 API 바인딩을 액세스할 각 장치 센서, 데이터 및 네트워크 상태에 의존.

아파치 코르도바 최상위 프로젝트 아파치 소프트웨어 재단 (ASF) 내에서 2012 년 10 월에에서 졸업 했다. ASF를 통해 미래의 코르도바 개발 프로젝트의 열려 지기를 지킬 것 이다. 그것은 항상 무료 및 오픈 소스 아파치 라이센스 버전 2.0 아래 유지 됩니다. 자세한 내용은 cordova.apache.org 를 방문 하십시오.

만약 당신이 아파치 코르도바를 사용:

  • 모바일 개발자 및 다시 각 플랫폼의 언어와 도구를 구현 하지 않고 하나 이상의 플랫폼에서 응용 프로그램을 확장 하려면 원하는 설정 합니다.

  • 웹 애플 리 케이 션은 다양 한 애플 리 케이 션에 배포 패키지를 배포 하 고 웹 개발자 포털을 저장 합니다.

  • 모바일 개발자는 WebView (특별 한 브라우저 창) 장치 레벨 Api에 액세스할 수 있는 기본 응용 프로그램 구성 요소를 혼합에 관심된 또는 네이티브 및 WebView 구성 요소 간의 인터페이스를 플러그인을 개발 하려는 경우.


********** [APP] Cordova 개발 환경 구축 : http://jchlee.tistory.com/37  *******


.

반응형
반응형

Everything You Should Know About Progressive Web Apps

What is a Progressive Web App

In its core a progressive web app isn’t any different from a normal website – it’s made of HTML, CSS and JavaScript, and lives in the browser. What separates PWAs from regular websites is a list of 10 key concepts that need to be fulfilled. Here they are, taken directly from the Google Developers website.

  1. Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  2. Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  3. Responsive – Fit any form factor: desktop, mobile, tablet, or whatever is next.
  4. Connectivity-independent – Enhanced with service workers to work offline or on low quality networks.
  5. App-like – Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
  6. Fresh – Always up-to-date thanks to the service worker update process.
  7. Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  8. Re-engageable – Make re-engagement easy through features like push notifications.
  9. Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  10. Linkable – Easily share via URL and not require complex installation.


What a Progressive Web App is NOT

The concept of PWAs shouldn’t be confused with:




앞서 언급 한 모든 기술은 HTML 앱을 포장하여 .apk , .exe 또는 기타 다른 앱 파일처럼 실행 파일로 패키지화합니다.이 파일 은 각 앱 스토어에서 다운로드 받아 사용자 기기에 설치해야합니다.

 

PWA는 설치가 필요하지 않으며 Google Play 또는 iTunes App Store에서 사용할 수 없습니다. PWA를 다운로드하려면 웹 사이트를 방문한 다음 홈 화면에 바로 가기로 저장해야합니다. 별도의 iOS 및 Android 버전을 개발하고 유지 관리하는 것은 더 이상 문제가되지 않지만 브라우저 지원을 고려해야합니다.



반응형

+ Recent posts