The document discusses making progressive web apps reliable. It recommends using service workers to cache assets and responses so the app works offline. Service workers allow precaching assets during install and returning cached responses to fetch requests. If the response isn't cached, the request can fallback to the network. When new updates are available, the service worker will update in the background. Other service worker events like sync allow background updating. Reliable progressive web apps provide instant loading offline through effective caching with service workers.
Guidance on how to develop a progressive web app using react native!
The document discusses developing a progressive web app (PWA) using the React Native framework. It describes how several companies experienced success using PWAs, including increased engagement rates and reduced load times. The document then outlines key steps for building a PWA with React Native, such as adopting secure connections, adding a web app manifest, implementing a custom splash screen, integrating push notifications with Pusher, and auditing the code with Lighthouse. React Native is presented as an effective framework for PWA development due to its JavaScript libraries, plugins, and ease of creating PWAs with desired features.
This document provides an overview of progressive web apps (PWAs). It defines PWAs as web applications that are regular web pages but can appear and function like native mobile or desktop apps. The document discusses why PWAs are useful by allowing apps to load quickly, work offline, and avoid large downloads. It outlines key features of PWAs like being reliable, fast, engaging, and installable. Examples of popular PWA implementations are also provided.
Wireless Application Protocol (WAP), WAP Key Points, WAP Push, Fragmentation, Features, Browsers and Web Platforms, Web View, Native Web, Packaged and Hybrids Apps, Tools for Mobile Web Development, Emulator and Simulator.
This document discusses building progressive web apps with Angular 2. It covers using service workers to enable offline functionality through caching, implementing an app shell architecture for immediate loading, and other features like background syncing and push notifications. The last section describes the Angular Mobile Toolkit for generating starter code and manifest files to help develop progressive web apps.
The web - What it has, what it lacks and where it must go - keynote at Riga D...
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 still accounts for a large portion of usage. It outlines tools from Google like service workers, push notifications, and app install banners that aim to close capabilities gaps between the web and native apps. The document advocates for progressive web apps that are accessible like websites but also feel like native apps to users. The future of the web, it argues, depends on continuing to match and surpass native platforms while keeping the web open, accessible, and long-lasting.
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to web servers and accessible through URLs (on HTTPS protocol).
Bruce Lawson: Progressive Web Apps: the future of Apps
Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.
The document provides an overview of progressive web apps (PWAs). It discusses the history and idea behind PWAs, defining them as websites that are built using common web technologies but adopt features that make them feel like native mobile applications. The key pillars that transform websites into PWAs are listed as being reliable, fast, engaging, and integrated. Core building blocks like service workers and web app manifests are explained. Example case studies are given that demonstrate performance improvements from adopting PWAs. Limitations are also outlined.
Growth of mobile web traffic has been outpacing desktop web traffic for years, and data reveals that users are likely to abandon experiences that too long to load.
Progressive web apps aim to be reliable, fast and engaging, regardless of form factor or quality of internet connection. We'll walk through several key aspects of PWAs, illustrating performance and usability improvements by showing quantitative comparisons to an equivalent "classic SPA".
This document discusses progressive web applications (PWAs), which aim to provide users with an app-like experience through the web. PWAs load quickly, work offline or on low-quality networks, feel native on devices, and are discoverable. The key aspects that define a PWA are HTTPS, a web app manifest, and a service worker. Case studies show that popular sites like AliExpress, Flipkart and Google I/O saw significant increases in user engagement and conversion through PWAs compared to regular web or native apps. Service workers allow caching assets, pushing notifications, and handling requests when offline to improve the user experience.
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
This document provides an introduction to progressive web apps (PWAs). It discusses the history of web technologies from HTML and HTTP in the early 1990s to more recent developments like service workers, push notifications, and web app manifests that enable PWAs. Features of PWAs are described like reliability, performance, engagement, and integration with the operating system. Case studies are presented showing the benefits some companies have seen from implementing PWAs.
Slides from my recent presentation on Progressive web apps. I showed what they are and how I believe they are the future of web/app development.
I also demonstrated how to use de F12 tools in Chrome to debug the Service Worker and the Manifest.json file. I also demonstrated how, by adding and changing a few lines, a Node.js app is converted to a progressive web app.
Alex Russell Software Engineer, Google at Fastly Altitude 2016
New browser technologies are arriving that are poised to change user and developer expectations of what’s possible on the web; particularly on slow mobile devices with flaky connections. This talk discusses how these new technologies – Service Workers, Progressive Web Apps, HTTP/2, Push, Notifications, and Web Components are being combined, e.g. in the new PRPL pattern, to transform user experiences while improving business results.
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью совреме...
This document discusses how to make mobile web apps better using modern Browser APIs. It provides an overview of several APIs including App Install Banners, Service Workers, Push Notifications, Network Information, Storage Estimation, Device Orientation, Media Session, Web Share, Credentials Management, and Workbox. It compares features of progressive web apps to native mobile apps, noting advantages and disadvantages of each. While progressive web apps cannot fully replace native apps, they provide many similar capabilities and could serve as a "lite version" of a native app through the web.
This slides includes :
- Introduction to progressive web apps
- History of mobile and web applications
- Advantages of creating Progressive Web Apps
- Techniques for developing Progressive Web Apps
- Limitations of creating Progressive Web Apps
Let's focus on the Mobile Web and talk about the keys to a building a great mobile experience.
From AMP (=Accelerated Mobile Pages) as a starting point up to PWA (=Progressive Web Apps). I will cover the steps through some of the key features we see as core to the modern web experience. As a bonus, we will close with new APIs that expending the web even farther.
“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”
Web application development full & detailed guide for 2022
what is a web application?
what is web application development?
What are the types of web applications?
What are the best examples of web applications?
Advantages of web applications.
Disadvantages of web applications.
What is the cost of web application development?
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
Andrew will share the experience he and his team have gotten from using Ext JS 6 for cross-platform app development on mobile and desktop devices. Having released Ext JS 6 apps for industries including utilities, oil & gas, construction, and transport, Andrew has learned the common pitfalls and gotchas you need to know. Using examples from recent projects, he provides tips for those who aren't yet familiar or experienced with mobile development. By the end of the session, you will know how to think like a mobile developer, develop apps with mobile user experience in mind, make the move from Ext JS 5 or Sencha Touch to Ext JS 6, deploy native apps with Cordova, and manage data on devices with limited resources.
How to Manage Digital User Experience for Web Applications
This document discusses approaches to monitoring digital user experience. It defines digital user experience and explains why it is important. Common approaches covered include analytics, synthetic user monitoring, real user monitoring, and infrastructure monitoring. Both synthetic and real user monitoring are needed to fully understand user experience. Real user monitoring provides insight into actual user behavior and interactions but requires users. Synthetic monitoring allows testing when no users are present. Infrastructure monitoring helps identify performance issues related to applications and infrastructure. Together these approaches provide full visibility from end users to infrastructure.
Progressive Web Apps (PWAs) provide an app-like user experience on the web by making use of modern web capabilities. PWAs use a web app manifest and service workers to work offline, receive push notifications, and load quickly. The web app manifest allows developers to define how the app should appear to users, while service workers cache assets to provide an app-shell experience regardless of network availability. Tools like sw-precache and sw-toolbox help generate service worker code and implement common caching strategies. By following best practices for manifests, service workers, and other features, web apps can achieve many of the benefits of native mobile apps without needing to be installed from an app store.
As the digital space continues to evolve, Progressive Web Apps (PWA) are gaining momentum. PWAs aim to improve user experience and are about to become a game changer – will you be ready?
Join us for this live webinar & learn:
* What Progressive Web Apps are and why they're gaining momentum
* Key differences between Progressive Web Apps, responsive web design, hybrid and native apps
* Best practices and tools for testing Progressive Web Apps
And see a live demo of a Progressive Web App in action
Share of mobile traffic rises dramatically in the recent years. Products in Turkey, being a mobile driven market, has to deal with this rapid mobile traffic expansion. Several strategies including deeplinking and new technology approaches like Progressive Web Apps has to be implemented in order to cope with this new challange. This presentation briefly goes over those strategies and provide a guidance for mobile product managers and developers.
Progressive Web Apps aim to provide an app-like user experience through features like push notifications, offline support, and installation prompts while maintaining the key web-based advantages of universality, security, and lack of dependence on app stores. They work across browsers using progressive enhancement and rely on modern web APIs like service workers and the web app manifest to provide app-like functionality, falling back to support core content on all platforms through techniques like polyfilling and graceful degradation. While browser support for some features like service workers is still evolving, Progressive Web Apps aim to make high-quality web apps available to all.
Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features.
The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.
This seminar report provides an introduction to progressive web apps (PWAs). It defines PWAs as websites that are reliable, fast and engaging like native mobile apps. The report discusses the key features of PWAs including being responsive, working offline, and being installable on home screens. It also covers the benefits of building PWAs such as improving user experience and increasing engagement. Specific examples of companies that created successful PWAs are provided, including Flipkart, Housing, and AliExpress. Service workers and application shells are explained as important technologies that enable the core functionality of PWAs. Finally, the advantages and disadvantages of the PWA approach are summarized.
The document discusses the evolution of mobile application development from native apps to hybrid apps to progressive web apps (PWAs). It describes how PWAs blend features of native and web apps by using new web APIs and technologies like service workers to provide capabilities like offline functionality, push notifications, and installability while only requiring a single codebase. The document outlines key characteristics of PWAs like being progressive, responsive, able to work offline, feeling like native apps, and being automatically updated. It also discusses how PWAs are supported by major tech companies and are predicted to become the dominant form of mobile apps by 2020.
This document discusses progressive web applications (PWAs). It provides definitions of PWAs from Wikipedia and key figures. It outlines characteristics of PWAs like being reliable, fast, engaging. It discusses advantages of PWAs over native apps like lower distribution friction. It provides a checklist of features PWAs should have and things they cannot do. It also discusses testing PWAs, including for offline use, across browsers, and network conditions.
After working for over a year on a project directed towards emerging markets (namely Nigeria and Kenya), I came to realise that the popular web performance metrics are all centred around a specific type of person: someone who is used to the fast and reliable connection. In my talk I want to share my experience on how to look at the overall web performance with the new metric in mind - user’s patience. I have a set of tips and tricks how to prepare for the scenario where the loading time is going to be an issue.
The document summarizes new trends on the web platform that are making the mobile web experience more like native apps. It discusses how progressive web apps (PWAs) can offer reliable, fast and engaging experiences through features like service workers, web app manifests, and push notifications. PWAs provide low friction access to content through features like add to home screen and deep linking, while remaining lightweight and not requiring app installation. The document outlines the evolution of the web platform and browser capabilities that now enable high-quality app-like experiences through progressive enhancement using new standards and APIs.
The document discusses various aspects of a project including positive and negative factors. Key steps and components are outlined along with challenges that will need to be addressed. Overall, the project appears feasible but will require careful planning and management of risks to overcome obstacles.
This document discusses architecture challenges that can arise when developing modular corporate Symfony applications with multiple developer teams and bundles. It outlines examples of common problems like creating shared bundles, versioning dependencies, and listener priority conflicts. Best practices are provided to help avoid issues like tight coupling, dependency hell, and unclear bundle APIs. While bundles can help extend frameworks, the document advises approaches like limiting bundle scope and using libraries instead of direct dependencies to promote loose coupling and modularity in large Symfony codebases.
Filesystem abstractions and msg queue sergeev - symfony camp 2018
This document discusses various tools for handling files, images, and asynchronous tasks in Symfony applications. It introduces the Gaufrette filesystem abstraction layer, VichUploaderBundle for file uploads, LiipImagineBundle for image processing, Enqueue for asynchronous message queues, and Symfony Messenger component. It provides code examples for integrating these tools and addressing common issues like file storage, processing, and background tasks.
This document discusses contract testing for microservice architectures using the Pact framework. It describes how Pact uses consumer-driven contracts where each consumer captures expectations of providers in separate contracts. Interactions consist of expected requests and minimal responses. Pact provides a mock server, interaction builder, and allows verifying interactions on consumers and providers. It also discusses implementing Pact with Behat scenarios, writing Pact JSON files, using a Pact broker for hosting contracts, and verifying providers. Continuous integration is implemented with Pact in Jenkins to test consumers, trigger downstream provider jobs, and control backward compatibility.
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
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.
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.
We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner!
We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too!
Check out our proposed agenda below 👇👇
08:30 ☕ Welcome coffee (30')
09:00 Opening note/ Intro to UiPath Community (10')
Cristina Vidu, Global Manager, Marketing Community @UiPath
Dawid Kot, Digital Transformation Lead @Proservartner
09:10 Cloud migration - Proservartner & DOVISTA case study (30')
Marcin Drozdowski, Automation CoE Manager @DOVISTA
Pawel Kamiński, RPA developer @DOVISTA
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
09:40 From bottlenecks to breakthroughs: Citizen Development in action (25')
Pawel Poplawski, Director, Improvement and Automation @McCormick & Company
Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company
10:05 Next-level bots: API integration in UiPath Studio (30')
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
10:35 ☕ Coffee Break (15')
10:50 Document Understanding with my RPA Companion (45')
Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath
11:35 Power up your Robots: GenAI and GPT in REFramework (45')
Krzysztof Karaszewski, Global RPA Product Manager
12:20 🍕 Lunch Break (1hr)
13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30')
Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance
13:50 Communications Mining - focus on AI capabilities (30')
Thomasz Wierzbicki, Business Analyst @Office Samurai
14:20 Polish MVP panel: Insights on MVP award achievements and career profiling
Choose our Linux Web Hosting for a seamless and successful online presence
Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently.
Visit- https://onliveserver.com/linux-web-hosting/
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
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
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
Mitigating the Impact of State Management in Cloud Stream Processing Systems
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.
YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS
WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well.
Some facts about WPRiders and why we are one of the best firms around:
More than 700 five-star reviews! You can check them here.
1500 WordPress projects delivered.
We respond 80% faster than other firms! Data provided by Freshdesk.
We’ve been in business since 2015.
We are located in 7 countries and have 22 team members.
With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce.
Our team members are:
- highly experienced developers (employees & contractors with 5 -10+ years of experience),
- great designers with an eye for UX/UI with 10+ years of experience
- project managers with development background who speak both tech and non-tech
- QA specialists
- Conversion Rate Optimisation - CRO experts
They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals.
At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.
Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation
Implementations of Fused Deposition Modeling in real world
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.
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)
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
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.
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.
This document introduces progressive web apps (PWAs) and service workers. PWAs aim to provide native app-like experiences through the browser by being reliable, fast, and engaging. Service workers act as proxies that allow developers to control caching and how resources are requested. The document discusses prerequisites for PWAs, the service worker lifecycle, features like offline access, and tools for auditing PWAs.
This document discusses progressive web apps (PWAs). It defines PWAs as applications that take advantage of new technologies to provide the best of mobile sites and native apps to users. PWAs are reliable, fast, and engaging. They work across all devices and platforms without installation. Core aspects of PWAs include application shells, web app manifests, and service workers. Major browsers support key PWAs features like caching, adding to home screens, and push notifications. Popular companies using PWAs include Flipkart, Paper Planes, and Housing. The document encourages building and migrating to PWAs.
Guidance on how to develop a progressive web app using react native!Shelly Megan
The document discusses developing a progressive web app (PWA) using the React Native framework. It describes how several companies experienced success using PWAs, including increased engagement rates and reduced load times. The document then outlines key steps for building a PWA with React Native, such as adopting secure connections, adding a web app manifest, implementing a custom splash screen, integrating push notifications with Pusher, and auditing the code with Lighthouse. React Native is presented as an effective framework for PWA development due to its JavaScript libraries, plugins, and ease of creating PWAs with desired features.
This document provides an overview of progressive web apps (PWAs). It defines PWAs as web applications that are regular web pages but can appear and function like native mobile or desktop apps. The document discusses why PWAs are useful by allowing apps to load quickly, work offline, and avoid large downloads. It outlines key features of PWAs like being reliable, fast, engaging, and installable. Examples of popular PWA implementations are also provided.
Wireless Application Protocol (WAP), WAP Key Points, WAP Push, Fragmentation, Features, Browsers and Web Platforms, Web View, Native Web, Packaged and Hybrids Apps, Tools for Mobile Web Development, Emulator and Simulator.
This document discusses building progressive web apps with Angular 2. It covers using service workers to enable offline functionality through caching, implementing an app shell architecture for immediate loading, and other features like background syncing and push notifications. The last section describes the Angular Mobile Toolkit for generating starter code and manifest files to help develop progressive web apps.
The web - What it has, what it lacks and where it must go - keynote at Riga D...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 still accounts for a large portion of usage. It outlines tools from Google like service workers, push notifications, and app install banners that aim to close capabilities gaps between the web and native apps. The document advocates for progressive web apps that are accessible like websites but also feel like native apps to users. The future of the web, it argues, depends on continuing to match and surpass native platforms while keeping the web open, accessible, and long-lasting.
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to web servers and accessible through URLs (on HTTPS protocol).
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.
Basic Understanding of Progressive Web AppsAnjaliTanpure1
The document provides an overview of progressive web apps (PWAs). It discusses the history and idea behind PWAs, defining them as websites that are built using common web technologies but adopt features that make them feel like native mobile applications. The key pillars that transform websites into PWAs are listed as being reliable, fast, engaging, and integrated. Core building blocks like service workers and web app manifests are explained. Example case studies are given that demonstrate performance improvements from adopting PWAs. Limitations are also outlined.
Growth of mobile web traffic has been outpacing desktop web traffic for years, and data reveals that users are likely to abandon experiences that too long to load.
Progressive web apps aim to be reliable, fast and engaging, regardless of form factor or quality of internet connection. We'll walk through several key aspects of PWAs, illustrating performance and usability improvements by showing quantitative comparisons to an equivalent "classic SPA".
This document discusses progressive web applications (PWAs), which aim to provide users with an app-like experience through the web. PWAs load quickly, work offline or on low-quality networks, feel native on devices, and are discoverable. The key aspects that define a PWA are HTTPS, a web app manifest, and a service worker. Case studies show that popular sites like AliExpress, Flipkart and Google I/O saw significant increases in user engagement and conversion through PWAs compared to regular web or native apps. Service workers allow caching assets, pushing notifications, and handling requests when offline to improve the user experience.
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
This document provides an introduction to progressive web apps (PWAs). It discusses the history of web technologies from HTML and HTTP in the early 1990s to more recent developments like service workers, push notifications, and web app manifests that enable PWAs. Features of PWAs are described like reliability, performance, engagement, and integration with the operating system. Case studies are presented showing the benefits some companies have seen from implementing PWAs.
Slides from my recent presentation on Progressive web apps. I showed what they are and how I believe they are the future of web/app development.
I also demonstrated how to use de F12 tools in Chrome to debug the Service Worker and the Manifest.json file. I also demonstrated how, by adding and changing a few lines, a Node.js app is converted to a progressive web app.
Alex Russell Software Engineer, Google at Fastly Altitude 2016
New browser technologies are arriving that are poised to change user and developer expectations of what’s possible on the web; particularly on slow mobile devices with flaky connections. This talk discusses how these new technologies – Service Workers, Progressive Web Apps, HTTP/2, Push, Notifications, and Web Components are being combined, e.g. in the new PRPL pattern, to transform user experiences while improving business results.
JS Fest 2018. Тимофей Лавренюк. Делаем веб приложение лучше с помощью совреме...JSFestUA
This document discusses how to make mobile web apps better using modern Browser APIs. It provides an overview of several APIs including App Install Banners, Service Workers, Push Notifications, Network Information, Storage Estimation, Device Orientation, Media Session, Web Share, Credentials Management, and Workbox. It compares features of progressive web apps to native mobile apps, noting advantages and disadvantages of each. While progressive web apps cannot fully replace native apps, they provide many similar capabilities and could serve as a "lite version" of a native app through the web.
This slides includes :
- Introduction to progressive web apps
- History of mobile and web applications
- Advantages of creating Progressive Web Apps
- Techniques for developing Progressive Web Apps
- Limitations of creating Progressive Web Apps
Let's focus on the Mobile Web and talk about the keys to a building a great mobile experience.
From AMP (=Accelerated Mobile Pages) as a starting point up to PWA (=Progressive Web Apps). I will cover the steps through some of the key features we see as core to the modern web experience. As a bonus, we will close with new APIs that expending the web even farther.
“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”
what is a web application?
what is web application development?
What are the types of web applications?
What are the best examples of web applications?
Advantages of web applications.
Disadvantages of web applications.
What is the cost of web application development?
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...Sencha
Andrew will share the experience he and his team have gotten from using Ext JS 6 for cross-platform app development on mobile and desktop devices. Having released Ext JS 6 apps for industries including utilities, oil & gas, construction, and transport, Andrew has learned the common pitfalls and gotchas you need to know. Using examples from recent projects, he provides tips for those who aren't yet familiar or experienced with mobile development. By the end of the session, you will know how to think like a mobile developer, develop apps with mobile user experience in mind, make the move from Ext JS 5 or Sencha Touch to Ext JS 6, deploy native apps with Cordova, and manage data on devices with limited resources.
How to Manage Digital User Experience for Web ApplicationseG Innovations
This document discusses approaches to monitoring digital user experience. It defines digital user experience and explains why it is important. Common approaches covered include analytics, synthetic user monitoring, real user monitoring, and infrastructure monitoring. Both synthetic and real user monitoring are needed to fully understand user experience. Real user monitoring provides insight into actual user behavior and interactions but requires users. Synthetic monitoring allows testing when no users are present. Infrastructure monitoring helps identify performance issues related to applications and infrastructure. Together these approaches provide full visibility from end users to infrastructure.
Progressive Web Apps (PWAs) provide an app-like user experience on the web by making use of modern web capabilities. PWAs use a web app manifest and service workers to work offline, receive push notifications, and load quickly. The web app manifest allows developers to define how the app should appear to users, while service workers cache assets to provide an app-shell experience regardless of network availability. Tools like sw-precache and sw-toolbox help generate service worker code and implement common caching strategies. By following best practices for manifests, service workers, and other features, web apps can achieve many of the benefits of native mobile apps without needing to be installed from an app store.
As the digital space continues to evolve, Progressive Web Apps (PWA) are gaining momentum. PWAs aim to improve user experience and are about to become a game changer – will you be ready?
Join us for this live webinar & learn:
* What Progressive Web Apps are and why they're gaining momentum
* Key differences between Progressive Web Apps, responsive web design, hybrid and native apps
* Best practices and tools for testing Progressive Web Apps
And see a live demo of a Progressive Web App in action
Share of mobile traffic rises dramatically in the recent years. Products in Turkey, being a mobile driven market, has to deal with this rapid mobile traffic expansion. Several strategies including deeplinking and new technology approaches like Progressive Web Apps has to be implemented in order to cope with this new challange. This presentation briefly goes over those strategies and provide a guidance for mobile product managers and developers.
Progressive Web Apps aim to provide an app-like user experience through features like push notifications, offline support, and installation prompts while maintaining the key web-based advantages of universality, security, and lack of dependence on app stores. They work across browsers using progressive enhancement and rely on modern web APIs like service workers and the web app manifest to provide app-like functionality, falling back to support core content on all platforms through techniques like polyfilling and graceful degradation. While browser support for some features like service workers is still evolving, Progressive Web Apps aim to make high-quality web apps available to all.
Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features.
The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.
This seminar report provides an introduction to progressive web apps (PWAs). It defines PWAs as websites that are reliable, fast and engaging like native mobile apps. The report discusses the key features of PWAs including being responsive, working offline, and being installable on home screens. It also covers the benefits of building PWAs such as improving user experience and increasing engagement. Specific examples of companies that created successful PWAs are provided, including Flipkart, Housing, and AliExpress. Service workers and application shells are explained as important technologies that enable the core functionality of PWAs. Finally, the advantages and disadvantages of the PWA approach are summarized.
Progressive Web Apps –The Future of Apps Ashish Saxena
The document discusses the evolution of mobile application development from native apps to hybrid apps to progressive web apps (PWAs). It describes how PWAs blend features of native and web apps by using new web APIs and technologies like service workers to provide capabilities like offline functionality, push notifications, and installability while only requiring a single codebase. The document outlines key characteristics of PWAs like being progressive, responsive, able to work offline, feeling like native apps, and being automatically updated. It also discusses how PWAs are supported by major tech companies and are predicted to become the dominant form of mobile apps by 2020.
This document discusses progressive web applications (PWAs). It provides definitions of PWAs from Wikipedia and key figures. It outlines characteristics of PWAs like being reliable, fast, engaging. It discusses advantages of PWAs over native apps like lower distribution friction. It provides a checklist of features PWAs should have and things they cannot do. It also discusses testing PWAs, including for offline use, across browsers, and network conditions.
Secret Web Performance Metric - DevDayBeAnna Migas
After working for over a year on a project directed towards emerging markets (namely Nigeria and Kenya), I came to realise that the popular web performance metrics are all centred around a specific type of person: someone who is used to the fast and reliable connection. In my talk I want to share my experience on how to look at the overall web performance with the new metric in mind - user’s patience. I have a set of tips and tricks how to prepare for the scenario where the loading time is going to be an issue.
The document summarizes new trends on the web platform that are making the mobile web experience more like native apps. It discusses how progressive web apps (PWAs) can offer reliable, fast and engaging experiences through features like service workers, web app manifests, and push notifications. PWAs provide low friction access to content through features like add to home screen and deep linking, while remaining lightweight and not requiring app installation. The document outlines the evolution of the web platform and browser capabilities that now enable high-quality app-like experiences through progressive enhancement using new standards and APIs.
Similar to 20181023 progressive web_apps_are_here_sfcampua (20)
The document discusses various aspects of a project including positive and negative factors. Key steps and components are outlined along with challenges that will need to be addressed. Overall, the project appears feasible but will require careful planning and management of risks to overcome obstacles.
This document discusses architecture challenges that can arise when developing modular corporate Symfony applications with multiple developer teams and bundles. It outlines examples of common problems like creating shared bundles, versioning dependencies, and listener priority conflicts. Best practices are provided to help avoid issues like tight coupling, dependency hell, and unclear bundle APIs. While bundles can help extend frameworks, the document advises approaches like limiting bundle scope and using libraries instead of direct dependencies to promote loose coupling and modularity in large Symfony codebases.
This document discusses various tools for handling files, images, and asynchronous tasks in Symfony applications. It introduces the Gaufrette filesystem abstraction layer, VichUploaderBundle for file uploads, LiipImagineBundle for image processing, Enqueue for asynchronous message queues, and Symfony Messenger component. It provides code examples for integrating these tools and addressing common issues like file storage, processing, and background tasks.
This document discusses contract testing for microservice architectures using the Pact framework. It describes how Pact uses consumer-driven contracts where each consumer captures expectations of providers in separate contracts. Interactions consist of expected requests and minimal responses. Pact provides a mock server, interaction builder, and allows verifying interactions on consumers and providers. It also discusses implementing Pact with Behat scenarios, writing Pact JSON files, using a Pact broker for hosting contracts, and verifying providers. Continuous integration is implemented with Pact in Jenkins to test consumers, trigger downstream provider jobs, and control backward compatibility.
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.
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.
UiPath Community Day Kraków: Devs4Devs ConferenceUiPathCommunity
We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner!
We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too!
Check out our proposed agenda below 👇👇
08:30 ☕ Welcome coffee (30')
09:00 Opening note/ Intro to UiPath Community (10')
Cristina Vidu, Global Manager, Marketing Community @UiPath
Dawid Kot, Digital Transformation Lead @Proservartner
09:10 Cloud migration - Proservartner & DOVISTA case study (30')
Marcin Drozdowski, Automation CoE Manager @DOVISTA
Pawel Kamiński, RPA developer @DOVISTA
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
09:40 From bottlenecks to breakthroughs: Citizen Development in action (25')
Pawel Poplawski, Director, Improvement and Automation @McCormick & Company
Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company
10:05 Next-level bots: API integration in UiPath Studio (30')
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
10:35 ☕ Coffee Break (15')
10:50 Document Understanding with my RPA Companion (45')
Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath
11:35 Power up your Robots: GenAI and GPT in REFramework (45')
Krzysztof Karaszewski, Global RPA Product Manager
12:20 🍕 Lunch Break (1hr)
13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30')
Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance
13:50 Communications Mining - focus on AI capabilities (30')
Thomasz Wierzbicki, Business Analyst @Office Samurai
14:20 Polish MVP panel: Insights on MVP award achievements and career profiling
Choose our Linux Web Hosting for a seamless and successful online presencerajancomputerfbd
Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently.
Visit- https://onliveserver.com/linux-web-hosting/
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc
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
Coordinate Systems in FME 101 - Webinar SlidesSafe Software
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
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.
YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS
WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well.
Some facts about WPRiders and why we are one of the best firms around:
More than 700 five-star reviews! You can check them here.
1500 WordPress projects delivered.
We respond 80% faster than other firms! Data provided by Freshdesk.
We’ve been in business since 2015.
We are located in 7 countries and have 22 team members.
With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce.
Our team members are:
- highly experienced developers (employees & contractors with 5 -10+ years of experience),
- great designers with an eye for UX/UI with 10+ years of experience
- project managers with development background who speak both tech and non-tech
- QA specialists
- Conversion Rate Optimisation - CRO experts
They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals.
At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.
Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxSynapseIndia
Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation
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.
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)
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Erasmo Purificato
Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
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.
4. Locastic
• We help clients create amazing web and mobile apps (since 2011)
• mobile development
• web development
• UX/UI
• Training and Consulting
• Shift Conference, Symfony Croatia
• www.locastic.com t: @locastic
15. “I don't care how many kick-ass Visio architecture diagrams
you have; as far as the user is concerned, the UI is the
application. I know UI US HARD, but you have to build an
impressive UI if you want to be taken seriously. Give your UI
the high priority it deserves.”
Jeff Atwood, Coding Horror blog
18. “A Progressive Web App uses
modern web capabilities to deliver
an app-like user experience.”
19. “A Progressive Web App uses
modern web capabilities to deliver
an app-like user experience.”
20. PWA is:
• Progressive - Works for every user, regardless of browser choice because it's
built with progressive enhancement as a core tenet.
• Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - Enhanced with service workers to work offline or
on low-quality networks.
• App-like - Feels like an app, because the app shell model separates the
application functionality from application content .
• Fresh - Always up-to-date thanks to the service worker update process.
21. PWA is:
• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been
tampered with.
• Discoverable - Is identifiable as an "application" thanks to W3C manifest and
service worker registration scope, allowing search engines to find it.
• Re-engageable - Makes re-engagement easy through features like push
notifications.
• Installable - Allows users to add apps they find most useful to their home
screen without the hassle of an app store.
• Linkable - Easily share the application via URL, does not require complex
installation.
31. Integrated
• User should not reach browser to reach your app
• They should be able to interact same as with any other
app on their device
• They expect to have all possibilities as other apps
• Users should be able to start app from their home
screen
39. Broken experience
• Required user interaction
• Where it will start?
• Would it work offline?
https://medium.com/@saigeleslie/how-to-create-a-progressive-web-app-with-react-in-5-mins-or-less-3aae3fe98902
40. Web manifest
• Simple JSON file
• Tell browsers about your app and how it should behave once
app is ‘installed’
• Having manifest is required to show add to home screen pop-up
• Works for desktop and mobile apps (chrome)
• https://manifest-validator.appspot.com/
• https://app-manifest.firebaseapp.com/
44. What are the criteria?
• The web app is not already installed
• Meets a user engagement heuristic (currently, the user
has interacted with the domain for at least 30 seconds)
• Served over HTTPS (required for service workers)
• Has registered a service worker with a fetch event
handler
45. What are the criteria?
• Includes a web app manifest that includes:
• Short name or name
• Icons must include a 192px and a 512px sized icons
• start_url
• Display must be: fullscreen, standalone, or minimal-
ui
46. What are the criteria?
• When these criteria are met, Chrome will fire a
beforeinstallprompt event that you can use to
prompt the user to install your Progressive Web App.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
});
47. What are the criteria?
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
71. Reliable
• The quality of a network connection can be affected by a number of factors such as:
• Poor coverage of a provider.
• Extreme weather conditions.
• Power outages.
• Users travelling into “dead zones” such as buildings that block their network
connections.
• Travelling on a train and going through a tunnel.
• Internet connection is managed by a third party and time boxed when it will be
active or inactive like in an airport or hotel.
• Cultural practises that require limited or no internet access at specific times or days.
72. Reliable
• We need instant loading offline
• 60% of mobile connection is 2G
• Fast Application is UX
• 14 sec to load average website on 4g
• 19 sec to load average website on 3G
77. Service Workers
• Script that browser runs in background, separated
from web page
• It is Javascript worker, so it cannot access to DOM
directly
• Service worker is a programmable network proxy,
allowing you to control how network requests from
your page are handled.
78. Service Workers
• It's terminated when not in use, and restarted when
it's next needed, so you cannot rely on global state
within a service worker's onfetch and onmessage
handlers.
• Service workers make extensive use of promises
• Service worker is for second load
84. Cache and return requests
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
86. Service workers Events
• On install - as a dependency
• On install - not as a dependency
• On activate
• On user interaction
• On network response
• Stale-while-revalidate
• On push message
• On background-sync
87. Update Service Worker
• Update your service worker JavaScript file. When the user navigates to your
site, the browser tries to redownload the script file that defined the service
worker in the background. If there is even a byte's difference in the service
worker file compared to what it currently has, it considers it new.
• Your new service worker will be started and the install event will be fired.
• At this point the old service worker is still controlling the current pages so the
new service worker will enter a waiting state.
• When the currently open pages of your site are closed, the old service worker
will be killed and the new service worker will take control.
• Once your new service worker takes control, its activate event will be fired.
88. Update Service Worker
• self.skipWaiting()
• Skips waiting for refresh to start using new SW
90. // on user interaction
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);
});
});
});
110. Reliable conclusion
• Think how you design for the success, failure and instability of a
network connection
• Data may be expensive, so be considerate to the user
• Make sure performance is part of your design process and UX
• Try to provide offline by default if your app doesn't require much
data
• Inform users of their current state and of changes in states
• https://serviceworke.rs/ - different examples
111. Your goal is to provide a good
experience that lessens the
impact of changes in
connectivity
113. Engaging
• Charming and Attractive
• Shift way how we think in patterns and designs from
web patterns to some native patterns
• Push notifications (browser doesn’t need to be
opened)
• Push Notification API
121. 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.
new WindowClient('/inbox/');
}
});
122. Push Notifications
{
"body": "Did you make a $1,000,000 purchase at Dr. Evil...",
"icon": "images/ccard.png",
"vibrate": [200, 100, 200, 100, 200, 100, 400],
"tag": "request",
"actions": [
{ "action": "yes", "title": "Yes", "icon": "images/yes.png" },
{ "action": "no", "title": "No", "icon": "images/no.png" }
]
}
124. Credentials API!
• Removes friction from sign-in flows - Users can be
automatically signed back into a site even if their session has
expired or they saved credentials on another device.
• Allows one tap sign in with account chooser - Users can choose
an account in a native account chooser.
• Stores credentials - Your application can store either a
username and password combination or even federated account
details. These credentials can be synced across devices by the
browser.
135. Cut load times from 11.91 to 4.69
seconds
90% smaller than Native Android
App
https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-
case-study-78919d98ece0
Tinder