SlideShare une entreprise Scribd logo
Modern Tools for
Building Progressive
Web Apps
John M. Wargo
https://johnwargo.com
@johnwargo
About Me
• Software developer, writer, presenter, father, husband, and geek
• Specializes in mobile development
• Principal Program Manager @ Microsoft
• App + Cloud Experiences team
• Responsible for Visual Studio App Center Push
and Azure Notification Hubs
• Author of 7 (+1)* books
• Former contributor to the Apache Cordova project
• Live in Charlotte, NC
• Previously @ AT&T, BlackBerry, BoxTone, Forrester Research,
Hewlett Packard Enterprise (HPE), others
www.johnwargobooks.com
Learning Progressive
Web Apps
• Available in early 2020
• https://learningpwa.com/
Modern Tools for
Building Progressive
Web Apps
Progressive
Web Apps
Google: Progressive Web Apps are
user experiences that have the
reach of the web, and are:
• Reliable - Load instantly and
never show the downasaur*,
even in uncertain network
conditions.
• Fast - Respond quickly to user
interactions with silky smooth
animations and no janky
scrolling.
• Engaging - Feel like a natural
app on the device, with an
immersive user experience.
Jeremy Keith: Progressive Web
Apps consist of:
• HTTPS
• A service worker
• A Web App Manifest
* When using Google Chrome and your internet connectivity dies, you'll see a little Tyrannosaurus. This is called the 'downasaur'
https://developers.google.com/web/progressive-web-apps https://adactio.com/journal/13098
With service workers and
manifest files, PWAs:
• Are installable
• Are available (run while)
offline
• Can perform background sync
operations
Anatomy of a PWA
index.html
app.webmanifest
index.html*
*or loaded from an external file
sw.js
PWAs Now Automatic
Through Many
Common Frameworks
PWA Tooling
Assessing the PWA-ness of a Web App with Lighthouse
• Multiple entry points
• Chrome extension
• Developer Tools
• Command-line
https://developers.google.com/web/tools/lighthouse
PWA Automation (Part 1)
PWABuilder
PWA Automation (Part 2)
Workbox
Workbox
• JavaScript library for adding offline operation to a web app
• Locally cached resources
• Two approaches:
• Precache all app resources
• Custom caching strategies
• Command-line driven
Workbox Caching Strategies
• CacheFirst: Return the cached version of a resource, retrieving the resource from the network (and adding it to the cache) if it’s
not already in the cache.
• CacheOnly: Return the resource from the cache. If the resource is not in the cache, the fetch will fail.
Note: Your service worker must populate the cache during service worker installation to enable this option.
• NetworkFirst: Return the network version of the resource, retrieving the resource from the cache if the network is not
available. The fetch fails when the network version is not available, and the resource is not in the cache.
• NetworkOnly: Return the network version of the resource, failing if it’s not available.
• StaleWhileRevalidate: Return the cached version of a resource, then update the cached version from the network so it’s
there the next time the app requests the resource. This gets resources to an app quickly, but it may not always be the most recent
version.
Implementing a Caching Strategy
Custom Routes
Questions?

Contenu connexe

Tendances

Build your android app with gradle
Build your android app with gradleBuild your android app with gradle
Build your android app with gradle
Swain Loda
 
Automated Testing in DevOps
Automated Testing in DevOpsAutomated Testing in DevOps
Automated Testing in DevOps
Haufe-Lexware GmbH & Co KG
 
Continuous integration
Continuous integrationContinuous integration
Continuous integration
Lior Tal
 
EMC World 2016 12 Factor Apps FTW
EMC World 2016 12 Factor Apps FTWEMC World 2016 12 Factor Apps FTW
EMC World 2016 12 Factor Apps FTW
Tommy Trogden
 
Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...
Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...
Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...
Red Hat Developers
 
Devops CI-CD pipeline with Containers
Devops CI-CD pipeline with ContainersDevops CI-CD pipeline with Containers
Devops CI-CD pipeline with Containers
NuSpace
 
12 Factor App Methodology
12 Factor App Methodology12 Factor App Methodology
12 Factor App Methodology
laeshin park
 
Javantura v4 - Support SpringBoot application development lifecycle using Ora...
Javantura v4 - Support SpringBoot application development lifecycle using Ora...Javantura v4 - Support SpringBoot application development lifecycle using Ora...
Javantura v4 - Support SpringBoot application development lifecycle using Ora...
HUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
Testing Without a GUI Using TestComplete
 Testing Without a GUI Using TestComplete Testing Without a GUI Using TestComplete
