Introduction to Progressive Web Applications
•Als PPTX, PDF herunterladen•
0 gefällt mir•256 views
A quick primer on basic Progressive Web Application concepts
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Introduction to Progressive Web Applications
Ähnlich wie Introduction to Progressive Web Applications (20)
Mehr von Chris Love
Mehr von Chris Love (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Introduction to Progressive Web Applications
- 1. Progressive Web Apps Engaging Customers Through the Web Chris Love
- 5. resources Slide URL SlideShare – https://slideshare.com/docluv Source Code – https://github.com/docluv Progressive Web Apps – https://love2dev.com/pwa/
- 6. PWACourse.com Over 21 Hours of Video + Resources $29
- 7. • 3 Example PWAs • What a PWA is • How to Quickly Upgrade • Service Worker Life Cycle • Basic Service Worker Caching • Advanced Service Worker Caching • Web Performance Best Practices • Tools to Help Create a PWA • https://amzn.to/2A0DLU1
- 8. PWA Starter Creates Core PWA Assets • Web Manifest • Complete Icon Set • Add to Homescreen • Starter Service Worker • Resources
- 9. WHAT IS A PWA?
- 10. Alex Russel Chrome “These apps aren’t packaged & deployed through stores, they’re just websites that took the right vitamins. They progressively become apps…”
- 11. WHAT IS A PWA? • A Web Site • Utilizes Modern Web Features • Delivers a Great, User- Centric Experience
- 12. A Native App A Single Page App WHAT IS A PWA IS NOT They Can Be, But Why?????
- 13. Secure – Uses HTTPS Valid Web Manifest File Registers a Service Worker with a fetch Event Handler MINIMUM PWA REQUIREMENTS
- 14. 300 x 100 px A PWA SHOULD Be Mobile-First Provide Offline Experience Load Fast * Engage User* * Subjective, we can talk about this
- 15. Device Feature Access Discoverable Cheaper to Develop Cheaper to Distribute Cheaper to Market Common Standards 100s Used Each Month App Store Distribution 3rd Party Censorship Frustrating to Install Few are Used Expensive to Develop Fragmentation Expensive to Market 300 x 50 px PWA VS NATIVE
- 16. ADD TO HOMESCREEN Allow Users to ‘install’ PWA Mobile Homescreen icon Desktop Start Menu, Desktop Icon Signal Visitor Wants to Re-engage With Brand Great for Business Apps Non-Standard Experience
- 17. JEREMY KEITH I worry that the messaging around “progressive web apps” is perhaps over- fetishising the home screen. I don’t think that’s the real battleground. The real battleground is in people’s heads; how they perceive the web and how they perceive native. https://adactio.com/journal/12015
- 18. WEB MANIFEST Creating a manifest and linking it to your page are straightforward processes JSON Document Control what the user sees when launching from the home screen Describes Your App Progressive Enhancement. Ignored by legacy browsers and only downloaded when needed. Reference in HEAD
- 19. WHAT THE WEB CAN DO
- 20. SERVICE WORKERS Work on Background Thread Must Be Registered Offline Native Push* Background Sync*
- 21. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration was successful }) .catch(function(err) { // registration failed :( }); }
- 22. self.addEventListener('install', function (e) { //do something });
- 23. self.addEventListener('install', function (e) { e.waitUntil( caches.open(cacheName).then(function (cache) { return cache.addAll(filesToCache) .catch(function (error) { console.log(error); }); }) ); });
- 24. self.addEventListener('activate', function (event) { console.log('Service Worker activating.'); });
- 25. self.addEventListener('activate', function (event) { console.log('Service Worker activating.'); });
- 26. LIFE CYCLE * This is why PWA Technically Does Not Add SEO Value
- 27. DOM RESOURCE FETCHING In-memory Resource Cache Resource Fetcher Net Stack Ne t Disk Cache Service Worker SW Added and Removed Here!
- 29. self.addEventListener('fetch', function (event) { //intercept fetch request (any request from the UI thread for a file or API) and return from cache or get from server & cache it event.respondWith( caches.match(event.request).then(function (resp) { return resp || fetchAsset(event); }) ); });
- 30. HANDLE OFFLINE
- 33. SERVICE WORKER STRATEGIES • Handle On-Demand • Pre-Render & Cache • Define Invalidation Rules • Time to Live • Max # of Items
Hinweis der Redaktion
- Note: To Change the Background Picture Follow the steps below Mouse Right button click>Format Background>Select Picture or Texture File>Click “File” button>Browse and select the image from your computer>Click Insert That’s it. You are Done !!!
- Note: To Change the Background Picture Follow the steps below Mouse Right button click>Format Background>Select Picture or Texture File>Click “File” button>Browse and select the image from your computer>Click Insert That’s it. You are Done !!!
- Note: To Change the Background Picture Follow the steps below Mouse Right button click>Format Background>Select Picture or Texture File>Click “File” button>Browse and select the image from your computer>Click Insert That’s it. You are Done !!!