강의

N
챌린지

멘토링

N
클립

커뮤니티

개발 · 프로그래밍

/

웹 개발

Ionic PWA (프로그래시브 웹 앱) 만들기

IONIC hybrid framework와 FIREBASE를 사용하여 요즘 한창 이슈가 되고 있는 PWA(Progressive Web app)을 구현해 봅니다.

(5.0) 수강평 3개

수강생 99명

  • 김철현
IONICPWA

먼저 경험한 수강생들의 후기

Firebase와 Service-Worker를 사용하여 Ionic PWA 만들기

아이오닉3와 파이어베이스를 사용하여 요즘 한창 이슈가 되고 있는 PWA(Progressive Web app)을 구현해 봅니다. 실제 웹앱을 구현해보면서 앞으로 진화 될 PWA의 개념을 정립해보세요.

PWA란?

모바일 웹과 앱의 장점을 모두 취하려는 "앱 같은 웹"입니다. PWA는 서비스 작업자(service-worker)라는 새로운 API를 활용해서 웹앱의 중요한 부분을 캐싱하고 즉시 로딩이 가능하게 합니다. 그래서 모바일 웹이지만 푸시 알림도 보낼 수 있습니다. (참고) https://developers.google.com/web/progressive-web-apps/

PWA를 구현을 지원하는 다양한 프레임 워크가 있지만, Web/App Component들을 사용하고, 실행 가능한 service-worker를 내장하고 있으며, 다양한 내부 /외부 API를 사용할 수 있는 아이오닉 프레임 워크가 PWA를 구현하는데 있어서 가장 적합하다고 생각합니다. 현재 이를 이용한 다양한 PWA 관련 프로잭트가 진행 되고 있습니다. *Ionic에서는 아직 초기 버전이지만 자체적으로 개발한 PWA-toolkit를 제공하고 있습니다.

  도움이 되는 분들

  • 하이브리드 앱을 개발하고 싶은 분
  • PWA를 개발하고 싶으신 분
  • Ionic을 처음 접하는 초보자

  강의 특징

main feature

ionic 3 Firebase realtime Database CRUD/indexing Firebase Auth web push message Moment.js IOS/Android Building Modal ActionSheet infinite scroll Time Stemp response grid

개발 환경

cli packages: (/usr/local/lib/node_modules) @ionic/cli-utils : 1.19.0 ionic (Ionic CLI) : 3.19.0 global packages: cordova (Cordova CLI) : 7.1.0 local packages: @ionic/app-scripts : 3.1.4 Cordova Platforms : android 6.3.0 Ionic Framework : ionic-angular 3.9.2 System: ios-deploy : 1.9.2 Node : v8.6.0 npm : 5.5.1 OS : macOS High Sierra Xcode : Xcode 9.2 Build version 9C40b

지식공유자 소개

김철현

SDS LGAd 심마니(검색엔진) Mnet Media(현 CJ E&M) 을 거쳐 현재 프리랜서/컨설턴트로 활동중

안녕하세요
입니다.

2,069

명

수강생

45

개

수강평

25

개

답변

4.9

점

강의 평점

3

개

강의

커리큘럼

전체