Testing Without a GUI Using TestComplete
SmartBear
 
The 12 Factor App
The 12 Factor AppThe 12 Factor App
The 12 Factor App
rudiyardley
 
Microservices Testing at Scale
Microservices Testing at ScaleMicroservices Testing at Scale
Microservices Testing at Scale
VMware Tanzu
 
Gitlab ci-cd
Gitlab ci-cdGitlab ci-cd
Gitlab ci-cd
Dan MAGIER
 
12 factor apps
12 factor apps12 factor apps
12 factor apps
Alican Akkuş
 
Cleaner Code Through Test-Driven Development
Cleaner Code Through Test-Driven DevelopmentCleaner Code Through Test-Driven Development
Cleaner Code Through Test-Driven Development
All Things Open
 
Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
Matthias Luebken
 
Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"
Fwdays
 
Your own kubernetes castle
Your own kubernetes castleYour own kubernetes castle
Your own kubernetes castle
LibbySchulze
 
Building static libraries for iOS with CocoaPods
Building static libraries for iOS with CocoaPodsBuilding static libraries for iOS with CocoaPods
Building static libraries for iOS with CocoaPods
Sigmapoint
 
Porting Projects to .NET 5
Porting Projects to .NET 5Porting Projects to .NET 5
Porting Projects to .NET 5
Immo Landwerth
 

Tendances (19)

Build your android app with gradle
Build your android app with gradleBuild your android app with gradle
Build your android app with gradle
 
Automated Testing in DevOps
Automated Testing in DevOpsAutomated Testing in DevOps
Automated Testing in DevOps
 
Continuous integration
Continuous integrationContinuous integration
Continuous integration
 
