강의

N
챌린지

멘토링

로드맵

Programming

/

Web Development

Building an Ionic PWA (Progressive Web App)

Let's implement PWA (Progressive Web app), which is a hot issue these days, using IONIC hybrid framework and FIREBASE.

(5.0) 3 reviews

99 learners

  • killkch0331
IONIC
PWA

Reviews from Early Learners

Building an Ionic PWA with Firebase and Service Workers

Let's implement a Progressive Web App (PWA), a hot topic these days, using Ionic 3 and Firebase. Implementing a real web app will help you establish the future evolution of PWAs.

What is a PWA?

It's an "app-like web" that aims to combine the best of both mobile web and apps. PWAs leverage a new API called service workers to cache critical parts of web apps and enable instant loading. This allows them to send push notifications even though they're mobile web. (Reference: https://developers.google.com/web/progressive-web-apps/ )

While there are various frameworks that support PWA implementation, I believe the Ionic framework is the most suitable for implementing PWAs because it uses Web/App Components, has executable service workers built-in, and supports various internal/external APIs. Various PWA-related projects are currently underway utilizing Ionic. *Ionic provides its own PWA toolkit, although it is still in its early stages.

Helpful people

  • Anyone who wants to develop a hybrid app
  • Anyone who wants to develop PWA
  • Beginners new to Ionic

Lecture Features

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

Development environment

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

Introducing the knowledge sharer

Kim Cheol-hyeon

Currently working as a freelancer/consultant after working at SDS LGAd Simmani (search engine) and Mnet Media (now CJ E&M)

Hello
This is

2,064

Learners

45

Reviews

25

Answers

4.9

Rating

3

Courses

Curriculum

All

27 lectures ∙ (5hr 3min)

Published: 
Last updated: 

Reviews

All

3 reviews

5.0

3 reviews

  • hakjong0634님의 프로필 이미지
    hakjong0634

    Reviews 1

    ∙

    Average Rating 5.0

    5

    100% enrolled

    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

      Reviews 17

      ∙

      Average Rating 5.0

      5

      100% enrolled

      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

        Reviews 2

        ∙

        Average Rating 5.0

        5

        100% enrolled

        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.

        Access is restricted to non-public courses.
        Private Course

        killkch0331's other courses

        Check out other courses by the instructor!

        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

        Similar courses

        Explore other courses in the same field!

        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

        Ionic Overview, Completed as You Follow강의 썸네일

        Ionic Overview, Completed as You Follow

        padawanjoy2166

        Understand the overall development process of Ionic and learn how to develop the most used elements in mobile apps. This will allow you to develop your own hybrid mobile app efficiently.

        초급

        초급

        IONIC

        Ionic Overview, Completed as You Follow강의 썸네일

        Ionic Overview, Completed as You Follow

        padawanjoy2166

        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

        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

        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

        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

        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, supabase, Vue 3

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

        Creating a job search site with Vue3 and Supabase

        Michael Kwon