The document discusses progressive web apps (PWAs) and outlines key considerations for creating a PWA. It addresses questions around what a PWA is, how to make a website feel like an app, offline functionality, push notifications, and creating a roadmap. Examples from companies that implemented PWAs successfully are provided. The conclusion recommends developing a progressive roadmap that starts with baseline PWA features and builds out functionality over time based on priorities and initiatives.
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
How I learned to stop worrying and love UX metricsTammy Everts
This talk at the 2018 performance.now() conference (Amsterdam) walks through a brief history of UX and web performance research, highlighting landmark studies that helped connect the dots between performance and user experience. I also demystify the current state of performance metrics and help you understand what you need to focus on for your site and your users.
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
Raiders of the Fast Start: Frontend Performance Archeology
There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging!
Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:
What tools and metrics we used to diagnose issues and track progress.
How we went beyond server-driven best practices to focus on the client.
Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
Is the buzz around Progressive Web Apps real or are they simply the latest fad? In this talk, you’ll learn exactly what Progressive Web Apps are, what problems they solve, and what new design challenges they present. Jason will show how organizations are using Progressive Web Apps to provide better and faster user experiences.
This document discusses ways to make JavaScript faster in web pages. It recommends loading scripts asynchronously or with defer, preloading scripts, reducing CPU time spent evaluating scripts and function calls, budgeting third-party scripts, ensuring proper compression of scripts, and reviewing code coverage to optimize performance.
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]Tammy Everts
This document discusses how slow load times can hurt the user experience on websites and provides suggestions for improving performance. It notes that users expect pages to load within 2 seconds and cites studies showing that even small improvements in load time (1 second or less) can significantly increase conversion rates and other metrics. Common causes of poor performance are discussed, such as inefficient stylesheets, unoptimized JavaScript, and large images. The document provides many suggestions for optimizing front-end and back-end performance, such as creating a performance budget, minimizing page weight, deferring scripts, optimizing third-party content, and continuous monitoring.
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
How I learned to stop worrying and love UX metricsTammy Everts
This talk at the 2018 performance.now() conference (Amsterdam) walks through a brief history of UX and web performance research, highlighting landmark studies that helped connect the dots between performance and user experience. I also demystify the current state of performance metrics and help you understand what you need to focus on for your site and your users.
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
Raiders of the Fast Start: Frontend Performance Archeology
There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging!
Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:
What tools and metrics we used to diagnose issues and track progress.
How we went beyond server-driven best practices to focus on the client.
Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
Is the buzz around Progressive Web Apps real or are they simply the latest fad? In this talk, you’ll learn exactly what Progressive Web Apps are, what problems they solve, and what new design challenges they present. Jason will show how organizations are using Progressive Web Apps to provide better and faster user experiences.
This document discusses ways to make JavaScript faster in web pages. It recommends loading scripts asynchronously or with defer, preloading scripts, reducing CPU time spent evaluating scripts and function calls, budgeting third-party scripts, ensuring proper compression of scripts, and reviewing code coverage to optimize performance.
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]Tammy Everts
This document discusses how slow load times can hurt the user experience on websites and provides suggestions for improving performance. It notes that users expect pages to load within 2 seconds and cites studies showing that even small improvements in load time (1 second or less) can significantly increase conversion rates and other metrics. Common causes of poor performance are discussed, such as inefficient stylesheets, unoptimized JavaScript, and large images. The document provides many suggestions for optimizing front-end and back-end performance, such as creating a performance budget, minimizing page weight, deferring scripts, optimizing third-party content, and continuous monitoring.
Smashing Meets for Speed: Why web performance matters – especially nowTammy Everts
We talk a lot about web performance, but a lot of these conversations come from a purely technical perspective. Most people have a gut feeling that performance is important, but exactly what influence it has on your users and your business is often overlooked. In this talk I shared at Smashing Conference's 'Meets for Speed', I share why our need for fast online experiences is hard-wired, and how slow performance hurts your users and your business.
The document discusses the challenges facing the progressive web and introduces progressive web apps (PWAs) as a solution. PWAs are built using modern web standards to provide native app-like experiences through features like push notifications, offline support, and app installation. They address issues with native apps like high installation friction, lack of control for publishers, and app store policies. PWAs are gaining adoption from companies like Alibaba and Housing.com who saw increases in user engagement metrics after implementing PWAs. The document outlines the core components of PWAs and provides an overview of browser and platform support.
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.
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Strangeloop
One approach to performance is to accelerate the network; another is to optimize the application by reducing how much the network is needed and pushing content out towards the user. In this session, Hooman Beheshti reveals how technologies like Front-End Optimization and Content Delivery Networks work alongside the rest of the cloud computing stack to improve performance and increase user productivity.
Continuous Performance Testing and Monitoring in Agile DevelopmentNeotys
Continuous Performance testing and monitoring is the best way to ensure application performance with quicker development cycles. Balancing Agile and DevOps velocity with the need for ongoing performance testing and monitoring is essential. We call it Continuous Performance Validation.
Progressive Web Apps use new web platform technologies like manifest files and service workers to deliver app-style experiences to users on the mobile web. By adding features normally only available to native apps, like home screen shortcuts, push notifications, and offline access, Progressive Web Apps improve user engagement. For example, one Progressive Web App saw time spent increase 3x and returning visitor rates rise by 63% after adding these capabilities. While browser support for the required technologies is still evolving, Progressive Web Apps provide a path for the mobile web to better compete with native apps.
Building for Your Next Billion - Google I/O 2017Robert Nyman
New internet users are coming online around the world and are facing very different constraints to accessing the internet. In this talk, we'll cover what we've learned from building experiences for new internet users and walk through how you can build great experiences that work well for billions of users around the world.
This is a presentation from Google I/O 2017, the video is available at https://www.youtube.com/watch?v=wD3rpdiLMyY
Speakers: Tal Oppenheimer, Mariya Moeva, Robert Nyman
https://twitter.com/taloppenheimer
https://twitter.com/marrrr
https://twitter.com/robertnyman
Progressive Web Apps and the Windows Ecosystem [Build 2017]Aaron Gustafson
Whether at home or at work, the web plays an increasingly critical role in our daily lives. As we have become more dependent on accessing the tools it powers, we’ve also struggled to overcome some of its limitations—network connectivity, for instance. At Microsoft, we’ve long been interested in the power of the web for software development and we are even more excited for the future possibilities offered by progressive web apps (PWAs). In this session, we discuss what PWAs are, how they can be integrated into the development process of modern websites, the advantages and disadvantages of PWAs vs. native development, and what opportunities they present when installed alongside native apps in Windows.
In 2016, mobile internet usage exceeded desktop for the first time! With over 50% of users on mobile, is your web app optimized for them?
Let’s learn about Accelerated Mobile Pages, how AMP address mobile user challenges and build a valid AMP app together!
http://nodevember.org/speaker/Lisa%20Huang
“If Tetris has taught me anything, it’s that errors pile up and accomplishments disappear” is a common quote and it seems we’re living this to its full extend as web developers. We fail to celebrate the successes we have and the tools that are at our disposal but we’re never short of finding reasons why things don’t work. We also tend to pile on technology on technology to solve problems that may actually not exist and thus clog up the web. In this talk Chris Heilmann wants to remind us what we achieved and how we should celebrate it and how we should stop trying to solve problems that are simply beyond our control.
AMP is coming to improve the mobile web. Big time.
There are many aspect to a great user experience on sites.
In order to improve the speed of the media websites on mobile and the monetization, we needed few things:
1. Fast pages. Fast to load, fast to display, saving bandwidth when possible.
2. Easy for the developers and companies to create. Only based on known and widely used technologies.
3. Mobile Friendly: they should respect a standard and thanks to this standard, pages would be automatically optimized for mobile devices
4. Embrace the open web: non-proprietary technology, open source, available to anyone to use and improve. It should not only help for search engines, but for everyone.
In these slides, we will cover AMP and what it can do for you.
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.
2020 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2020 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
February 2018: Sustainable UX ConferenceLisa Huang
The document is a slide presentation about AMP (Accelerated Mobile Pages) that discusses:
- Mobile web challenges like slow devices and networks where JavaScript does heavy lifting.
- How AMP addresses these with techniques like inlined CSS, prioritized resource loading, and async JavaScript to make pages load instantly.
- Examples of companies that use AMP and the types of content it works for.
- How AMP can be used as an entry point or data source to build progressive web apps with features like service workers for offline use.
- Automating performance tests through continuous integration can provide direct feedback on performance changes after code releases and infrastructure changes. It allows performance issues to be detected and addressed earlier.
- Key best practices include starting with a single important test scenario, focusing on robustness over realism, visualizing trend data over time, and analyzing results to update thresholds and catch regressions.
- The goal is to continuously monitor performance through the pipeline and in production to better understand impacts of changes and flag any performance issues for further investigation. Automated tests complement but do not replace thorough acceptance testing.
How to fix the design issues that matter on the pages that matter [2016 Smash...Tammy Everts
How do you know what consumers expect from your site? Every shopper is different and every visit is different. Industry stats tell only part of the story. You need to crack the hood and analyze your own real user data. This talk covers how and why to gather real user data and connect the dots between the metrics that matter most -- IT, UX, and business -- in order to create better shopper experiences and improve your business.
Performance Is About People, Not Metrics [2017 Web Directions Summit] Tammy Everts
If you want your site to succeed, you need to deliver a consistently fast user experience. But how do you quantify "fast"? And how do you track speed across millions and billions of user visits?
When we think about measuring web performance, it’s easy to fall into an abyss of metrics. TCP connection, TTFB, start render, PageSpeed and YSlow scores. Which ones should we care about? In this talk, I share my 10-year quest in search of a unicorn metric for measuring user engagement and web performance.
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
Progressive web app may look like a buzz word around improved web standards and few mobile friendly web design patterns. But it brings positive impact on businesses and users. Let’s learn more about it here.
The document provides an overview of progressive web apps (PWAs), including what they are, their benefits over native apps, and the baseline features required to implement them. PWAs are designed to feel like native mobile apps to users, loading quickly, working offline, and being installable on home screens. The document outlines the core components needed for a basic PWA, such as service workers, a web app manifest, app shell caching, and push notifications. It also provides examples of how some companies have seen benefits from implementing PWAs, and discusses additional features that could further improve the user experience of PWAs.
Smashing Meets for Speed: Why web performance matters – especially nowTammy Everts
We talk a lot about web performance, but a lot of these conversations come from a purely technical perspective. Most people have a gut feeling that performance is important, but exactly what influence it has on your users and your business is often overlooked. In this talk I shared at Smashing Conference's 'Meets for Speed', I share why our need for fast online experiences is hard-wired, and how slow performance hurts your users and your business.
The document discusses the challenges facing the progressive web and introduces progressive web apps (PWAs) as a solution. PWAs are built using modern web standards to provide native app-like experiences through features like push notifications, offline support, and app installation. They address issues with native apps like high installation friction, lack of control for publishers, and app store policies. PWAs are gaining adoption from companies like Alibaba and Housing.com who saw increases in user engagement metrics after implementing PWAs. The document outlines the core components of PWAs and provides an overview of browser and platform support.
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.
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Strangeloop
One approach to performance is to accelerate the network; another is to optimize the application by reducing how much the network is needed and pushing content out towards the user. In this session, Hooman Beheshti reveals how technologies like Front-End Optimization and Content Delivery Networks work alongside the rest of the cloud computing stack to improve performance and increase user productivity.
Continuous Performance Testing and Monitoring in Agile DevelopmentNeotys
Continuous Performance testing and monitoring is the best way to ensure application performance with quicker development cycles. Balancing Agile and DevOps velocity with the need for ongoing performance testing and monitoring is essential. We call it Continuous Performance Validation.
Progressive Web Apps use new web platform technologies like manifest files and service workers to deliver app-style experiences to users on the mobile web. By adding features normally only available to native apps, like home screen shortcuts, push notifications, and offline access, Progressive Web Apps improve user engagement. For example, one Progressive Web App saw time spent increase 3x and returning visitor rates rise by 63% after adding these capabilities. While browser support for the required technologies is still evolving, Progressive Web Apps provide a path for the mobile web to better compete with native apps.
Building for Your Next Billion - Google I/O 2017Robert Nyman
New internet users are coming online around the world and are facing very different constraints to accessing the internet. In this talk, we'll cover what we've learned from building experiences for new internet users and walk through how you can build great experiences that work well for billions of users around the world.
This is a presentation from Google I/O 2017, the video is available at https://www.youtube.com/watch?v=wD3rpdiLMyY
Speakers: Tal Oppenheimer, Mariya Moeva, Robert Nyman
https://twitter.com/taloppenheimer
https://twitter.com/marrrr
https://twitter.com/robertnyman
Progressive Web Apps and the Windows Ecosystem [Build 2017]Aaron Gustafson
Whether at home or at work, the web plays an increasingly critical role in our daily lives. As we have become more dependent on accessing the tools it powers, we’ve also struggled to overcome some of its limitations—network connectivity, for instance. At Microsoft, we’ve long been interested in the power of the web for software development and we are even more excited for the future possibilities offered by progressive web apps (PWAs). In this session, we discuss what PWAs are, how they can be integrated into the development process of modern websites, the advantages and disadvantages of PWAs vs. native development, and what opportunities they present when installed alongside native apps in Windows.
In 2016, mobile internet usage exceeded desktop for the first time! With over 50% of users on mobile, is your web app optimized for them?
Let’s learn about Accelerated Mobile Pages, how AMP address mobile user challenges and build a valid AMP app together!
http://nodevember.org/speaker/Lisa%20Huang
“If Tetris has taught me anything, it’s that errors pile up and accomplishments disappear” is a common quote and it seems we’re living this to its full extend as web developers. We fail to celebrate the successes we have and the tools that are at our disposal but we’re never short of finding reasons why things don’t work. We also tend to pile on technology on technology to solve problems that may actually not exist and thus clog up the web. In this talk Chris Heilmann wants to remind us what we achieved and how we should celebrate it and how we should stop trying to solve problems that are simply beyond our control.
AMP is coming to improve the mobile web. Big time.
There are many aspect to a great user experience on sites.
In order to improve the speed of the media websites on mobile and the monetization, we needed few things:
1. Fast pages. Fast to load, fast to display, saving bandwidth when possible.
2. Easy for the developers and companies to create. Only based on known and widely used technologies.
3. Mobile Friendly: they should respect a standard and thanks to this standard, pages would be automatically optimized for mobile devices
4. Embrace the open web: non-proprietary technology, open source, available to anyone to use and improve. It should not only help for search engines, but for everyone.
In these slides, we will cover AMP and what it can do for you.
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.
2020 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2020 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
February 2018: Sustainable UX ConferenceLisa Huang
The document is a slide presentation about AMP (Accelerated Mobile Pages) that discusses:
- Mobile web challenges like slow devices and networks where JavaScript does heavy lifting.
- How AMP addresses these with techniques like inlined CSS, prioritized resource loading, and async JavaScript to make pages load instantly.
- Examples of companies that use AMP and the types of content it works for.
- How AMP can be used as an entry point or data source to build progressive web apps with features like service workers for offline use.
- Automating performance tests through continuous integration can provide direct feedback on performance changes after code releases and infrastructure changes. It allows performance issues to be detected and addressed earlier.
- Key best practices include starting with a single important test scenario, focusing on robustness over realism, visualizing trend data over time, and analyzing results to update thresholds and catch regressions.
- The goal is to continuously monitor performance through the pipeline and in production to better understand impacts of changes and flag any performance issues for further investigation. Automated tests complement but do not replace thorough acceptance testing.
How to fix the design issues that matter on the pages that matter [2016 Smash...Tammy Everts
How do you know what consumers expect from your site? Every shopper is different and every visit is different. Industry stats tell only part of the story. You need to crack the hood and analyze your own real user data. This talk covers how and why to gather real user data and connect the dots between the metrics that matter most -- IT, UX, and business -- in order to create better shopper experiences and improve your business.
Performance Is About People, Not Metrics [2017 Web Directions Summit] Tammy Everts
If you want your site to succeed, you need to deliver a consistently fast user experience. But how do you quantify "fast"? And how do you track speed across millions and billions of user visits?
When we think about measuring web performance, it’s easy to fall into an abyss of metrics. TCP connection, TTFB, start render, PageSpeed and YSlow scores. Which ones should we care about? In this talk, I share my 10-year quest in search of a unicorn metric for measuring user engagement and web performance.
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
Progressive web app may look like a buzz word around improved web standards and few mobile friendly web design patterns. But it brings positive impact on businesses and users. Let’s learn more about it here.
The document provides an overview of progressive web apps (PWAs), including what they are, their benefits over native apps, and the baseline features required to implement them. PWAs are designed to feel like native mobile apps to users, loading quickly, working offline, and being installable on home screens. The document outlines the core components needed for a basic PWA, such as service workers, a web app manifest, app shell caching, and push notifications. It also provides examples of how some companies have seen benefits from implementing PWAs, and discusses additional features that could further improve the user experience of PWAs.
A Progressive Web App uses modern web capabilities to deliver an app-like user experience.
Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web.
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.
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.
Performance and User Experience for the Web of TomorrowWP Engine
Mariya Moeva, Product Manager at Google, discusses the future of the web and the important roles privacy, speed, and fostering quality user experiences have to play in it. Learn about tools like AMP, Site Kit and Web Stories for WordPress that you can use to assess and advance the performance of your WordPress site.
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Jeremy Johnson
There are a number of options when going mobile, and it's not slowing down. Why choose one over the other? What are the strengths and pitfalls? What's right for your customers and users? We'll go over each option, with examples of how you can come to the right strategy around your mobile offerings.
Progressive Web Apps aim to bring the benefits of native mobile apps to the web. They use newer web capabilities like app manifests and service workers to deliver app-like experiences through the browser. App manifests allow web apps to be installed on home screens and launched full screen like native apps. Service workers enable features like offline access and push notifications. Early adopters are seeing increased user engagement through Progressive Web Apps, with metrics like conversions and time spent improving. While browser support is still evolving, Progressive Web Apps provide a promising approach for delivering high-quality mobile experiences through the web.
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
This document summarizes a talk given by Chris Heilmann at ForwardJS in 2015. Heilmann discusses the state of web development technologies and how developers have focused too much on experimental features that are not ready for production use. This has led to a fragmented web where browsers implement features differently. He argues developers should focus on standardizing and improving existing web standards rather than constantly introducing new technologies. ES6 is highlighted as a priority for improving existing JavaScript.
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.
Introduction to Progressive Web ApplicationsChris Love
Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.
PWAs are quick, function offline and can also perform like a conventional native application. This provides users with a positive experience. PWAs and Web Applications perform the same functions and are extremely comparable in many aspects. And since we’ve understood how trending they are in today’s time, PWA would definitely be a good choice for your company!
Introduction to Progressive Web Apps (PWA) as presented in Divum's New Product Developers Meet. PWA provides highly reliable, fast & engaged mobile like user experience on the web.
The web is evolving too fast, and it could be overwhelming sometimes to keep the rhythm with the pace of all that good work happening by the amazing web enthusiast engineers, so to put it all in a nutshell we'll review the most significant changes in the web platform recently, including the major features and adoptions of PWA - Progressive Web Apps, and AMP - Accelerated Mobile Pages. It's like headlines or teasers, that you can refer to individual topics for details later. You're free to use these slides in your talks, I'd appreciate giving credits though - https://goo.gl/1joHK4
Todays web front-end applications architecture. All resources shared at the end of presentation.
Full sources on:
https://lnkd.in/gyQuFKK
https://lnkd.in/gZK8Sp3
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.
PWAs allow websites to behave like native applications through the use of technologies like web app manifests, service workers, and progressive enhancement. A web app manifest allows sites to define metadata like display properties, icons, and app functionality. Service workers act as proxies between web apps and the network to enable features like offline access and push notifications. PWAs aim to provide reliable, fast, and engaging experiences for users.
Progressive Web Apps: Opera’s Perspective discusses Opera's views on progressive web apps (PWAs). Some key points covered include:
- PWAs are well-suited for Africa due to their lightweight nature and ability to work offline/with unreliable networks.
- Opera Mini, used by millions in Africa, now supports PWA features when using standard web views but not its "Extreme" compression mode.
- The document outlines various user experience patterns for PWAs, such as prompting installation, setting display modes, handling offline content, and using push notifications.
- It also briefly discusses the display mode media query, experiments with PWA interfaces, and recommends the pwa
This Slide Deck Was used on my Masterclass abut PWA in my Masterclass about PWA and Web Standards. Thia was an introduction to PWA and his basic stone Path.
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.
Why Progressive Web Apps will transform your websiteJason Grigsby
Progressive web apps (PWAs) can transform websites by making them more like native apps through the use of service workers, web app manifests, and other modern web capabilities. Some key benefits of PWAs include providing fast and reliable experiences even on slow mobile networks, working regardless of a network connection, and engaging users through web app banners and push notifications. Early results show that PWAs can significantly reduce data usage and increase user engagement, conversion rates, and sales compared to mobile websites. While PWAs work across browsers, including on iOS, their full capabilities are still progressively being adopted.
Adapting to Input — Smashing Conference NYCJason Grigsby
Input is constantly evolving and expanding beyond traditional keyboard and mouse. The document discusses 7 principles for adapting web design to different inputs:
1. Design for the largest target by default.
2. Design for modes of interaction instead of specific inputs.
3. Make designs accessible to all inputs.
4. Support multiple concurrent inputs.
5. Abstract baseline inputs like tap, click, and point.
6. Progressively enhance with new inputs like gestures and sensors.
7. Include different inputs in testing plans.
The key message is that input cannot be detected, is a continuum, and is always changing. Web design needs to be adaptable and not assume certain inputs based on device properties.
The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
The document discusses responsive web design and mobile-first approaches. It advocates building responsive designs with a mobile-first mindset, where the mobile version is prioritized and expanded upon for larger screens rather than the desktop version being scaled down. It also emphasizes performance techniques like keeping images out of breakpoints to avoid unnecessary downloads, and using media queries to scope images to only the viewports that need them. The overall message is that responsive design should consider both layout and performance to provide the best experience across devices.
When responsive web design meets the real worldJason Grigsby
The document discusses responsive web design and some of the challenges it faces. It recommends adopting a mobile first approach where the mobile styles are defined first before desktop styles, allowing for a progressive enhancement. It also emphasizes the importance of performance and ensuring responsive designs are not just focused on layout but also on optimizing for speed. Key techniques discussed include building mobile first, reordering media queries, keeping basic styles outside queries, and scoping images within media queries to avoid unnecessary downloads.
Adaptive Input — Breaking Development Conference, San DiegoJason Grigsby
Windows 8. Chromebook Pixel. Ubuntu Phone. These devices shatter another consensual hallucination that we web developers have bought into: mobile = touch and desktop = keyboard and mouse.
We have tablets with keyboards; laptops that become tablets; laptops with touch screens; phones with physical keyboards; and even phones that become desktop computers. Not to mention new forms of input like cameras, voice control, and sensors.
We've learned how to respond to screen size. Our next challenge is learning how to adapt to different forms of input.
The document summarizes key techniques for responsible responsive web design, including building mobile-first responsive designs, keeping CSS images in their place, conditionally loading JavaScript based on screen size and capabilities, delivering different sized images at different screen sizes, and handling high-density images carefully. It also discusses debates around whether a one-size-fits-all responsive approach can compete with a tailored experience and ensuring responsive designs are optimized for performance.
No matter how much we try to put ourselves into a mobile first mentality, it is hard for us to do so fully. Our access to PCs prevents us from experiencing mobile the way many in the world do.
We're currently fighting for parity among experiences. We're arguing that the mobile version shouldn't be a dumbed down version of the desktop site.
But we've set our sights too low. In a true Mobile First world, the mobile version should be the best experience. Mobile shouldn't just match the desktop experience, it should exceed it.
Presented at Mobilism.nl
Device diversity is about to get an order of magnitude worse. SmartTVs are hitting the market in mass this year. Sony, LG, Vizio, and Samsung are all shipping televisions with Google TV built in.
And if the rumors that Apple will release a TV this year are true, 2012 will turn out to be the year web developers start to tackle the glass screen hanging on our walls.
Why should web developers focused on mobile learn about the web on TVs? Because TVs represent the next challenge in device proliferation. They share common characteristics with their smaller brethren. They create new challenges and opportunities we haven't encountered yet. And most importantly, learning how to build for TVs helps inform our practices of building for mobile devices.
Mobile: The Market, The Web and Windows Phone’s Future Jason Grigsby
1. Mobile internet usage is growing exponentially, surpassing traditional internet usage.
2. Smartphone apps represent a huge opportunity, but mobile web apps can also be very powerful if designed well for the mobile context.
3. There is no consensus on whether native apps or mobile web apps have an advantage, and the debate touches on issues like user experience, business models, and platform lock-in.
Where 2.0 -- Get me a mobile strategy or you’re fired!Jason Grigsby
Mobile is a disruptive technology that requires companies to develop a mobile strategy or risk losing customers. Companies should understand the mobile context including what devices customers use and not assume everyone has downloaded their app. They should look beyond just native apps to also use mobile web, SMS and MMS to reach customers. Apps should be focused on serving the most loyal customers and adding real value through mobile capabilities. Developing products specifically for mobile, not just porting desktop products, is key to success.
The document discusses how mobile technology is transforming journalism and media. Some key points:
- Mobile devices are the most important communication technology since the printing press.
- Mobile is the 7th mass media, with over 4.6 billion mobile subscribers worldwide, more than half the planet.
- Mobile represents a disruptive technology that is changing how media companies operate and distribute news/content.
- Usage of mobile internet and apps like Opera Mini are growing dramatically, showing people increasingly consuming media on mobile.
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
A variation of my talk on mobile strategy given to Clark College to encourage students to pursue mobile and to encourage the college to adopt mobile curriculum.
Google Talk: DOs and DON'Ts of Mobile StrategyJason Grigsby
Presented at Google on October 8, 2010 as part of the Google Talks series.
Updated from previous presentations to talk about legacy content management systems and more ways our iPhone lens skews our perception of the world.
Get Me a Mobile Strategy or You're FIRED!Jason Grigsby
Pitching in to help cover for a speaker who was unable to make it to Design4Mobile so I've modified a version of my Mobile Strategy slides for the afternoon session.
Covers DOs and DONTs of Mobile Strategy for businesses.
Guidelines for Effective Data VisualizationUmmeSalmaM1
This PPT discuss about importance and need of data visualization, and its scope. Also sharing strong tips related to data visualization that helps to communicate the visual information effectively.
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...TrustArc
Global data transfers can be tricky due to different regulations and individual protections in each country. Sharing data with vendors has become such a normal part of business operations that some may not even realize they’re conducting a cross-border data transfer!
The Global CBPR Forum launched the new Global Cross-Border Privacy Rules framework in May 2024 to ensure that privacy compliance and regulatory differences across participating jurisdictions do not block a business's ability to deliver its products and services worldwide.
To benefit consumers and businesses, Global CBPRs promote trust and accountability while moving toward a future where consumer privacy is honored and data can be transferred responsibly across borders.
This webinar will review:
- What is a data transfer and its related risks
- How to manage and mitigate your data transfer risks
- How do different data transfer mechanisms like the EU-US DPF and Global CBPR benefit your business globally
- Globally what are the cross-border data transfer regulations and guidelines
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My IdentityCynthia Thomas
Identities are a crucial part of running workloads on Kubernetes. How do you ensure Pods can securely access Cloud resources? In this lightning talk, you will learn how large Cloud providers work together to share Identity Provider responsibilities in order to federate identities in multi-cloud environments.
An Introduction to All Data Enterprise IntegrationSafe Software
Are you spending more time wrestling with your data than actually using it? You’re not alone. For many organizations, managing data from various sources can feel like an uphill battle. But what if you could turn that around and make your data work for you effortlessly? That’s where FME comes in.
We’ve designed FME to tackle these exact issues, transforming your data chaos into a streamlined, efficient process. Join us for an introduction to All Data Enterprise Integration and discover how FME can be your game-changer.
During this webinar, you’ll learn:
- Why Data Integration Matters: How FME can streamline your data process.
- The Role of Spatial Data: Why spatial data is crucial for your organization.
- Connecting & Viewing Data: See how FME connects to your data sources, with a flash demo to showcase.
- Transforming Your Data: Find out how FME can transform your data to fit your needs. We’ll bring this process to life with a demo leveraging both geometry and attribute validation.
- Automating Your Workflows: Learn how FME can save you time and money with automation.
Don’t miss this chance to learn how FME can bring your data integration strategy to life, making your workflows more efficient and saving you valuable time and resources. Join us and take the first step toward a more integrated, efficient, data-driven future!
Dev Dives: Mining your data with AI-powered Continuous DiscoveryUiPathCommunity
Want to learn how AI and Continuous Discovery can uncover impactful automation opportunities? Watch this webinar to find out more about UiPath Discovery products!
Watch this session and:
👉 See the power of UiPath Discovery products, including Process Mining, Task Mining, Communications Mining, and Automation Hub
👉 Watch the demo of how to leverage system data, desktop data, or unstructured communications data to gain deeper understanding of existing processes
👉 Learn how you can benefit from each of the discovery products as an Automation Developer
🗣 Speakers:
Jyoti Raghav, Principal Technical Enablement Engineer @UiPath
Anja le Clercq, Principal Technical Enablement Engineer @UiPath
⏩ Register for our upcoming Dev Dives July session: Boosting Tester Productivity with Coded Automation and Autopilot™
👉 Link: https://bit.ly/Dev_Dives_July
This session was streamed live on June 27, 2024.
Check out all our upcoming Dev Dives 2024 sessions at:
🚩 https://bit.ly/Dev_Dives_2024
Multimodal Retrieval Augmented Generation (RAG) with MilvusZilliz
We've seen an influx of powerful multimodal capabilities in many LLMs. In this talk, we'll vectorize a dataset of images and texts into the same embedding space, store them in Milvus, retrieve all relevant data using multilingual texts and/or images and input multimodal data as context into GPT-4o.
Corporate Open Source Anti-Patterns: A Decade LaterScyllaDB
A little over a decade ago, I gave a talk on corporate open source anti-patterns, vowing that I would return in ten years to give an update. Much has changed in the last decade: open source is pervasive in infrastructure software, with many companies (like our hosts!) having significant open source components from their inception. But just as open source has changed, the corporate anti-patterns around open source have changed too: where the challenges of the previous decade were all around how to open source existing products (and how to engage with existing communities), the challenges now seem to revolve around how to thrive as a business without betraying the community that made it one in the first place. Open source remains one of humanity's most important collective achievements and one that all companies should seek to engage with at some level; in this talk, we will describe the changes that open source has seen in the last decade, and provide updated guidance for corporations for ways not to do it!
The "Zen" of Python Exemplars - OTel Community DayPaige Cruz
The Zen of Python states "There should be one-- and preferably only one --obvious way to do it." OpenTelemetry is the obvious choice for traces but bad news for Pythonistas when it comes to metrics because both Prometheus and OpenTelemetry offer compelling choices. Let's look at all of the ways you can tie metrics and traces together with exemplars whether you're working with OTel metrics, Prom metrics, Prom-turned-OTel metrics, or OTel-turned-Prom metrics!
this resume for sadika shaikh bca studentSadikaShaikh7
I am a dedicated BCA student with a strong foundation in web technologies, including PHP and MySQL. I have hands-on experience in Java and Python, and a solid understanding of data structures. My technical skills are complemented by my ability to learn quickly and adapt to new challenges in the ever-evolving field of computer science.
What is an RPA CoE? Session 4 – CoE ScalingDianaGray10
How to scale a COE to meet organizational missions.
Topics covered:
• What is the original focal area?
• How to expand the COE globally.
• Is a centralized or decentralized model better for scaling?
Speaker:
Chris Bolin, Senior Intelligent Automation Architect Anika Systems
Tool Support for Testing as Chapter 6 of ISTQB Foundation 2018. Topics covered are Tool Benefits, Test Tool Classification, Benefits of Test Automation and Risk of Test Automation
6. How does the CEO even
know about progressive
web apps?
7. Cool. I’ve been wanting to play with
service workers… Maybe we can use
Vue.js here as well… I wonder if this
can be used as excuse to switch to
node js…
9. How does the CEO even
know about progressive
web apps?
12. Ola Cabs
• 68% increase in mobile traffic
• Tier 2 cities conversion rate same as
native app. Tier 3 cities, conversion
rate is 30% higher with PWA.
• PWA is 200KB which 300x smaller
than Android and 500x than iOS.
• 20% of users who book in the PWA
had previously uninstalled app.
Source: Google, http://bit.ly/2q9D4EA
16. Original Definition by Frances Berriman and Alex Russell
Responsive 

Fit any form factor. RWD FTW!
Connectivity Independent

Offline features thanks to service workers.
App-like interactions

App shell for apps navigation.
Fresh

Up-to-date thanks to service workers.
Safe

Served on HTTPS.
Discoverable

Manifest files identify them as apps.
Re-engageable

Push notifications bring people back to apps.
Installable

Can be installed to the home screen w/o app stores.
Linkable

Still part of the web—URLs still work.
Progressive

Use progressive enhancement for better experience.
25. PWA is a website that has been enhanced with:
{manifest}https service worker
Credit to Jeremy Keith for explicitly declaring a technical definition: https://adactio.com/journal/13098
36. The hype can be a turn off
https://twitter.com/elliotecweb/status/864070806569066497
37. The name isn’t for you and worrying about it is
distraction from just building things that work better for
everyone. The name is for your boss, for your investor,
for your marketeer.
—Frances Berriman, Naming Progressive Web Apps
40. If so, you would probably benefit from a PWA.
Does your organization have a website?
41. Does your organization make money on
your website via e-commerce,
advertising, or some other method?
If so, you definitely need a progressive web app.
44. Reach people who don’t have your native app
installed or are on a different device.
45. Your website is often a
customer’s first interaction
with your company. 

A better web experience will likely mean
more revenue and more native app installs.
64. AliExpress
• 104% for new users across all
browsers in conversion
• 82% increase in iOS conversion
Source: Google, http://bit.ly/2fq2ckc
65. Wego
• 50% increase in iOS conversion
• 35% increase in average iOS session
duration
Source: Google, https://bit.ly/2uOsoNM
88. Adding a back button is harder than it seems
• Manage the browser history so back
button goes to right location.
• Back button in an app often implies
a hierarchy, not simply going to the
last screen you were on.
• Do you rearchitect your site to
create an app hierarchy?
90. Where does this button go?
Does it do the same thing as
the browser back button?
Should
there be an
app back
button?
93. Not every customer or potential customer will add
your Progressive Web App to their home screen
…but every visitor will “install” your PWA!
103. Should feeling like an app be the goal?
Should feeling
like an app be
your goal?
104. Feel Like an App
Website with
Performance
Improvements
Full screen, app
shell with native
design language
Minimal-ui
Standalone
System Fonts Fullscreen
Animation and Polish App Shell
Native Design
MORE COMPLEXLESS COMPLEX
107. Offline Fallback Pages
Can Keep People
Engaged
• Trivago found that 67% of people
continue to browse the site when they
come back online.
Source: http://bit.ly/2GoXjCi
126. The goal isn’t offline; offline is just a special case
of flakiness (and the easiest one to detect
technically). PWAs and SWs give you the ability to
be reliable for your users. That’s the advantage
across all connection states (even online!)
—Alex Russell
143. Beyond PWAs
Basic PWA Multiple New APIs
Autofill Support
AMP to PWA
Credential Management API
Camera, other sensors Payment Request API
AMP in PWA
MORE COMPLEXLESS COMPLEX
145. PWAs are progressive because… Progressive Roadmap
{manifest}https
Jul 13
Redesign launches
Better security with HTTPS
Faster site via HTTP/2
Better bookmarks via manifest
Oct 3
Faster pages
Offline fallback
It’s a PWA!
service worker
Oct 18
Offline pages
Offline indicator
Improved font loading
Nov 22
Push notifications
HTTP/2 Link Preload
Dec 7
Small tweaks
PWA announced
148. Offline
Interactivity
Cache for
Perf Only
Offline
Native App
Stores
Website with Perf
Improvements
Full Screen,
App Shell
New APIs
No Add to
Home Screen
Basic PWA
Feels Like An App
Installation and Discovery
No Push
Notifications
Personalized and
Integrated Push
Push Notifications
Beyond PWAs
150. Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Baseline
PWA
Front-end
Additions
Larger
Initiatives
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Offline Fallback
Cache recently viewed pages
Precache popular or
important pages
Add third-party push
notification service
CMS plugin for push
notifications
Payment Request API
Credentials Management API
Integrate notifications with
backend systems
Background sync
Move to app shell
151. Baseline
PWA
Front-end
Additions
Larger
Initiatives
Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Offline Fallback
Cache recently viewed pages
Precache popular or
important pages
Add third-party push
notification service
CMS plugin for push
notifications
Payment Request API
Credentials Management API
Integrate notifications with
backend systems
Background sync
Move to app shell
154. Coming November 12th!
Preorders available now. Follow
@abookapart, @grigs or sign up for the
A Book Apart newsletter for updates.
https://abookapart.com/products/
progressive-web-apps
No
28
PROGRESSIVE
WEBAPPS
Jason Grigsby
156. Thank You!
White Blank Notebook by Tirachard Kumtanom
Woman Executive Holding Tablet by Pixabay
Schedule Planning by Startup Stock Photos
Hackers by Christopher Dombres
NSA by by Mario Antonio Pena Zapatería
Map Location Symbol by Tumisa
Smartphone on Bridge by Jeremy Levin
Hype by Kerry J
Instagram App on iPhone by Pixabay
Man in Fuzzy Hat by Gratisography
Southbank - Samsung Galaxy S8 (1) by TaylorHerring
Now THIS is comfort! by Garry Wilmore
Trojan Horse by Hsing Wei
Cold Snow Man Person
Asphalt Blur Car City by Pixabay
Woman Listening to Music by bruce mars
Woman and Dog by Tookapic 
Focus by Mark Hunter
Person Holding Silver iPhone by rawpixel.com
MacBook Air Beside Painting by rawpixel.com
Android Phone by freestocks.org
Smart Watch by Oliur Rahman
Apple Office Internet iPad by Pixabay
Woman Jumping by Quang Anh Ha Nguyen
SEM by Pixabay
Legs on Chair by kaboompics.com
In Hiding by Taylor McBride
Medusa Kill Switch by Scott Hart
White Auto Gauge by Mikes Photos
Blue and Silver Stethoscope by Pixabay
Tortoise by Frans Van Heerden
iPhone Photo on Railroad Tracks by Kaique Rocha
database by ✦ Shmidt Sergey ✦ from the Noun Project
Cloud by Blackwoodmedia.com.au from the Noun Project
Responsive Design by Delwar Hossain from the Noun Project
cogs by Gregor Cresnar from the Noun Project
Special thanks to these fabulous people who graciously
shared their work under Creative Commons.