progressive web app introduction
play

PROGRESSIVE WEB APP (INTRODUCTION) Lai Weng Han (Johnson) - PowerPoint PPT Presentation

Aug 12, 2023 •115 likes •609 views

PROGRESSIVE WEB APP (INTRODUCTION) Lai Weng Han (Johnson) https://pwa-web.wenghan.me https://pwa-web.wenghan.me https://pwa-web.wenghan.me https://pwa-web.wenghan.me UTIL https://whatsapp.surge.sh https://pwa-web.wenghan.me OPEN DOTA

  1. PROGRESSIVE WEB APP (INTRODUCTION) Lai Weng Han (Johnson) https://pwa-web.wenghan.me

  2. https://pwa-web.wenghan.me

  3. https://pwa-web.wenghan.me

  4. https://pwa-web.wenghan.me

  5. UTIL https://whatsapp.surge.sh https://pwa-web.wenghan.me

  6. OPEN DOTA https://opendota.com https://pwa-web.wenghan.me

  7. https://www.wenghan.me https://pwa-web.wenghan.me

  8. WHAT IS PROGRESSIVE WEB APP? https://pwa-web.wenghan.me

  9. “a term used to denote web applications that use the latest web technologies. ” –Wikipedia https://pwa-web.wenghan.me

  10. “a web app that uses modern web capabilities to deliver an app-like experience to users.” –Ionic Framework https://pwa-web.wenghan.me

  11. “a couple of modern web features that you can add to any existing web app, to further enhance UX.” –My Definition https://pwa-web.wenghan.me

  12. PROGRESSIVE WEB APP Safe Progressive Discoverable Responsive Re-Engageable Work Offline Durable App-Like Linkable Fresh https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

  13. https://pwa-web.wenghan.me

  14. Service Worker (Caching) https://pwa-web.wenghan.me

  15. SERVICE WORKER https://pwa-web.wenghan.me

  16. INSTALLING • Mainly to do Caching related • Static Caching https://pwa-web.wenghan.me

  17. ACTIVATING • After Installing • Delete Old Cache https://pwa-web.wenghan.me

  18. FETCH EVENT Fetch is replacement of AJAX Fetching Data in JSON / Images / Fonts / CSS https://pwa-web.wenghan.me

  19. Caching Strategy THE OFFLINE COOKBOOK https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ https://pwa-web.wenghan.me

  20. On install - as a dependency - CSS, Images, fonts, JS Templates ACTIVATION EVENT INSTALL EVENT Cache Service Worker https://pwa-web.wenghan.me

  21. On install - not as a dependency ACTIVATION EVENT INSTALL EVENT Cache Service Worker https://pwa-web.wenghan.me

  22. On Activate - as a dependency - CSS, Images, fonts, JS Templates ACTIVATION EVENT INSTALL EVENT Cache Old Cache v1.1 v1.0 Service Worker https://pwa-web.wenghan.me

  23. On User Interaction CLICK EVENT Cache https://pwa-web.wenghan.me

  24. MY STRATEGY Old Cache ACTIVATION EVENT INSTALL EVENT FETCH EVENT Static Caching Image / Video Dynamic Caching Fonts Cache Cache v1.0 and Framework Fetch for Dynamic Data (JSON) v1.1 v1.1 Service Worker https://pwa-web.wenghan.me

  25. DEMO Caching https://pwa-web.wenghan.me https://pwa-web.wenghan.me

  26. BACKGROUND SYNC https://pwa-web.wenghan.me

  27. https://pwa-web.wenghan.me

  28. S https://pwa-web.wenghan.me

  29. ADD TO HOMESCREEN https://pwa-web.wenghan.me

  30. https://pwa-web.wenghan.me

  31. REQUIREMENT Service Worker Registered Serve over HTTPS manifest.json Minimum Benchmark https://pwa-web.wenghan.me

  32. manifest.json MANIFEST Meta Tag for Website Declare how the app look like as icon Orientation. Start url and more! https://pwa-web.wenghan.me

  33. index.html or any html https://pwa-web.wenghan.me

  34. Minimum Benchmark “based on time and number of visits” https://developers.google.com/web/fundamentals/app-install-banners/ https://pwa-web.wenghan.me

  35. https://pwa-web.wenghan.me JUST IN CASE https://barcamp.surge.sh https://barcamp1.surge.sh https://barcamp2.surge.sh https://barcamp3.surge.sh https://pwa-web.wenghan.me

  36. DEMO ADD TO HOMESCREEN https://pwa-web.wenghan.me

  37. https://pwa-web.wenghan.me

  38. https://pwa-web.wenghan.me

  39. Push notification https://pwa-web.wenghan.me

  40. User have to accept to make Push Notification works. https://pwa-web.wenghan.me

  41. SEND TO BACKEND VAPID KEY https://pwa-web.wenghan.me

  42. Push notification https://pwa-web.wenghan.me

  43. https://pwa-web.wenghan.me

  44. DEMO PUSH NOTIFICATION https://barcamp.surge.sh https://pwa-web.wenghan.me

  45. DEMO OTHER COOL STUFF https://barcamp.surge.sh https://pwa-web.wenghan.me

  46. PAYMENT REQUEST API https://developers.google.com/web/fundamentals/payments/ https://pwa-web.wenghan.me

  47. https://www.pwastats.com https://pwa-web.wenghan.me

  48. https://pwa-web.wenghan.me

