This document discusses Service Workers and Progressive Web Apps (PWAs). It begins by introducing Service Workers and their benefits for creating instant and offline experiences. It then defines PWAs and discusses their key technologies like Manifest, Service Workers, and Push Notifications. Several real-world examples of popular PWAs are provided. Common Service Worker patterns and use cases are explained, such as precaching, caching on user demand, cache migration, and using Service Workers with Push Notifications. The document encourages developers to help build fast and reliable web experiences using these new web platform technologies.
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype?
Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.
Sergey Puzankov "How to see a bug the size of 1px"Fwdays
If you are still not using screenshot testing — you definitely must give it a try!
In this talk, Sergey will go through the advantages and limitations of screenshot testing. He will explain how to integrate it into CI process and share his experience of implementing screenshot testing at Wix.
Christmas holiday experiment: creating a VueJS front that gets data through GraphQL from a decoupled WordPress install on another server. Read more on this blogpost: https://conimpeto.be/wordpress/create-a-wordpress-twentyseventeen-theme-with-vuejs-and-graphql/.
Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that.
The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go.
With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.
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.
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.
2017/01/23【F2E&RGBA Meetup】所分享的內容
簡介:
PWA (Progressive Web App) 是 Google 在 2015 年所提出的概念,2016 年我們開始看到許多 PWA 應用像是 The Washington Post、Flipkart、Gmail、AliExpress、Wikipedia、Flipboard、Booking 等實務案例,本次分享將介紹 PWA 與 HTML5 Offline API 搭配 Service Worker,讓我們的網站在離線的時候還能夠進行瀏覽,打造出更好的用戶體驗。
活動網址:
http://f2e.kktix.cc/events/f2e6-56d17c-0f9e5b-3997b7-a9203f-d684fd-886f38
Service Workers is coming. Bring your own magic with the first programmable cache in your script, and more!
Presented at the GDG Korea DevFest 2014 on the 31st of May 2014: https://sites.google.com/site/gdgdevfestkorea2014/
This document provides an overview of single page applications (SPAs), including their motivation, introduction, examples, architecture, advantages and disadvantages, tools, and a demo. SPAs aim to improve user experience by only loading necessary content instead of entire pages when navigating a site. This reduces load times compared to traditional multi-page applications. The document discusses tools like Knockout.js that can be used to build SPAs and notes that server-side code moves to exposing RESTful APIs while client-side code handles navigation and UI logic. It concludes with advertising a demo of an SPA built with John Papa's Hot Towel template to further illustrate SPA concepts.
Angular vs React for Web Application DevelopmentFITC
- Front-end frameworks like Angular and React use component-based architectures, with components having life-cycle hooks and handling their own state.
- Both support data binding, but Angular uses two-way binding while React uses one-way binding. Angular also supports mutable data through services.
- Both support routing, with Angular having a single built-in router and React having multiple options through libraries like React Router.
- Other similarities include support for styling components and testing with libraries like Jasmine, though React testing approaches vary more between projects.
Making Single Page Applications (SPA) faster Boris Livshutz
This document discusses strategies for improving the performance of single page applications (SPAs). It begins by introducing common SPA frameworks and trends. It then discusses challenges like framework overhead and constant reinstallation that can degrade performance. Solutions presented include light first visits using skeleton pages, server-side rendering, virtual DOM libraries, JavaScript packaging, resource deferral, caching optimizations, and monitoring SPA-specific metrics. The document emphasizes the importance of choosing the right framework, designing for performance, and testing SPAs using modern techniques.
webOS is an open source mobile operating system from Palm built on HTML5, CSS, and JavaScript that uses the Mojo framework for application development and provides services through a plugin development kit and application programming interfaces, with apps distributed through an online app catalog.
All of us have a lurking failure in our websites: 3rd party scripts from ads, widgets, and analytics. How is it that one script can bring down your website?
Get Hip with JHipster - Denver JUG 2015Matt Raible
My presentation as delivered at the Denver Java User Group on April 8, 2015.
Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project for you and allow you to use Java 7 or 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Grunt or Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication. For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry, Heroku and Openshift.
Peter Lubbers from Kaazing gave a presentation on HTML5 features such as Web Workers, Geolocation, and WebSockets. He discussed how these new technologies allow for asynchronous background processing, location detection, and bi-directional real-time communications without polling. Browser support for HTML5 features was also reviewed.
With this presentation, I am showing how to easy decouple a simple Drupal blog with Nuxt framework and GraphQL. You will be first shortly introduced to Vue.JS and Nuxt platform with some code examples and in the end, you will be able to clone a Github repository with a full working example: https://github.com/davision/nuxt-graphql-drupal-blog
Introduction to Service Workers, a new Web API that allows developers to build app-like Progressive Apps with features ranging from Offline first to real Push notifications and more.
A gentle Introduction to the concept of Progressive Web Apps, explaining the key concept needed to build a website/app that works even when your user is on a flaky network.
slide for my talk at DevFest Abuja 2015, where I explained the process involved in developing offline first app by leveraging on the power of service worker.
Service workers and the role they play in modern day web appsMukul Jain
Service workers have greatly improved the experience of web apps by providing offline access to pages, caching data, background sync and other native app-like features. Nowadays, Progressive Web Apps are working together with service workers to provide the users better performance and experience than a typical web app. But service worker’s power doesn’t just stop at giving offline experience and background notifications. They can be used in areas ranging from request deferring to the virtual server.
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha
Learn how to use Ext JS and Cmd to deliver Progressive Web Applications to deliver the best of both web and mobile app experiences. Web apps can be found easily on the internet and every user is guaranteed access to the same and latest version of the application. Plus, mobile app capabilities, such as offline support and optimizing access to the underlying network using service workers, take the user experience to a whole new level.
Maxim Salnikov - Service Worker: taking the best from the past experience for...Codemotion
There is no doubt that 2018 is the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. And the speed and smoothness of this process heavily depend on how correctly we, developers, use the power of new APIs. In my session based on the accumulated experience of developing and maintaining PWAs we go through the list of advanced tips & tricks, showcase best practices, learn how to avoid common pitfalls and have a look at the latest browser support and known limitations.
"Service Worker: Let Your Web App Feel Like a Native "FDConf
Service workers allow web applications to work offline by intercepting network requests, caching responses, and serving cached resources when there is no network connection. They also handle background synchronization and push notifications. Key capabilities include making apps available offline, controlling the cache and network requests, and subscribing to push notifications. Service workers operate separately from the main thread of the page, intercepting and modifying fetch events to return cached responses when available.
The document discusses Service Workers and how they can be used to cache assets and manage network requests. It provides code snippets for registering a Service Worker, caching assets during install, detecting and responding to fetch events by checking the cache and falling back to the network if needed, and updating the Service Worker by deleting old caches.
JQuery UK February 2015: Service Workers On VacayNatasha Rooney
Webapps are awesome, and travel is awesome, but the two together suck. Roaming, aeroplanes, bad connections and flakey wifi make native apps so much more attractive when travelling. The offline-capable gap between web native needs to be quashed, and Service Worker is coming to do the quashing! This talk will go through the simple use case of creating an offline-capable webapp using caching in ServiceWorker, complete with pulling in data and retaining data for offline view.
In this session, you'll learn what's in store for Progressive Web Apps on Window - where they fit in alongside other Windows apps; how to get started converting a web site or web app into a Progressive Web App; how to submit PWAs to the Windows Store , and more.
NGINX Can Do That? Test Drive Your Config File!Jeff Anderson
I have had countless conversations with developers, projects managers, and even executives that end up being about nginx and what it can do. Usually, the phrase "nginx can do that?" comes up. More often than not, the answer is YES. What happens though, is the nginx config file can get unwieldy. How can we assert that it will behave how it needs to over time? How can we avoid introducing inadvertent regressions?
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
The web - What it has, what it lacks and where it must goRobert Nyman
The document discusses the current state and future of the web. It notes that while native apps currently dominate mobile usage, the web is working to address its limitations through new features like service workers for offline access, background sync for periodic processing, and push notifications. It highlights tools from Google like Mobile-Friendly Test, Chrome DevTools, and Web Fundamentals. It argues the web needs to simplify onboarding and spread awareness of its capabilities to ensure its long-term viability against native platforms. The future of the web depends on matching and surpassing native capabilities while keeping content universally accessible across different platforms.
Learn about WP Acceptance. A new framework that empowers developers and CI pipelines to test codebases using version controlled acceptance tests and sharable environments.
AppSec Tel Aviv - OWASP Top 10 For JavaScript Developers Lewis Ardern
With the release of the OWASP TOP 10 2017 we saw new issues rise as contenders of most common issues in the web landscape. Much of the OWASP documentation displays issues, and remediation advice/code relating to Java, C++, and C#; however not much relating to JavaScript. JavaScript has drastically changed over the last few years with the release of Angular, React, and Vue, alongside the popular use of NodeJS and its libraries/frameworks. This talk will introduce you to the OWASP Top 10 explaining JavaScript client and server-side vulnerabilities.
Krzysztof Sobkowiak presented on serverless Java on Kubernetes. Serverless computing refers to building applications without server management by deploying functions that automatically scale in response to demand. Function as a Service (FaaS) platforms like Apache OpenWhisk allow running Java code as stateless functions on Kubernetes. OpenWhisk supports Java actions and integrates with services through triggers and rules to enable event-driven architectures. Spring Cloud Functions provides a framework for building serverless applications using Spring Boot and Java.
JSNation.com - Azure Static Web Apps (SWA) with Azure DevOpsJuarez Junior
The document advertises a workshop on running static web apps on Azure using DevOps.js. It provides links to resources on how to deploy web assets to cloud storage, create and assign SSL certificates, establish a reverse proxy to call APIs, distribute apps globally, and set up continuous integration and delivery (CI/CD) processes. The document also lists prerequisites like Node.js, VS Code, and Azure extensions needed to complete the workshop.
MeasureCamp IX (London) - 10 JavaScript Concepts for web analystsSimo Ahava
Here's my list of 10 JavaScript (related) concepts that I think all web analysts should understand at least on a basic level. A solid grasp of JavaScript is a base requirement for anyone working with the web browser.
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
The document discusses the current state and future of the web. It notes that while native apps have gained popularity, especially on mobile, the web remains strong with over 1 billion active users. It outlines tools from Google like Service Workers that help the web compete with capabilities previously only available to native apps like push notifications, offline access, and background processing. The document advocates for continued progress to simplify the web development process and ensure the longevity of technologies, arguing this will help the web remain diverse and accessible across all platforms.
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
The document discusses the current state and future of the web. It describes how the web currently lacks capabilities that native mobile apps have like push notifications, background processing, and offline access. However, new web features being developed like Service Workers, Push Notifications, and Background Sync aim to address these gaps. The document argues that with these new features, the divide between native and web is diminishing and the web can provide an app-like experience without requiring users to download an app. The future of the web depends on further developing these capabilities and ensuring the web remains accessible, simple to use, and continues to work across all platforms.
Similar to PWA Roadshow Korea - Service Worker (20)
Samsung Internet 4.0 is Samsung's Chromium-based web browser that is optimized for Samsung Galaxy devices. It provides features like Progressive Web Apps, privacy modes, content blocking, and integration with Gear VR for a continuous browsing experience across devices. The latest version 4.0 supports more Samsung devices and brings continuous updates and security patches through the auto update feature on the Google Play Store.
Service Worker at W3C HTML5 Conference in Seoul on the 9th of Dec 2015jungkees
1. A summary of a document was requested.
2. The document contained random letters and symbols that did not form words or sentences.
3. No meaningful summary could be generated from the given document.
1) Promises provide a way to write asynchronous code in a more readable sequential style by avoiding deeply nested callbacks.
2) Promises represent the eventual completion (or failure) of an asynchronous operation, and allow consumers to attach callbacks instead of passing callbacks into asynchronous functions.
3) Promises are being adopted in many web standards and browser APIs to provide a consistent approach to asynchronous programming across the web platform.
The document provides a status update, plans, and issues regarding progress events for web apps. It notes that specifications are using PE, test suites are complete and approved, and an ED change was made. The plan is to meet CR exit by getting patches in Gecko, WebKit, and Blink, though a few have already landed. Outstanding issues are tracked on a wiki page.
The document discusses the status and plans for XMLHttpRequest. It notes that the specification reached TR publication in December 2012. There are test submissions from Microsoft, Ms2ger, and Opera. The WHATWG has made 14 commits to the spec. There are 13 open bugs. The plan is to finalize a baseline version as REC by 2013 focusing on implemented features, and a "bleeding edge" version addressing controversial issues with a goal of REC by 2014. Major issues include the behavior of overrideMimeType, HTTP authentication, and streaming responses.
Mitigating the Impact of State Management in Cloud Stream Processing SystemsScyllaDB
Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states.
In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing.
Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.
Implementations of Fused Deposition Modeling in real worldEmerging 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.
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.
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.
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Chris Swan
Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge.
You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter.
The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.
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.
Comparison Table of DiskWarrior Alternatives.pdfAndrey Yasko
To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
The Rise of Supernetwork Data Intensive ComputingLarry Smarr
Invited Remote Lecture to SC21
The International Conference for High Performance Computing, Networking, Storage, and Analysis
St. Louis, Missouri
November 18, 2021
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.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
How RPA Help in the Transportation and Logistics Industry.pptxSynapseIndia
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
Measuring the Impact of Network Latency at TwitterScyllaDB
Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...Toru Tamaki
Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023
https://arxiv.org/abs/2307.12980
How Social Media Hackers Help You to See Your Wife's Message.pdfHackersList
In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.
The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.
7. Mobile website 의 장단점
• 장점
• URL! - 빠른 배포, 연결성
• 보유 컨텐츠/서비스를 모바일 기기에 빠르게 배포
• 표준 기반으로 다양한/폭넓은 기기 지원
• 단점
• Native 대비 떨어지는 UX
• 성능
• 기능들
Manifest + Service Worker + Push
Service Worker + AMP + Rendering optimization efforts
Extending web platform continued
11. Case study: Washingtonpost PWA
“In our public-facing beta of the PWA web app, we’ve seen about
5x engagement – page views per visit, number of stories read,”
Washington Post’s head of product tells Beet.TV in this video
interview.
Source: http://www.beet.tv/2016/09/wapopwamarburger.html
25. Dedicated worker
Run job.js
t
* Lifetime is bound to the document
unless .terminate is called.
Lifetime bound to their parent
Lifetime of Dedicated Worker
new Worker(‘job.js’)
26. Run sw.js
Browser internal
t
Service worker
Term
inate
Start
onfetch
e.waitUntil()
push
Term
inate
Start
onpush
e.waitUntil()
fetch
Lifetime of Service Workers
Intentionally short lifetime
<img src=‘pic.png’>
27. Service Worker 활용을 위한 주요 개념
• Install: Register - Update - Unregister
• Client matching - Navigation 포함 메인 리소스 fetch 시 service worker 결정
• Functional event handling
• fetch, push, notificationclick, sync, etc.
• Caching
• Pre-cache - oninstall 이벤트 처리
• Dynamic-cache - onfetch에서 활용
• Serve on HTTPS
• Fetch API 와 Streams API 를 주목하자
28. Register - Update - Unregister
Service Worker Lifecycle
navigator.serviceWorker.register(‘sw.js’, { scope: ‘./‘ });
self.addEventListener('install', e => {
// Cache static resources
});
Registration - scope: ‘./‘
installing waiting active
self.addEventListener('activate', e => {
// Delete cache, etc.
});
self.addEventListener('fetch', e => {
// respondWith cached resource, etc.
});
self.addEventListener('push', e => {
// showNotification etc.
});
Wait until
- No client uses active worker
- skipWaiting() was called
install
fetch
push
activate
29. Register - Update - Unregister
Service Worker Lifecycle
self.addEventListener('install', e => {
// Cache static resources
});
Registration - scope: ‘./‘
installing waiting active
self.addEventListener('activate', e => {
// Delete cache, etc.
});
self.addEventListener('fetch', e => {
// respondWith cached resource, etc.
});
Wait until
- No client uses active worker
- skipWaiting() was called
install
fetch
activate
registration.update();
30. Register - Update - Unregister
Service Worker Lifecycle
Registration - scope: ‘./‘
installing waiting active
Wait until
- No client uses active worker
- No service worker is serving events
registration.unregister();
unregister flag
31. “/bar” /bar/sw1.js
[ Registration map ]
Scope Script URL
“/foo” /foo/sw.jsFrom page
var sw = navigator.serviceWorker;
① sw.register('/bar/sw1.js', { scope: '/bar' });
② sw.register('/foo/sw.js', { scope: '/foo' });
③ sw.register('/bar/sw2.js', { scope: '/bar' } );
Registrations
“/bar” /bar/sw2.js
32. onfetch
sw.js
Cache
Attempt to match cache
Matched response
Respond to client
“/” /sw.js
[ Registration map ]
Scope Script URL
“/foo” /foo/sw.js
Doc
Navigate https://example.com/index.html
fetch event
Scope matching
Run SW
Client matching
Navigation / Worker client creation
33. onfetch
sw.js
Cache
Attempt to match cache
Matched response
Respond to client
“/” /sw.js
[ Registration map ]
Scope Script URL
“/img” /img/sw.js
Doc
Fetch “https://example.com/img/flower.png
fetch event
Control
Run SW
Subresource requests
메인 리소스 내부에서 발생하는 서비 리소스에 대한 fetch 요청들
36. document.querySelector('.cache-article').addEventListener('click', function(event) {
event.preventDefault();
var id = this.dataset.articleId;
caches.open('mysite-article-' + id).then(function(cache) {
fetch('/get-article-urls?id=' + id).then(function(response) {
// /get-article-urls returns a JSON-encoded array of
// resource URLs that a given article depends on
return response.json();
}).then(function(urls) {
cache.addAll(urls);
});
});
});
https://jakearchibald.com/2014/offline-cookbook/#on-user-interaction
Service Worker 사용 패턴
Cache on user demand
39. https://jakearchibald.com/2014/offline-cookbook/#on-push-message
self.addEventListener('push', function(event) {
if (event.data.text() == 'new-email') {
event.waitUntil(
caches.open('mysite-dynamic').then(function(cache) {
return fetch('/inbox.json').then(function(response) {
cache.put('/inbox.json', response.clone());
return response.json();
});
}).then(function(emails) {
registration.showNotification("New email", {
body: "From " + emails[0].from.name
tag: "new-email"
});
})
);
}
});
self.addEventListener('notificationclick', function(event) {
if (event.notification.tag == 'new-email') {
// Assume that all of the resources needed to render
// /inbox/ have previously been cached, e.g. as part
// of the install handler.
clients.openWindow(‘/inbox/');
}
});
Service Worker 사용 패턴
onpush