Miracle Inameti-Archibong - Are Progressive Web Apps The Future Of The Web?
•Télécharger en tant que PPTX, PDF•
1 j'aime•1,042 vues
Miracle, head of SEO at Erudite discusses the flaws of native apps and how progressive web apps will overcome these issues to improve performance and usability.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (17)
Similaire à Miracle Inameti-Archibong - Are Progressive Web Apps The Future Of The Web?
Similaire à Miracle Inameti-Archibong - Are Progressive Web Apps The Future Of The Web? (20)
Plus de Noisy Little Monkey
Plus de Noisy Little Monkey (20)
Dernier
Dernier (20)
Miracle Inameti-Archibong - Are Progressive Web Apps The Future Of The Web?
- 1. Are PWA’s the future of the Web? 01
- 2. Progressive Web Apps are cross browser & platform applications that provide fast, reliable & engaging web app experiences, regardless of the network state
- 3. App-like Experience Without the excess of local device storage Add to home screen Push notifications Offline content Modern APIs
- 4. 0 10 20 30 40 50 60 Android iOS PWA 9.6MB 56MB 150KB home feed load! Source AddyOsmani – A Pinterest ProgressiveWeb App Performance Case Study
- 5. Why should you care? 02
- 6. Cached Assets Reduce Server Load & Less Data Requirements Chris Love– PWA benefits
- 7. BBC lost an additional 10% of users for every additional second their site took to load.
- 8. PWAs must have a sub 10 second TTFI (on simulated 3G/first visit) Source: PWA
- 10. 01 0201 02 03 04 No Store, No commission Cheaper to develop, deploy & maintain Discoverable via web optimisation Instant Application Update Deployments
- 11. A majority of users (51%) still don’t download any apps in a month. 60% of apps in the Google Play app store have never been downloaded. Comscore:The 2017 U.S. Mobile App Report AdWords for App Promotion
- 12. Instead of outsourcing your success to Apple, Google or Microsoft a PWA puts you in charge of your ability to reach your audience, reengage them and improve your business processes. Chris Love: How Progressive Web Apps BenefitYour Ability to ImproveYour Business
- 13. Instantly Loads: Loads all cached content instantly Offline Loading: Site is accessible in areas with low or no connectivity Add to home screen: Access like a nativeAPP Benefits Desktop Support: Desktop PWAs are now supported on all desktop platforms (Chrome 73)
- 15. Source Mobify: 2017 Q1 Mobile Commerce Insights Report Push notifications
- 16. H/2 reduce latency minimise protocol overhead request prioritisation HTML5 SECURE/MOBILE DEVICE local storage motion/ native-likereact
- 17. LighterFrameworks Lower parse and compile times. See HNPWA for list of live examples frameworks/librarie s. Addy Osmani : Google I/O 17 Angular5 React VueJS
- 20. All about the user experience “web apps are optimised to help users accomplish tasks quickly” Source KarlyCyr: Everything you need to know about PWA’s for ecommerce
- 23. 01 02 03 HTTPS: is the site served over HTTPS? HTTP2: Multiplexing Service Worker: does the site register a ServiceWorker?
- 24. 04 05 06 Speed: <10,000TTFI/CI Add to Home Screen: user prompt ‘‘Add to Home Screen’’? Responsive design
- 27. Clear cache to ensure clean data
- 28. Run in incognito mode to get clean data
- 37. Speed + Performance Optimisation = Improved Time to Task Completion
- 38. 01 02 03 04 Each page has its own URL Use of canonical tags Use of schema.org and social meta data Content is shareable Just Good Housekeeping
- 39. 01 02 03 04 Seamless page transmission: History API Content doesn’t jump when page loads Smooth scroll App install prompts are not excessive UX Requirements
- 40. EruditeWordPressPWA Implementing specific fixes - https://github.com/o10n-x/
- 42. Progressive web AMP’s Making an even better first impression AMP: Start Fast PWA: Stay Fast Quote byAlex Russell
- 44. Developers don’t want to build 3 separate apps for the major platforms. Companies don’t want to pay for development of 3 apps. The answer to all this is the web. We can build rich web apps— Progressive Web Apps—and package them for all the app stores.” J U D A H G A B R I E L H I M A N G O
- 45. 3.8x Faster Load time 31% Increase in CR part of ASDA Walmart Source:Google developers - case study
- 48. Cut load times from 11.91 secs to 4.96 90% Smaller than its Android App Source: PWA Stat
- 49. View my full slides here https://bit.ly/2U80cSX
- 50. ERUDITE Ready to talk to us? miracle.inameti@erudite.agency M I R A C L E I N A M E T I - A R C H I B O N G +44 (0) 1256 384890 https://erudite.agency @mira_inam
Notes de l'éditeur
- As you would have guessed this is a talk about progressive web APPs
- PWA’s act like any single page application (SPA). However, they are built with progressive enhancement as its core principle which means it works for every user, regardless of browser choice.
- Talk about international strategy in developing nations. The explosive growth of mobile phones in developing countries has led to increasing attention towards the mobile web. Due to the low penetration of fixed telephone lines and Internet access
- As you build a relationship with the APP its loads quicker because of browser caching only loads new content on demand Refreshes at the background It keeps JavaScript bundles lean Body content is automatically loaded with JS. However, the overall payloads are lower than downloading a native App Plus when the visitor returns your cached assets avoid network latencies, improving your overall time to first byte, thus making your pages load faster. The key here, is the fastest network request is the one never made.
- 7
- 9
- PWA’s are fully-indexable no need for any work arounds (Mobile deeplinks do not follow a consistent format. This causes confusion because different set of links are required to access the same app on different operating systems. PWAs offer true cross compatibility Because they are progressive they work on any device or browser no need for multiple development solutions Ask – with the exception of the Brighton SEO APP, How many people have downloaded an APP in the last month Cost effective no multi-platform overhead.
- Consumers spend 60% of their total mobile time in only 3 apps, most of which are owned by Facebook and Google. https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9
- Instantly loads – because of the service workers (man in the middle) Client side JavaScript + server side JavaScript =Service worker Offline loading – similar to whatapp, Instagram Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store or download ant loading
- Higher open/view rate than email. Because the entire message is on the screen. But you have to be careful not to abuse it especially it its browser enable cause once it turned off its difficult to figure out how to turn it back on
- Tom Antony gave a great talk on HTTP earlier in year . HTTP/2 now allows browsers to open 6-8 connections to a specific server (any more than 8 connections will cause diminishing returns). With up to 8 connections being made, requests are able to be fulfilled quicker and page load speeds decrease. HTTP2 multiplexing HTML 5 Developed with the consideration of running on low powered device No multiple over head cause its not tired to any operating system – cost effective multi-platform development Supports local storage through the offline application cache
- It takes 4x more time to parse and load JS on mobile than desktop. Because body content is loaded with JS you need to ensure you are loading your site with the lightest possible JS frame works. If your JavaScript framework is bloated you would have less space for your application code These are lightweight options for parsing and compiling JavaScript. Your site might need a code re-write to improve its speed and make it PWA ready
- From the beginning to time check out has looked like this Check out id 4x faster No need to make changes to the current payment gateway Built directly into the browser Already trusted by users Speed – accuracy – security Fast because its one Api call
- You can now submit it to the app store
- As you can see its not a product but a set of features designed to provide the ultimate user experience
- 21
- HTTPs because storage API’s that help store content online are only available via a secure origin (to avoid interception) Service worker - for background sync, runs push notification
- Lighthouse runs locally, auditing a page using a local version of the Chrome browser installed the machine. Report results are never processed or beaconed to a remote server.
- 26
- 31
- 32
- 33
- 35
- Last year one of out R and D projects was researching into PWAs and as part of this we made our own site a PWA. Meaning Android users (and soon iPhone) will be able to add our site to your homescreen just like an app. It also works offline and allows for push notifications – for useful stuff.
- 38
- 39
- Lets encrypt SSL certificate for free
- 45
- 48
- 49
- 50