PWA Roadshow Seoul - Keynote

•

7 likes•1,745 views

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

vs.
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
13% 87%

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

( )
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
58%
13%
20%

example.com
onpush = function(event) { 
var data = event.data.json(); 
self.registration 
.showNotiﬁcation(data.title, data.options);
};
ServiceWorker.js
Push Subscription
End Point

What's hot

AWS Lambda with ClaudiaJS

Riza Fahmi

Sergey Puzankov "How to see a bug the size of 1px"

Fwdays

High Performance Web Components

Steve Souders

How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.

Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App

The Software House

PWA - push notification

Seulgi Choi

The document discusses push notifications and different approaches to implementing them. It covers registering a service worker, installing a service worker, adding notification permissions, and using Firebase or a message channel to handle notifications. It notes that using a messaging server and Firebase allows receiving notifications whether the browser is open or closed once the service worker is installed, while a web server only approach cannot receive notifications when the browser is closed.

Desktop, Web e Mobile

Paulo Moura

Paulo Moura discusses different technologies for desktop, web, and mobile development. He covers front-end technologies like HTML5, CSS3, and JavaScript frameworks like Angular and React. He also discusses back-end technologies like Java, C#, PHP, and Ruby. For mobile development, he mentions technologies like iOS with Objective-C and Swift, Android with Java, and cross-platform with tools like React Native and Ionic that allow using JavaScript. He concludes that JavaScript can be used everywhere from web to desktop to mobile applications.

High Performance Snippets

Steve Souders

1. Synchronous scripts block page rendering, so scripts should be loaded asynchronously. 2. Front-end dependencies like social media widgets can cause slowdowns if they fail to load. Blackholing domains in tests can show these slowdowns. 3. "Bootstrap scripts" from content delivery networks often have short cache times, increasing chances of failures. But they can be made self-updating while keeping long cache times.

Chris Wilson: Progressive Web Apps

Danielle A Vincent

This document discusses progressive web apps (PWAs) and how they compare to traditional mobile web apps and installed apps. The key points are: - PWAs are a new type of web application that uses modern web capabilities to deliver native-app-like experiences to users. They aim to be reliable, fast, and engaging for users. - PWAs use features like service workers, web app manifests, and push notifications to achieve app-like functionality regardless of whether a user is online. This provides a more reliable and engaging experience for users compared to traditional mobile web apps. - Building PWAs focuses on user experience and usability. Techniques like caching, offline support, and home

Front End Development for Back End Developers - vJUG24 2017

Matt Raible

JavaScript Performance (at SFJS)

Steve Souders

This document discusses strategies for improving JavaScript performance on websites. It begins by noting that JavaScript is often the number one cause of slow web pages. It then reviews the history of JavaScript loading approaches, from loading scripts in the page head in 1995 to more modern async and deferred loading. It discusses using localStorage as a cache and the Google Analytics async snippet as examples. It concludes by recommending tools and resources for measuring and improving JavaScript performance, including WebPagetest.org, ControlJS, and Steve Souders' own site and books.

Java Web Application Security with Java EE, Spring Security and Apache Shiro ...

Matt Raible

This document provides an overview of options for implementing security in Java web applications, including Java EE, Spring Security, and Apache Shiro. It discusses developing secure applications, common vulnerabilities, and tools for testing security like OWASP Zed Attack Proxy. The document emphasizes that security should be built into applications from the start through following best practices and using security frameworks.

AngularJS

Aman Goel

The document discusses an AngularJS presentation covering topics like SPA, the AngularJS bootstrap process, MVC in AngularJS, CRUD operations, authentication, file structure, project structure, and browser storage. It provides examples of AngularJS file structure at both the Github and local levels. It also compares local storage, session storage, cache, and cookies in terms of storage capabilities and data expiration.

What is new in Firebase?

Sinan Yılmaz

This document summarizes Firebase services for mobile app development. It discusses how Firebase provides tools for realtime databases, authentication, analytics, notifications, remote configuration, testing, and monetization. Firebase databases store data in a NoSQL JSON format and support offline usage. Authentication integrates with Google, Facebook, and other providers. Analytics helps understand user behavior. Remote configuration allows changing app behavior without updates. Testing tools include emulator, instrumentation, and crash reporting.

introduction to Vue.js 3

ArezooKmn

Vue.js is a progressive JavaScript framework that focuses on building user interfaces and is used for single-page applications. It was created by Evan You and released in 2014. Vue.js uses declarative templates and reactive data binding to render the view layer for an application. Templates in Vue use HTML-based syntax with directives prefixed with v- to dynamically bind expression results. Common directives include v-bind, v-if, and v-for. Vue.js applications can be built with its core library or integrated with other libraries and frameworks.

Fast Fashion… How Missguided revolutionised their approach to site performanc...

Andy Davies

Your Script Just Killed My Site

Steve Souders

Puppet and your Metadata - PuppetCamp London 2015

Marc Cluet

Why NodeJS

Riza Fahmi

Autoscaling Best Practices - WebPerf Barcelona Oct 2014

Marc Cluet

JavaScript Libraries: The Big Picture

Simon Willison