Recommend

Progressive Energy Governance Welcome Introduction to IGov Progressive Energy Governance

Progressive Energy Governance Welcome Introduction to IGov Progressive Energy Governance

Progressive Energy Governance Welcome Introduction to IGov Progressive Energy Governance conference Catherine Mitchell Conference on Progressive Energy Governance 21 May 2014, London Overview Introduction to IGov Introduction to the

326 views • 18 slides
An Introduction to Progressive Delivery James Governor @monkchips co-founder what even is Istio

An Introduction to Progressive Delivery James Governor @monkchips co-founder what even is Istio

An Introduction to Progressive Delivery James Governor @monkchips co-founder what even is Istio for? What is Progressive Delivery? Technology underpinnings Early adopters @monkchips DevOps CI/CD Progressive Delivery"

842 views • 56 slides
Mobile Cross-Platform Development from a Progressive Perspective Web App Progressive Web App N

Mobile Cross-Platform Development from a Progressive Perspective Web App Progressive Web App N

Mobile Cross-Platform Development from a Progressive Perspective Web App Progressive Web App N N NativeScript Progressive App NativeScript App Progressive Web Apps What makes the difference? Progressive Web Apps bring features

785 views • 59 slides
Meet the Progressive Web App Module See Also Session recording Understanding Progressive Web

Meet the Progressive Web App Module See Also Session recording Understanding Progressive Web

Christoph Weber - Director of Technical Services Alex Borsody - Developer Meet the Progressive Web App Module See Also Session recording Understanding Progressive Web Apps and Why You Should Care By Mark Shropshire Friday, 4:00pm - 4:50pm

895 views • 24 slides
EXTERNAL VEST CARRIERS the Advantages of the Progressive Uniform INTRODUCTION Throughout the

EXTERNAL VEST CARRIERS the Advantages of the Progressive Uniform INTRODUCTION Throughout the

EXTERNAL VEST CARRIERS the Advantages of the Progressive Uniform INTRODUCTION Throughout the country traditional Police uniforms have included a heavy duty belt that contains the equipment Officers need to perform out their daily tasks. This

578 views • 12 slides
The progressive kiln process. Simulation, quality, energy and drying cost considerations

The progressive kiln process. Simulation, quality, energy and drying cost considerations

The progressive kiln process. Simulation, quality, energy and drying cost considerations Jarl-Gunnar Salin SP Technical Research Institute of Sweden Wood Technology Stockholm, Sweden Introduction Progressive kilns for sawn timber have a

368 views • 10 slides
Adaptive Progressive Web Apps PWA Progressive Web Apps are just great websites that can behave

Adaptive Progressive Web Apps PWA Progressive Web Apps are just great websites that can behave