EMC World 2016 12 Factor Apps FTW
EMC World 2016 12 Factor Apps FTWEMC World 2016 12 Factor Apps FTW
EMC World 2016 12 Factor Apps FTW
 
Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...
Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...
Putting The 'M' In MBaaS—Red Hat Mobile Client Development Platform (Jay Balu...
 
Devops CI-CD pipeline with Containers
Devops CI-CD pipeline with ContainersDevops CI-CD pipeline with Containers
Devops CI-CD pipeline with Containers
 
12 Factor App Methodology
12 Factor App Methodology12 Factor App Methodology
12 Factor App Methodology
 
Javantura v4 - Support SpringBoot application development lifecycle using Ora...
Javantura v4 - Support SpringBoot application development lifecycle using Ora...Javantura v4 - Support SpringBoot application development lifecycle using Ora...
Javantura v4 - Support SpringBoot application development lifecycle using Ora...
 
Testing Without a GUI Using TestComplete
 Testing Without a GUI Using TestComplete Testing Without a GUI Using TestComplete
Testing Without a GUI Using TestComplete
 
The 12 Factor App
The 12 Factor AppThe 12 Factor App
The 12 Factor App
 
Microservices Testing at Scale
Microservices Testing at ScaleMicroservices Testing at Scale
Microservices Testing at Scale
 
Gitlab ci-cd
Gitlab ci-cdGitlab ci-cd
Gitlab ci-cd
 
12 factor apps
12 factor apps12 factor apps
12 factor apps
 
Cleaner Code Through Test-Driven Development
Cleaner Code Through Test-Driven DevelopmentCleaner Code Through Test-Driven Development
Cleaner Code Through Test-Driven Development
 
Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
 
Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"
 
Your own kubernetes castle
Your own kubernetes castleYour own kubernetes castle
Your own kubernetes castle
 
Building static libraries for iOS with CocoaPods
Building static libraries for iOS with CocoaPodsBuilding static libraries for iOS with CocoaPods
Building static libraries for iOS with CocoaPods
 
Porting Projects to .NET 5
Porting Projects to .NET 5Porting Projects to .NET 5
Porting Projects to .NET 5
 

Similaire à Modern Tools for Building Progressive Web Apps

Modern Web Framework : Play framework
Modern Web Framework : Play frameworkModern Web Framework : Play framework
Modern Web Framework : Play framework
Suman Adak
 
2014 Picking a Platform by Anand Kulkarni
2014 Picking a Platform by Anand Kulkarni2014 Picking a Platform by Anand Kulkarni
2014 Picking a Platform by Anand Kulkarni
European Innovation Academy
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
SaleemMalik52
 
Containerdays Intro to Habitat
Containerdays Intro to HabitatContainerdays Intro to Habitat
Containerdays Intro to Habitat
Mandi Walls
 
Exploring pwa for shopware
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopware
Sander Mangel
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice
Łukasz Romanowicz
 
Manual JavaScript Analysis Is A Bug
Manual JavaScript Analysis Is A BugManual JavaScript Analysis Is A Bug
Manual JavaScript Analysis Is A Bug
Lewis Ardern
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
Andy Kucharski
 
Java Restart with WebFX
Java Restart with WebFX Java Restart with WebFX
Java Restart with WebFX
Nikita Lipsky
 
The PRPL Pattern
The PRPL PatternThe PRPL Pattern
The PRPL Pattern
Red Pill Now
 
GWT and PWA
GWT and PWAGWT and PWA
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
Promet Source
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
Chris Love
 
Rock Solid Deployment of Web Applications
Rock Solid Deployment of Web ApplicationsRock Solid Deployment of Web Applications
Rock Solid Deployment of Web Applications
Pablo Godel
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
Bojan Veljanovski
 
Front-End Tools and Workflows
Front-End Tools and WorkflowsFront-End Tools and Workflows
Front-End Tools and Workflows
Sara Vieira
 
Building JavaScript
Building JavaScriptBuilding JavaScript
Building JavaScript
Brady Clifford
 
Building Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on AzureBuilding Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on Azure
Brian Lyttle
 
Continuous Integration In A PHP World
Continuous Integration In A PHP WorldContinuous Integration In A PHP World
Continuous Integration In A PHP World
Idaf_1er
 

Similaire à Modern Tools for Building Progressive Web Apps (20)

Modern Web Framework : Play framework
Modern Web Framework : Play frameworkModern Web Framework : Play framework
Modern Web Framework : Play framework
 
2014 Picking a Platform by Anand Kulkarni
2014 Picking a Platform by Anand Kulkarni2014 Picking a Platform by Anand Kulkarni
2014 Picking a Platform by Anand Kulkarni
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Containerdays Intro to Habitat
Containerdays Intro to HabitatContainerdays Intro to Habitat
Containerdays Intro to Habitat
 
Exploring pwa for shopware
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopware
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice
 
Manual JavaScript Analysis Is A Bug
Manual JavaScript Analysis Is A BugManual JavaScript Analysis Is A Bug
Manual JavaScript Analysis Is A Bug
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
 
Java Restart with WebFX
Java Restart with WebFX Java Restart with WebFX
Java Restart with WebFX
 
The PRPL Pattern
The PRPL PatternThe PRPL Pattern
The PRPL Pattern
 
GWT and PWA
GWT and PWAGWT and PWA
GWT and PWA
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
 
Rock Solid Deployment of Web Applications
Rock Solid Deployment of Web ApplicationsRock Solid Deployment of Web Applications
Rock Solid Deployment of Web Applications
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
Front-End Tools and Workflows
Front-End Tools and WorkflowsFront-End Tools and Workflows
Front-End Tools and Workflows
 
Building JavaScript
Building JavaScriptBuilding JavaScript
Building JavaScript
 
Building Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on AzureBuilding Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on Azure
 
Continuous Integration In A PHP World
Continuous Integration In A PHP WorldContinuous Integration In A PHP World
Continuous Integration In A PHP World
 

Plus de All Things Open

Building Reliability - The Realities of Observability
Building Reliability - The Realities of ObservabilityBuilding Reliability - The Realities of Observability
Building Reliability - The Realities of Observability
All Things Open
 
Modern Database Best Practices
Modern Database Best PracticesModern Database Best Practices
Modern Database Best Practices
All Things Open
 
Open Source and Public Policy
Open Source and Public PolicyOpen Source and Public Policy
Open Source and Public Policy
All Things Open
 
Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...
Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...
Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...
All Things Open
 
The State of Passwordless Auth on the Web - Phil Nash
The State of Passwordless Auth on the Web - Phil NashThe State of Passwordless Auth on the Web - Phil Nash
The State of Passwordless Auth on the Web - Phil Nash
All Things Open
 
Total ReDoS: The dangers of regex in JavaScript
Total ReDoS: The dangers of regex in JavaScriptTotal ReDoS: The dangers of regex in JavaScript
Total ReDoS: The dangers of regex in JavaScript
All Things Open
 
What Does Real World Mass Adoption of Decentralized Tech Look Like?
What Does Real World Mass Adoption of Decentralized Tech Look Like?What Does Real World Mass Adoption of Decentralized Tech Look Like?
What Does Real World Mass Adoption of Decentralized Tech Look Like?
All Things Open
 
How to Write & Deploy a Smart Contract
How to Write & Deploy a Smart ContractHow to Write & Deploy a Smart Contract
How to Write & Deploy a Smart Contract
All Things Open
 
Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow
 Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow
Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow
All Things Open
 
DEI Challenges and Success
DEI Challenges and SuccessDEI Challenges and Success
DEI Challenges and Success
All Things Open
 
Scaling Web Applications with Background
Scaling Web Applications with BackgroundScaling Web Applications with Background
Scaling Web Applications with Background
All Things Open
 
Supercharging tutorials with WebAssembly
Supercharging tutorials with WebAssemblySupercharging tutorials with WebAssembly
Supercharging tutorials with WebAssembly
All Things Open
 
Using SQL to Find Needles in Haystacks
Using SQL to Find Needles in HaystacksUsing SQL to Find Needles in Haystacks
Using SQL to Find Needles in Haystacks
All Things Open
 
Configuration Security as a Game of Pursuit Intercept
Configuration Security as a Game of Pursuit InterceptConfiguration Security as a Game of Pursuit Intercept
Configuration Security as a Game of Pursuit Intercept
All Things Open
 
Scaling an Open Source Sponsorship Program
Scaling an Open Source Sponsorship ProgramScaling an Open Source Sponsorship Program
Scaling an Open Source Sponsorship Program
All Things Open
 
Build Developer Experience Teams for Open Source
Build Developer Experience Teams for Open SourceBuild Developer Experience Teams for Open Source
Build Developer Experience Teams for Open Source
All Things Open
 
Deploying Models at Scale with Apache Beam
Deploying Models at Scale with Apache BeamDeploying Models at Scale with Apache Beam
Deploying Models at Scale with Apache Beam
All Things Open
 
Sudo – Giving access while staying in control
Sudo – Giving access while staying in controlSudo – Giving access while staying in control
Sudo – Giving access while staying in control
All Things Open
 
Fortifying the Future: Tackling Security Challenges in AI/ML Applications
Fortifying the Future: Tackling Security Challenges in AI/ML ApplicationsFortifying the Future: Tackling Security Challenges in AI/ML Applications
Fortifying the Future: Tackling Security Challenges in AI/ML Applications
All Things Open
 
Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...
Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...
Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...
All Things Open
 

Plus de All Things Open (20)

Building Reliability - The Realities of Observability
Building Reliability - The Realities of ObservabilityBuilding Reliability - The Realities of Observability
Building Reliability - The Realities of Observability
 
Modern Database Best Practices
Modern Database Best PracticesModern Database Best Practices
Modern Database Best Practices
 
Open Source and Public Policy
Open Source and Public PolicyOpen Source and Public Policy
Open Source and Public Policy
 
Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...
Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...
Weaving Microservices into a Unified GraphQL Schema with graph-quilt - Ashpak...
 
The State of Passwordless Auth on the Web - Phil Nash
The State of Passwordless Auth on the Web - Phil NashThe State of Passwordless Auth on the Web - Phil Nash
The State of Passwordless Auth on the Web - Phil Nash
 
Total ReDoS: The dangers of regex in JavaScript
Total ReDoS: The dangers of regex in JavaScriptTotal ReDoS: The dangers of regex in JavaScript
Total ReDoS: The dangers of regex in JavaScript
 
What Does Real World Mass Adoption of Decentralized Tech Look Like?
What Does Real World Mass Adoption of Decentralized Tech Look Like?What Does Real World Mass Adoption of Decentralized Tech Look Like?
What Does Real World Mass Adoption of Decentralized Tech Look Like?
 
How to Write & Deploy a Smart Contract
How to Write & Deploy a Smart ContractHow to Write & Deploy a Smart Contract
How to Write & Deploy a Smart Contract
 
Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow
 Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow
Spinning Your Drones with Cadence Workflows, Apache Kafka and TensorFlow
 
DEI Challenges and Success
DEI Challenges and SuccessDEI Challenges and Success
DEI Challenges and Success
 
Scaling Web Applications with Background
Scaling Web Applications with BackgroundScaling Web Applications with Background
Scaling Web Applications with Background
 
Supercharging tutorials with WebAssembly
Supercharging tutorials with WebAssemblySupercharging tutorials with WebAssembly
Supercharging tutorials with WebAssembly
 
Using SQL to Find Needles in Haystacks
Using SQL to Find Needles in HaystacksUsing SQL to Find Needles in Haystacks
Using SQL to Find Needles in Haystacks
 
Configuration Security as a Game of Pursuit Intercept
Configuration Security as a Game of Pursuit InterceptConfiguration Security as a Game of Pursuit Intercept
Configuration Security as a Game of Pursuit Intercept
 
Scaling an Open Source Sponsorship Program
Scaling an Open Source Sponsorship ProgramScaling an Open Source Sponsorship Program
Scaling an Open Source Sponsorship Program
 
Build Developer Experience Teams for Open Source
Build Developer Experience Teams for Open SourceBuild Developer Experience Teams for Open Source
Build Developer Experience Teams for Open Source
 
Deploying Models at Scale with Apache Beam
Deploying Models at Scale with Apache BeamDeploying Models at Scale with Apache Beam
Deploying Models at Scale with Apache Beam
 
Sudo – Giving access while staying in control
Sudo – Giving access while staying in controlSudo – Giving access while staying in control
Sudo – Giving access while staying in control
 
Fortifying the Future: Tackling Security Challenges in AI/ML Applications
Fortifying the Future: Tackling Security Challenges in AI/ML ApplicationsFortifying the Future: Tackling Security Challenges in AI/ML Applications
Fortifying the Future: Tackling Security Challenges in AI/ML Applications
 
Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...
Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...
Securing Cloud Resources Deployed with Control Planes on Kubernetes using Gov...
 

Dernier

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Jeffrey Haguewood
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 

Dernier (20)

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 

Modern Tools for Building Progressive Web Apps

  • 1. Modern Tools for Building Progressive Web Apps John M. Wargo https://johnwargo.com @johnwargo
  • 2. About Me • Software developer, writer, presenter, father, husband, and geek • Specializes in mobile development • Principal Program Manager @ Microsoft • App + Cloud Experiences team • Responsible for Visual Studio App Center Push and Azure Notification Hubs • Author of 7 (+1)* books • Former contributor to the Apache Cordova project • Live in Charlotte, NC • Previously @ AT&T, BlackBerry, BoxTone, Forrester Research, Hewlett Packard Enterprise (HPE), others
  • 4. Learning Progressive Web Apps • Available in early 2020 • https://learningpwa.com/
  • 5. Modern Tools for Building Progressive Web Apps
  • 6. Progressive Web Apps Google: Progressive Web Apps are user experiences that have the reach of the web, and are: • Reliable - Load instantly and never show the downasaur*, even in uncertain network conditions. • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. • Engaging - Feel like a natural app on the device, with an immersive user experience. Jeremy Keith: Progressive Web Apps consist of: • HTTPS • A service worker • A Web App Manifest * When using Google Chrome and your internet connectivity dies, you'll see a little Tyrannosaurus. This is called the 'downasaur' https://developers.google.com/web/progressive-web-apps https://adactio.com/journal/13098 With service workers and manifest files, PWAs: • Are installable • Are available (run while) offline • Can perform background sync operations
  • 10. index.html* *or loaded from an external file
  • 11. sw.js
  • 12. PWAs Now Automatic Through Many Common Frameworks
  • 13.
  • 14.
  • 16. Assessing the PWA-ness of a Web App with Lighthouse • Multiple entry points • Chrome extension • Developer Tools • Command-line https://developers.google.com/web/tools/lighthouse
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. PWA Automation (Part 1) PWABuilder
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28. PWA Automation (Part 2) Workbox
  • 29.
  • 30. Workbox • JavaScript library for adding offline operation to a web app • Locally cached resources • Two approaches: • Precache all app resources • Custom caching strategies • Command-line driven
  • 31. Workbox Caching Strategies • CacheFirst: Return the cached version of a resource, retrieving the resource from the network (and adding it to the cache) if it’s not already in the cache. • CacheOnly: Return the resource from the cache. If the resource is not in the cache, the fetch will fail. Note: Your service worker must populate the cache during service worker installation to enable this option. • NetworkFirst: Return the network version of the resource, retrieving the resource from the cache if the network is not available. The fetch fails when the network version is not available, and the resource is not in the cache. • NetworkOnly: Return the network version of the resource, failing if it’s not available. • StaleWhileRevalidate: Return the cached version of a resource, then update the cached version from the network so it’s there the next time the app requests the resource. This gets resources to an app quickly, but it may not always be the most recent version.
  • 32.