Natively Web App & Service Worker
0 likes707 views
네이티브와 유사한 웹 앱 + 이를 구현하기 위한 서비스 워커에 대한 개요(101, 201)
1 of 23
Download to read offline
Recommended
Exploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively appChang W. Doh The document discusses new features for web applications and their integration with native applications. It explores what's new for PWAs and how they can have more native-like features. It also covers tips for PWAs and how web applications can better integrate with native applications, providing an example JSON configuration to define related native applications. The author is Chang W. Doh, a Web GDE, and their email is provided for contact.
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Chang W. Doh The document discusses Kotlin coroutines and asynchronous programming. It demonstrates how to write asynchronous code using coroutines and covers topics like launching coroutines with different dispatchers, cancelling coroutines, and handling timeouts. Key functions and concepts discussed include launch, delay, runBlocking, withTimeout, and coroutine contexts/dispatchers.
Hey Kotlin, How it works?
Hey Kotlin, How it works?Chang W. Doh The document contains code examples showing how Kotlin code is compiled to Java bytecode. It demonstrates how Kotlin classes, functions, properties, and other language features are represented in the compiled Java code. Key aspects that are summarized include data classes, property delegates like lazy, extension functions, and overriding behavior.
Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요Chang W. Doh GDG DevFest 2017 - Inspections of Kotlin implementations by Bytecode.
세션 이후 "Kotlin은 Java의 wrapper인가요?" 라는 질문을 몇번 받았습니다.
—
답변: 그렇지 않습니다.
특정한 언어로 구현된 코드는 파싱을 거쳐 추상화된 형태(AST)와 추가 정보들을 가지는 1차적인 결과물로 처리됩니다. 보통 이런 역할을 하는 것은 컴파일러에서 전단부(frontend)라고 호칭하며 이러한 AST 등의 결과물은 대상 머신이나 플랫폼에 맞추어 처리됩니다.
이를 바로 실행하면 인터프리터라고 하지만, 실행 가능한 형태(Executable)로 생성하는 경우라면 컴파일러 후단부(Backend)가 이를 수행합니다.
백엔드의 타겟 코드는 충분히 다양한 대상을 다룰 수 있으므로, 우리가 다양한 백엔드 구현을 통해 동일 코드를 멀티 플랫폼을 대상으로 실행할 수 있도록 할 수 있는 것입니다.
코틀린 역시 대상으로 하는 플랫폼(과 머신)은 현재 다음과 같은 실행 가능한 형태를 지원하고 있습니다. (물론 아직 모든 타겟이 완벽하지는 않겠죠.)
1. Bytecode 포맷에 따른 JVM(안드로이드 포함)
2. JavaScript에 의한 브라우저나 Node.js
3. llvm을 이용하여 여러 타겟의 네이티브 코드
이 자료는 이 중 1번을 기반으로 디컴파일된 코드를 살펴보고 코틀린의 코드 생성 목적이나 언어 설계의 원인(어떤 painpoint)를 찾아보는 과정의 일부였을 뿐입니다.
언어는 항상 요구되는 표현을 위해 가장 적합한 형태로 변화해나갑니다. 프로그래밍 언어는 비교적 단기간에 만들어지는 언어이고, 그에 따라 특정 사람과 집단의 목적에 충실합니다. 다만, 이 관점에서 봤을 때도 Kotlin이 Java의 wrapper로써 설계되었을 것보다는 다양한 타겟 플랫폼이 고려되고 있는 하나의 프로그래밍 언어로 받아들여 주시기를 바랍니다. :)
introduction to Web Assembly 
introduction to Web Assembly Chang W. Doh The document discusses Web Assembly (WASM) and its ability to run JavaScript code. WASM code can access the same Web APIs as JavaScript, including the DOM, Web Audio, and Web GL. It also mentions that WASM acts as a compiler target and bytecode format for the web.
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynoteChang W. Doh This document discusses progressive web apps and their advantages over traditional apps. Some key points:
- Progressive web apps have seen significant growth and now account for 13% of mobile page views, up from 3.53% previously.
- Features like push notifications, service workers and app-like behaviors allow progressive web apps to mimic native apps while avoiding app stores.
- Adoption has increased engagement and time spent on sites with progressive web apps, with an average of 76% more time spent on iOS and 30% more on Android.
- Major companies have seen success with progressive web apps, with some seeing over 1 million installs and 60% of users engaging with push notifications. Progressive web apps are poised
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSChang W. Doh PWA Roadshow Seoul: HTTPS
Google PWA Roadshow HTTPS 세션의 한국어 번역본
사이트: https://gdg-korea-webtech.firebaseapp.com/pwa-roadshow17/
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나Chang W. Doh Emocon 2017 S/S 발표: 개인 프로젝트였던 자바스크립트 기반의 CSS Parser를 왜 만들었는가에 대한 우문우답.
Project GitHub: https://goo.gl/mK6DTU
NPM Reg.: https://goo.gl/aEFYSI
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101Chang W. Doh 2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 소개 부분 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Service Worker 201 (en)
Service Worker 201 (en)Chang W. Doh 1. Service Workers enable persistent background processing and provide hooks to take advantage of offline capabilities and push notifications in web applications.
2. They behave similarly to web workers but provide features like installation, versioning and upgrades that make them suitable for background processing even when a page is unloaded.
3. The Service Worker lifecycle is independent of web pages and browsing sessions, making it well-suited for features like push notifications, background sync and remote notifications.
Service Worker 101 (en)
Service Worker 101 (en)Chang W. Doh Web workers allow running scripts in parallel to the main page thread using message passing. Service workers are a specific type of web worker that enable persistent background processing and features like push notifications and offline caching. They have a lifecycle that is independent of pages and provide event-driven processing and version management. While dedicated and shared workers are created and controlled at runtime, service workers are installed in the browser and provide persistent background processing capabilities even when pages aren't active.
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh 2 parts of talking at Google Developer Summit 2016 Seoul
- How to optimize loading performance your web app
- Introducing to Service Worker & Offline 101
Chrome enchanted 2015
Chrome enchanted 2015Chang W. Doh This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh Talk about H/W acc. and rendering performance of chrome, and one more short talk about ServiceWorker.
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh Overview of WebComponents before diving into Polymer codelab @GDG DevFair 2014
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기Chang W. Doh Samsung OpenSource Conference - Day 2. http://www.soscon.net/
코드가 아닌 문서로 오픈소스에 기여하는 방법을 개인적인 경험으로 정리해보았습니다. 참여하실 분은 언제나 환영합니다. :)
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChang W. Doh Native Client (NaCl) is an open-source technology that allows native code to run safely inside web browsers. It provides native code functionality and performance while maintaining security. NaCl code is sandboxed using a double sandbox model and only accesses system resources through a safe API. The Portable Native Client (PNaCl) variant compiles code into a portable format that can run on multiple platforms.
Cache in Chromium: Disk Cache
Cache in Chromium: Disk CacheChang W. Doh The document discusses Chromium's caching system. It describes the overall network stack and cache flow, including the disk cache which stores web resources on disk. It then focuses on the "simple cache" implementation, a new backend for disk cache that uses one file per cache entry and an index file for faster lookups. The simple cache aims to be more resilient to corruption, reduce delays, and have lower memory and disk usage than the existing blockfile backend.
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersChang W. Doh Ninja is a build system that focuses solely on speed. It aims to have the fastest possible build times by keeping things very simple - it has almost no built-in functionality and relies on external meta-build systems like GYP or CMake to generate the build specification files (ninja files). Ninja files describe dependencies between targets but don't include complex build logic. This keeps the overhead of the build system very low and allows builds to be highly parallelized.
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeChang W. Doh The document provides an overview of the top-level projects that make up the Chromium source tree. It describes projects such as /android_webview, /base, /build, /cc, /chrome, /components, /content, /ipc, /mojo, /net, /sandbox, /skia, /third_party, /ui, /v8, and /webkit that comprise the core functionality and architecture of the Chromium browser.
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!Chang W. Doh I believe ServiceWorker is one of most important specifications for the next web world. Offline and its technologies are very friendly concepts to native application developers. But, now I think front-end developers have to know that for stepping into new paradigm. With ServiceWorker, you can make your web application can run offline, and it also means you can make your web application load extremely fast.
I've told about ServiceWorker very briefly in this slide. But you can understand how ServiceWorker runs on. If you want to know its usage, I highly recommend Topeka, which is a polymer demo application at google I/O 2014, that also includes material design and ServiceWorker in inside of it.
If you want to know ServiceWorker some more or in detail, I'd like to recommend to read the following, written by Jungkee Song, one of authors of this spec.
http://www.slideshare.net/jungkees/service-workers
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh GDG Korea WebTech: 뜻밖의 워크숍 #1
"프론트엔드 개발자를 위한 크롬에서의 렌더링 성능 인자 이해하기"
관련 포스트 : http://goo.gl/kFU8rc
GDG Korea WebTech: Unexpected Workshop #1
"Understanding Rendering Performance Matters in Chrome for Front-end Developers"
Related post: http://goo.gl/kFU8rc
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사Chang W. Doh GDG 2014 DevFest - Codeless Contributing to Opensource: My HTML5Rocks/KO Translation Chronicle.
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thChang W. Doh Quick overview of Web Component, HTML5Rocks/KO
1. Shadow DOM
2. Custom Elements
3. HTML Templates
4. HTML Imports
More Related Content
More from Chang W. Doh (20)
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101Chang W. Doh 2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 소개 부분 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Service Worker 201 (en)
Service Worker 201 (en)Chang W. Doh 1. Service Workers enable persistent background processing and provide hooks to take advantage of offline capabilities and push notifications in web applications.
2. They behave similarly to web workers but provide features like installation, versioning and upgrades that make them suitable for background processing even when a page is unloaded.
3. The Service Worker lifecycle is independent of web pages and browsing sessions, making it well-suited for features like push notifications, background sync and remote notifications.
Service Worker 101 (en)
Service Worker 101 (en)Chang W. Doh Web workers allow running scripts in parallel to the main page thread using message passing. Service workers are a specific type of web worker that enable persistent background processing and features like push notifications and offline caching. They have a lifecycle that is independent of pages and provide event-driven processing and version management. While dedicated and shared workers are created and controlled at runtime, service workers are installed in the browser and provide persistent background processing capabilities even when pages aren't active.
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh 2 parts of talking at Google Developer Summit 2016 Seoul
- How to optimize loading performance your web app
- Introducing to Service Worker & Offline 101
Chrome enchanted 2015
Chrome enchanted 2015Chang W. Doh This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh Talk about H/W acc. and rendering performance of chrome, and one more short talk about ServiceWorker.
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh Overview of WebComponents before diving into Polymer codelab @GDG DevFair 2014
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기Chang W. Doh Samsung OpenSource Conference - Day 2. http://www.soscon.net/
코드가 아닌 문서로 오픈소스에 기여하는 방법을 개인적인 경험으로 정리해보았습니다. 참여하실 분은 언제나 환영합니다. :)
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChang W. Doh Native Client (NaCl) is an open-source technology that allows native code to run safely inside web browsers. It provides native code functionality and performance while maintaining security. NaCl code is sandboxed using a double sandbox model and only accesses system resources through a safe API. The Portable Native Client (PNaCl) variant compiles code into a portable format that can run on multiple platforms.
Cache in Chromium: Disk Cache
Cache in Chromium: Disk CacheChang W. Doh The document discusses Chromium's caching system. It describes the overall network stack and cache flow, including the disk cache which stores web resources on disk. It then focuses on the "simple cache" implementation, a new backend for disk cache that uses one file per cache entry and an index file for faster lookups. The simple cache aims to be more resilient to corruption, reduce delays, and have lower memory and disk usage than the existing blockfile backend.
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersChang W. Doh Ninja is a build system that focuses solely on speed. It aims to have the fastest possible build times by keeping things very simple - it has almost no built-in functionality and relies on external meta-build systems like GYP or CMake to generate the build specification files (ninja files). Ninja files describe dependencies between targets but don't include complex build logic. This keeps the overhead of the build system very low and allows builds to be highly parallelized.
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeChang W. Doh The document provides an overview of the top-level projects that make up the Chromium source tree. It describes projects such as /android_webview, /base, /build, /cc, /chrome, /components, /content, /ipc, /mojo, /net, /sandbox, /skia, /third_party, /ui, /v8, and /webkit that comprise the core functionality and architecture of the Chromium browser.
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!Chang W. Doh I believe ServiceWorker is one of most important specifications for the next web world. Offline and its technologies are very friendly concepts to native application developers. But, now I think front-end developers have to know that for stepping into new paradigm. With ServiceWorker, you can make your web application can run offline, and it also means you can make your web application load extremely fast.
I've told about ServiceWorker very briefly in this slide. But you can understand how ServiceWorker runs on. If you want to know its usage, I highly recommend Topeka, which is a polymer demo application at google I/O 2014, that also includes material design and ServiceWorker in inside of it.
If you want to know ServiceWorker some more or in detail, I'd like to recommend to read the following, written by Jungkee Song, one of authors of this spec.
http://www.slideshare.net/jungkees/service-workers
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh GDG Korea WebTech: 뜻밖의 워크숍 #1
"프론트엔드 개발자를 위한 크롬에서의 렌더링 성능 인자 이해하기"
관련 포스트 : http://goo.gl/kFU8rc
GDG Korea WebTech: Unexpected Workshop #1
"Understanding Rendering Performance Matters in Chrome for Front-end Developers"
Related post: http://goo.gl/kFU8rc
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사Chang W. Doh GDG 2014 DevFest - Codeless Contributing to Opensource: My HTML5Rocks/KO Translation Chronicle.
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thChang W. Doh Quick overview of Web Component, HTML5Rocks/KO
1. Shadow DOM
2. Custom Elements
3. HTML Templates
4. HTML Imports
Natively Web App & Service Worker
- 1. Natively Web App & Service Worker @cwdoh, GDE for the Web
- 5. 과거
- 8. SPA
- 13. 어떻게?
- 15. 그렇다면...
- 16. Instant Loading
- 17. 오프라인에서도동작하는웹
- 18. 원격 푸시메세지
- 19. Rich Web App의제작이한층가까워지게 하는네이티브기능들 블루투스나USB, 결제, 미디어기능등이웹플랫폼으로진입을시도중 Web Bluetooth Web MIDI User Media Web Payment W3C 표준은아니지만웹런칭방식을풍부하게 하기 위한... Physical Web
- 21. 가장중요한시작점: 웹앱, 어디에서부터런칭하는가? 해결해야하는문제 문서가 로딩되어있지않거나... 백그라운드로돌아가 있거나... 오프라인이거나...
- 23. Thank you!