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

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

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
Practical Rails2 ihower@handlino.com about me (a.k.a ihower)

Practical Rails2 ihower@handlino.com about me (a.k.a ihower)

Practical Rails2 ihower@handlino.com about me (a.k.a ihower) http://ihower.idv.tw/blog/ http://handlino.com 2007/12/7 agenda RESTful Rails Bonus not include these: Testing Database &

1.96k views • 154 slides
SSTUT at NTCIR-4 Web task Yinghui Xu Kyoji Umemura Software System Lab. (Umemura Lab)

SSTUT at NTCIR-4 Web task Yinghui Xu Kyoji Umemura Software System Lab. (Umemura Lab)

SSTUT at NTCIR-4 Web task Yinghui Xu Kyoji Umemura Software System Lab. (Umemura Lab) Information and Computer Science Dept. Toyohashi University of Technology June 3, 2004 1 Web Searching Using term entropy on Virtual Document and

491 views • 24 slides
Use of the automated quality evaluation system for the comparison of health care web pages T.

Use of the automated quality evaluation system for the comparison of health care web pages T.

Use of the automated quality evaluation system for the comparison of health care web pages T. Adla, P. Kasal, M. Hladkov, A. Janda, J. Naidr, J. Feberov, P. Kub, R. Potkov Institute of Medical Informatics 2 nd Medical Faculty,

324 views • 18 slides
I Office (ISO) implemented significant changes requiring it, among other things, to add a third

I Office (ISO) implemented significant changes requiring it, among other things, to add a third

G Insurance Alert March 2002 New Developments in CGL Policy Wording By Adam S. Cantor, Esq. n December 2001, the Insurance Services operations, an insured may negotiate contracts I Office (ISO) implemented significant changes requiring it,

375 views • 5 slides
How to Secure your Based in Essex & London Founded Primary Image WordPress Website in

How to Secure your Based in Essex & London Founded Primary Image WordPress Website in

13/07/2014 2 About Me! WordCamp UK 2014 Web design for 15 years How to Secure your Based in Essex & London Founded Primary Image WordPress Website in 2010 Mainly work with small/medium sized Mike Pead businesses

476 views • 19 slides
Developer Portals Kristof Van Tomme @kvantomme co-Founder/CEO kristof@pronovix.com Ghent area,

Developer Portals Kristof Van Tomme @kvantomme co-Founder/CEO kristof@pronovix.com Ghent area,

Developer Portals Kristof Van Tomme @kvantomme co-Founder/CEO kristof@pronovix.com Ghent area, Belgium Introduction Single sourcing, DITA and open source A Walkthrough microservice written in Go The Dev Portal Opportunity Content Marketing

647 views • 50 slides
Ark: A Kernel For Multi-Paradigm Modeling MSDL Summer Presentation 2009 Xiaoxi Dong, MSDL,

Ark: A Kernel For Multi-Paradigm Modeling MSDL Summer Presentation 2009 Xiaoxi Dong, MSDL,

Ark: A Kernel For Multi-Paradigm Modeling MSDL Summer Presentation 2009 Xiaoxi Dong, MSDL, McGill University Content Intention of A kernel for multi-paradigm modeling Ark Overview: hierarchical modeling environment Ark breakdown:

540 views • 27 slides
rr r trss

rr r trss

rr r trss sPst r r str tr

693 views • 29 slides

More recommend