Adaptive Progressive Web Apps PWA Progressive Web Apps are just great websites that can behave like native apps Progressive Web Apps are just great apps, powered by Web technologies and delivered with Web infrastructure.

454 views • 32 slides
PROGRESSIVE DELIVERY PROGRESSIVE DELIVERY CONTINUOUS DELIVERY THE RIGHT WAY CONTINUOUS DELIVERY

PROGRESSIVE DELIVERY PROGRESSIVE DELIVERY CONTINUOUS DELIVERY THE RIGHT WAY CONTINUOUS DELIVERY

PROGRESSIVE DELIVERY PROGRESSIVE DELIVERY CONTINUOUS DELIVERY THE RIGHT WAY CONTINUOUS DELIVERY THE RIGHT WAY Carlos Sanchez / csanchez.org @csanchez / PROGRESSIVE PROGRESSIVE DELIVERY DELIVERY Progressive Delivery is a term that

561 views • 41 slides
Progressive Neural Architecture Search Chenxi Liu , Barret Zoph, Maxim Neumann, Jonathon Shlens,

Progressive Neural Architecture Search Chenxi Liu , Barret Zoph, Maxim Neumann, Jonathon Shlens,

Progressive Neural Architecture Search Chenxi Liu , Barret Zoph, Maxim Neumann, Jonathon Shlens, Wei Hua, Li-Jia Li, Li Fei-Fei, Alan Yuille, Jonathan Huang, Kevin Murphy 09/10/2018 @ECCV 1 Outline Introduction and Architecture Progressive

562 views • 55 slides
Progressive Web Apps Mike Hartington, GDE & Developer Advocate at Ionic Roger Tipping, VP of

Progressive Web Apps Mike Hartington, GDE & Developer Advocate at Ionic Roger Tipping, VP of

Progressive Web Apps Mike Hartington, GDE & Developer Advocate at Ionic Roger Tipping, VP of Client Success at BrieBug What is a Progressive Web App? Progressive Web Apps are an evolution of regular web pages that combine features offered by

557 views • 7 slides
Introduction to Progressive Hedging Applied to Mixed-Integer and Non-Linear Stochastic Programs

Introduction to Progressive Hedging Applied to Mixed-Integer and Non-Linear Stochastic Programs

Introduction to Progressive Hedging Applied to Mixed-Integer and Non-Linear Stochastic Programs David L. Woodruff Graduate School of Management UC Davis Davis CA USA 95616 DLWoodruff@UCDavis.edu Outline PH Tricks of the trade PySP

550 views • 20 slides
Erkki Tuomioja MP, PhD The Future of Progressive Culture and Politics Sorsa stin

Erkki Tuomioja MP, PhD The Future of Progressive Culture and Politics Sorsa stin

Erkki Tuomioja MP, PhD The Future of Progressive Culture and Politics Sorsa stin politiikkapivt 5.11. 2010 Helsinki What relationship do progressive culture and progressive politics have with each other? A hundred years ago the answer

355 views • 4 slides
INTRODUCTION NOVA TINY The worlds smallest progressive with fitting height of 13mm! With Nova

INTRODUCTION NOVA TINY The worlds smallest progressive with fitting height of 13mm! With Nova

INTRODUCTION NOVA TINY The worlds smallest progressive with fitting height of 13mm! With Nova Tiny, distance vision is extra wide, with an angle of 140 degrees, for a truly panoramic view. Near vision requires only a small reduction in the

700 views • 11 slides
Ajax Bulletproof progressive enhancement behaviour JavaScript presentation CSS structure

Ajax Bulletproof progressive enhancement behaviour JavaScript presentation CSS structure

Bulletproof Ajax Bulletproof progressive enhancement behaviour JavaScript presentation CSS structure HTML content <p> This is the introduction </p> <p style="font-weight:bold"> This is the introduction

635 views • 36 slides
specifically photographs, are important in progressive communications campaigns and why it s

specifically photographs, are important in progressive communications campaigns and why it s

Why strong imagery, and specifically photographs, are important in progressive communications campaigns and why it s important to tell a story in an image. Photography in Progressive Communications Work Goals: Discuss the importance