27개 ∙ (5시간 3분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

3개

5.0

3개의 수강평

  • hakjong0634님의 프로필 이미지
    hakjong0634

    수강평 1

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    You explained ionic and PWA in an easy-to-understand way... You explained the concept of PWA and the approach to ionic in an easy-to-understand way. I'm very interested in ionic, so I hope there will be many other courses. Thank you.

    • cjswntjd0134님의 프로필 이미지
      cjswntjd0134

      수강평 17

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      I find Ionic more convenient to write in TypeScript than in JavaScript. The lecture is structured by functional development unit, so I think I can use it as a module unit when developing other things. Thank you for the lecture~

      • jingetta32850님의 프로필 이미지
        jingetta32850

        수강평 2

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        The course was really good I think I learned a lot about Ionic through this practical course IOS Android was a headache, but thanks to this, it seems to have been solved^^ Ah! Those who are planning to take the course, it would be much better if you first listen to the Ionic email authentication course (free) among the instructor's courses.

        김철현님의 다른 강의

        지식공유자님의 다른 강의를 만나보세요!

        Building an offline first web with Ionic강의 썸네일

        Building an offline first web with Ionic

        killkch0331

        In this lecture, we will create a simple phone book web using Ionic and CouchDB, which are currently the most optimized for PWA development, and explain how it can work offline through the construction process.

        중급이상

        중급이상

        IONIC, PWA

        Building an offline first web with Ionic강의 썸네일

        Building an offline first web with Ionic

        killkch0331

        Email/Password User Authentication using Ionic3+Firebase강의 썸네일

        Email/Password User Authentication using Ionic3+Firebase

        killkch0331

        Tutorial on creating email/password user authentication using Ionic 3 + firebase

        초급

        초급

        IONIC, Firebase

        Email/Password User Authentication using Ionic3+Firebase강의 썸네일

        Email/Password User Authentication using Ionic3+Firebase

        killkch0331

        My Location - Find my location information using ionic3 and Google Map Api강의 썸네일

        My Location - Find my location information using ionic3 and Google Map Api

        killkch0331

        This ionic3 course is very helpful not only to developers with ionic development experience, but also to beginners without ionic development experience, as it provides comprehensive information on the overall ionic project structure and development methods.

        초급

        초급

        IONIC

        My Location - Find my location information using ionic3 and Google Map Api강의 썸네일

        My Location - Find my location information using ionic3 and Google Map Api

        killkch0331

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!

        Building an offline first web with Ionic강의 썸네일

        Building an offline first web with Ionic

        killkch0331

        In this lecture, we will create a simple phone book web using Ionic and CouchDB, which are currently the most optimized for PWA development, and explain how it can work offline through the construction process.

        중급이상

        중급이상

        IONIC, PWA

        Building an offline first web with Ionic강의 썸네일

        Building an offline first web with Ionic

        killkch0331

        Deep Learning Web Service Project 1 - Basics. Object Detect Defective Product Identification강의 썸네일

        Deep Learning Web Service Project 1 - Basics. Object Detect Defective Product Identification

        nomad

        There are many projects that want to provide deep learning programs made with Python as web or mobile services. Learn the process of making Python-based deep learning codes such as TensorFlow, PyTorch, YOLO, OpenCV, and Keras into web service APIs and provide them as mobile web apps, and apply them in practice.

        중급이상

        중급이상

        PWA, Google App Engine, Flask

        Deep Learning Web Service Project 1 - Basics. Object Detect Defective Product Identification강의 썸네일

        Deep Learning Web Service Project 1 - Basics. Object Detect Defective Product Identification

        nomad

        Build a 10,000 Hours Rule App with PWA!강의 썸네일

        Build a 10,000 Hours Rule App with PWA!

        jejucoding

        Turn a web page currently being serviced as a PWA into an app service! We recommend this to those who want to experience PWA and app production in a simple way.

        초급

        초급

        Web Application, PWA

        Build a 10,000 Hours Rule App with PWA!강의 썸네일

        Build a 10,000 Hours Rule App with PWA!

        jejucoding

        Angular Firebase Complete Conquest - PetStore Shopping Mall Project강의 썸네일

        Angular Firebase Complete Conquest - PetStore Shopping Mall Project

        nomad

        This is a practical project capacity building course that follows the Pet Store shopping mall Blueprint Application that can be applied to various fields using Angular Front-end and Firebase Back-end.

        중급이상

        중급이상

        Angular, PWA, Firebase

        Angular Firebase Complete Conquest - PetStore Shopping Mall Project강의 썸네일

        Angular Firebase Complete Conquest - PetStore Shopping Mall Project

        nomad

        Getting Started with PWA - Build Apps with Web Technology강의 썸네일

        Getting Started with PWA - Build Apps with Web Technology

        captain

        You can create an app that works in an offline environment using web technology. Learn about the historical background and key features of the development of progressive web apps, and create a real progressive web app using key technologies.

        초급

        초급

        Vue.js, Web Application, PWA

        Getting Started with PWA - Build Apps with Web Technology강의 썸네일

        Getting Started with PWA - Build Apps with Web Technology

        captain

        Do it! Create a Progressive Web App강의 썸네일

        Do it! Create a Progressive Web App

        easyspub

        Let’s learn about PWA (Progressive Web App), the next-generation mobile strategy of global companies!

        초급

        초급

        PWA, Web Application, Vue.js

        Do it! Create a Progressive Web App강의 썸네일

        Do it! Create a Progressive Web App

        easyspub

        Introductory course from TypeScript to ionic6 (Angular-based)강의 썸네일

        Introductory course from TypeScript to ionic6 (Angular-based)

        nodeep777

        I recommend this to those who want to learn how to easily create and distribute Android apps, Windows apps, and iOS apps. We will teach you the basics of TypeScript rather than JavaScript and Angular!

        입문

        입문

        TypeScript, IONIC, Hybrid App

        Introductory course from TypeScript to ionic6 (Angular-based)강의 썸네일

        Introductory course from TypeScript to ionic6 (Angular-based)

        nodeep777

        Using Ionic Components Without React Angular강의 썸네일

        Using Ionic Components Without React Angular

        nodeep777

        If you have an environment that supports HTML and JavaScript, but not the Ionic platform, you can use Ionic components.

        초급

        초급

        IONIC

        Using Ionic Components Without React Angular강의 썸네일

        Using Ionic Components Without React Angular

        nodeep777

        Creating a job search site with Vue3 and Supabase강의 썸네일

        Creating a job search site with Vue3 and Supabase

        Michael Kwon

        From developing your own full-stack application to a Progressive Web App (PWA)!

        초급

        초급

        Vue.js, PWA, supabase

        Creating a job search site with Vue3 and Supabase강의 썸네일

        Creating a job search site with Vue3 and Supabase

        Michael Kwon