This document provides an overview of popular JavaScript libraries including Dojo Toolkit, YUI, Prototype, and jQuery. It discusses problems they aim to solve like cross-browser inconsistencies. Key features of each library are mentioned like Dojo's widgets, YUI's controls, Prototype's Ruby-like syntax, and jQuery's chaining and node selection. The document also covers ideas from the libraries like progressive enhancement, animation APIs, and leveraging hosting on CDNs.

What's hot (20)

AWS Lambda with ClaudiaJS

Sergey Puzankov "How to see a bug the size of 1px"

High Performance Web Components

Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App

PWA - push notification

Desktop, Web e Mobile

High Performance Snippets

Chris Wilson: Progressive Web Apps

Front End Development for Back End Developers - vJUG24 2017

JavaScript Performance (at SFJS)

Java Web Application Security with Java EE, Spring Security and Apache Shiro ...

AngularJS

What is new in Firebase?

introduction to Vue.js 3

Fast Fashion… How Missguided revolutionised their approach to site performanc...

Your Script Just Killed My Site

Puppet and your Metadata - PuppetCamp London 2015

Why NodeJS

Autoscaling Best Practices - WebPerf Barcelona Oct 2014

JavaScript Libraries: The Big Picture

More from Chang W. Doh

Exploring what're new in Web for the Natively app

Chang 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의 코루틴은 어떻게 동작하는가

Chang W. Doh

Hey Kotlin, How it works?

Chang W. Doh

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

Chang W. Doh

CSS 다시 파서 어디에 쓰나

Chang W. Doh

Natively Web App & Service Worker

Chang W. Doh

초보 개발자를 위한 웹 프론트엔드 개발 101

Chang W. Doh

Service Worker 201 (한국어)

Chang W. Doh

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)

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.

Service Worker 101 (한국어)

Chang W. Doh

What is next for the web

Chang W. Doh

Instant and offline apps with Service Worker

Chang W. Doh

Chrome enchanted 2015

Chang 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

Polymer Codelab: Before diving into polymer

Chang W. Doh

알아봅시다, Polymer: Web Components & Web Animations

Chang W. Doh

SOSCON 2014: 문서 기반의 오픈소스 기여하기

Chang W. Doh

Chromium: NaCl and Pepper API

Chang 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.

More from Chang W. Doh (20)

Exploring what're new in Web for the Natively app

Kotlin의 코루틴은 어떻게 동작하는가

Hey Kotlin, How it works?

Kotlin, 어떻게 동작하나요

introduction to Web Assembly

CSS 다시 파서 어디에 쓰나

Natively Web App & Service Worker

초보 개발자를 위한 웹 프론트엔드 개발 101

Service Worker 201 (한국어)

Service Worker 201 (en)

Service Worker 101 (en)

Service Worker 101 (한국어)

What is next for the web

Instant and offline apps with Service Worker

Chrome enchanted 2015

프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기

Polymer Codelab: Before diving into polymer

알아봅시다, Polymer: Web Components & Web Animations

SOSCON 2014: 문서 기반의 오픈소스 기여하기

Chromium: NaCl and Pepper API

Recently uploaded

20240705 QFM024 Irresponsible AI Reading List June 2024

Matthew Sinclair

Details of description part II: Describing images in practice - Tech Forum 2024

BookNet Canada

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

Transcript: Details of description part II: Describing images in practice - T...

BookNet Canada

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

Comparison Table of DiskWarrior Alternatives.pdf

Andrey Yasko

find out more about the role of autonomous vehicles in facing global challenges

huseindihon

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Neo4j

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

How to Build a Profitable IoT Product.pptx

Adam Dunkels

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...

Bert Blevins

Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

SynapseIndia

Implementations of Fused Deposition Modeling in real world

Emerging Tech

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

TrustArc

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

Password Rotation in 2024 is still Relevant

Bert Blevins

Best Programming Language for Civil Engineers

Awais Yaseen

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

Research Directions for Cross Reality Interfaces

Mark Billinghurst

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

jackson110191

Observability For You and Me with OpenTelemetry

Eric D. Schabell

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

Pigging Solutions Sustainability brochure.pdf

Pigging Solutions

Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment. How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.

20240702 QFM021 Machine Intelligence Reading List June 2024

Matthew Sinclair

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

ArgaBisma

Cookies program to display the information though cookie creation

shanthidl1

Recently uploaded (20)

20240705 QFM024 Irresponsible AI Reading List June 2024

Details of description part II: Describing images in practice - Tech Forum 2024

Transcript: Details of description part II: Describing images in practice - T...

Comparison Table of DiskWarrior Alternatives.pdf

find out more about the role of autonomous vehicles in facing global challenges

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

How to Build a Profitable IoT Product.pptx

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Implementations of Fused Deposition Modeling in real world

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Password Rotation in 2024 is still Relevant

Best Programming Language for Civil Engineers

Research Directions for Cross Reality Interfaces

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

Observability For You and Me with OpenTelemetry

Pigging Solutions Sustainability brochure.pdf

20240702 QFM021 Machine Intelligence Reading List June 2024

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Cookies program to display the information though cookie creation