577 views • 44 slides
PROGRESSIVE ENGLISH II STAGE 4 What are you going to do this weekend? LESSONS 1-6 Go Strong

PROGRESSIVE ENGLISH II STAGE 4 What are you going to do this weekend? LESSONS 1-6 Go Strong

PROGRESSIVE ENGLISH II STAGE 4 What are you going to do this weekend? LESSONS 1-6 Go Strong 2 - Book pages 148 -193 Lesson 1. Who is arriving soon? In this Lesson you will learn to use the Present Progressive to talk about future

1.06k views • 60 slides
Malaysian Healthy Ageing Society The progressive depressing & frightening picture in the dark

Malaysian Healthy Ageing Society The progressive depressing & frightening picture in the dark

Organised by: Co-Sponsored: Malaysian Healthy Ageing Society The progressive depressing & frightening picture in the dark hole of the elderly: The physical limitation of joint pain & stiffness. The progressive loss of hearing,

489 views • 25 slides
Analysis of Competing Risks in the Pareto Model for Progressive Censoring with binomial removals

Analysis of Competing Risks in the Pareto Model for Progressive Censoring with binomial removals

Introduction The Models Assumptions Likelihood function Bootstrap confidence intervals Bayesian Analysis Numerical example Analysis of Competing Risks in the Pareto Model for Progressive Censoring with binomial removals Reza Hashemi and

763 views • 55 slides
Digital Progressive Lenses The ideal solution for Presbyopia The ideal solution for Presbyopia

Digital Progressive Lenses The ideal solution for Presbyopia The ideal solution for Presbyopia

Digital Progressive Lenses The ideal solution for Presbyopia The ideal solution for Presbyopia Progressive Lenses Parameters Width of far zone Width of progressive zone Corridor Length Maximum distortion Width of reading zone Eye path Far

686 views • 55 slides
Progressive Stacking in Chat We invite BIPOC (Black, Indigenous, People of Color) to add an

Progressive Stacking in Chat We invite BIPOC (Black, Indigenous, People of Color) to add an

Progressive Stacking in Chat We invite BIPOC (Black, Indigenous, People of Color) to add an *asterisk before your question or comment in chat . Progressive stacking is a technique intended to give marginalized voices a greater chance to

703 views • 29 slides
Public Meeting 3 Sasaki Progressive AE Friends of Grand Rapids Parks Heller & Heller ETC

Public Meeting 3 Sasaki Progressive AE Friends of Grand Rapids Parks Heller & Heller ETC

Public Meeting 3 Sasaki Progressive AE Friends of Grand Rapids Parks Heller & Heller ETC Institute Introduction TODAYS AGENDA I. Master Plan Process IV. A Vision for the Future of GR Parks Enrich Programming II. Citywide

868 views • 62 slides
The two questions I have been asked to reflect on are: The DRC has one of the most progressive

The two questions I have been asked to reflect on are: The DRC has one of the most progressive

The two questions I have been asked to reflect on are: The DRC has one of the most progressive legislation on community forestry in the Congo Basin. How challenging has it been to implement? How are local communities benefiting so far?

369 views • 3 slides
Advocating for CA Prisoners Marvin Mutch Progressive Lawyering Day October 8, 2016

Advocating for CA Prisoners Marvin Mutch Progressive Lawyering Day October 8, 2016

Advocating for CA Prisoners Marvin Mutch Progressive Lawyering Day October 8, 2016 Introduction The Title 15 Explained Who is held to the Title 15? Does the Title 15 apply to solitary confinement? Title 15 and prisoner

277 views • 11 slides
Progressive Examples R.B. Lenin (rblenin@daiict.ac.in) Autumn 2007 R.B. Lenin

Progressive Examples R.B. Lenin (rblenin@daiict.ac.in) Autumn 2007 R.B. Lenin

Progressive Examples R.B. Lenin (rblenin@daiict.ac.in) Autumn 2007 R.B. Lenin (rblenin@daiict.ac.in) () Progressive Examples Autumn 2007 1 / 48 Outline Time Advance Mechanism 1 Concepts in Discrete Event Simulation 2 Basic Approaches

114 views • 7 slides

More recommend