Progressive Web Apps the return of the web? Chris Heilmann @codepo8, - PowerPoint PPT Presentation

Progressive Web Apps – the return of the web? Chris Heilmann @codepo8, Goto Berlin, November 2016

Chris Heilmann @codepo8

😄 There is a very cool thing happening right now…

🔦 🗒 The honeymoon period 💿 of native apps is over.

🔦 🗒 💿

🔦 🗒 💿

🔦 🗒 💿

🌎 However, there is still the problem of a changing world.

Evolution is happening around us… 🖦 → 💼 → 📲 …and user numbers are shifting.

💕 The web wasn’t ready for the mobile form factor.

🌨 Mobile was a throwback to the 😡 web of old 🌨 Small screens, bad connectivity, unreliable browser support 🌨 Constantly changing conditions 🌨 Hardwired browser and hardware with unpredictable upgrades

⚠ We weren’t ready to go all out on web with mobile.

🌨 Instead of creating web sites that work well on mobile, we packaged 💿 them up and submitted them to market places. 🌨 In a 1:1 comparison with native apps, they looked rubbish. 🍏 This may or may not have been by design

These days, we’re looking much better… https://remysharp.com/2016/05/28/state-of-the-gap

🔨 The big breakthrough: Service Worker https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

🦅 Progressive Web Apps

“Websites that have taken all the right vitamins” – Alex Russel? https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

🔨 Work offline using Service Worker 🔨 Can hibernate and notify on 🦅 change 🔨 Possible progressive enhancement of a working, standard web site 🔨 More functionality with subsequent visits 🔨 The link is the distribution model

🔨 All the benefits of native apps - 🦅 none of the sluggish distribution issues 🔨 Natural evolution of web content into the mobile form factor 🔨 A big opportunity to crack the closed distribution model

💸

Computers and smartphones are 😎 powerful. Browsers can do a lot and are open to 🦅 feedback. JavaScript is flexible and has evolved. CSS has become amazing. 🎊 Developer tools in browsers give us great debugging and even design capabilities

💪 And yet, the mobile web is in a very sorry state.

But, but but, everybody 🤕 says the mobile web doesn’t exist! It’s just the web and we make it responsive…

🔭 Alright, let’s look at the problem…

JavaScript (Behavio u r) This used to be CSS much easier… (Look and Feel) HTML (Structure)

💨 Flexibility and forgiveness… HTML and CSS are fault tolerant…

🦃 Knives, bees and footguns… JavaScript is not fault tolerant

This is why we keep banging on about progressive enhancement

Using this, we can support the past…

And we can support current edge cases…

And after some checking, all the current browsers and what they support…

😑 With HTML and CSS you’re relying on the user agent to do the right thing…

The HTML5 revolution promised a move from documents to apps…

The problem is that eight years after the proposal 😧 and five years after HTML5’s “last call”, there are still many basic support issues…

Monica Dinculescu < INPUT > HTML Special, CSS Day https://vimeo.com/176453149

https://www.filamentgroup.com/lab/type-number.html

💁 And the bad people of the internet don’t stop abusing old technology either…

In UGC, we can’t have nice things… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf

Keep users on this page… 🔔💪 https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf

Fix for newer browsers… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf

Fix for all browsers… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf

Almost… “ Listen for the click event and prevent the default browser behavior of opening a new tab. Inject a hidden iframe that opens the new tab, then immediately remove the iframe. https://github.com/danielstjules/blankshield

JavaScript isn’t evil.

✅ Using JavaScript, you have a means to test if what you’re trying to do succeeded…

Supporting the past balancing act… Don’t block out Use powerful older browsers and language environments… additions…

Progressive enhancement balancing act Rely on the browser Control the UX with to give a “working” JavaScript and own experience. the failure cases.

I don’t have all the answers 😴 for you. A lot of this depends on your project, goals and resources.

!

💤 🔩 JavaScript can’t be Everybody has trusted and can be JavaScript, and we can turned off. do everything with it!

⬇ The “JavaScript not available” argument is largely bogus and is holding back the web! 🎥

The “JavaScript is flaky and 🚨 will break” argument is very much alive and will always be that way…

 Until the first successful load, you have no JavaScript functionality. That is a fact.

However, subsequently, you 😋 can do a lot with JavaScript that is needed on mobile and can’t be done in HTML/ CSS.

⚠ New error cases become much more important than “JavaScript is not available”

✏ Small initial payload ✏ Form factor supporting content ❤📳 ✏ Form factor supporting interfaces ✏ Offline/Flaky connection support ✏ T aking advantage of the power of the end user device ✏ Avoiding interaction latency

The beauty of HTML, CSS and JS… 📧 😎 All is contained in one package 😎 Everything is running on the end users environments 😎 You wouldn’t even need ServiceWorker to make things work offline - inlining everything or using local storage would be enough

Our solutions should have 👍 excellent error handling instead of automatic tolerance.

♿ What about accessibility, eh?

Used sensibly, JavaScript is an 🕺 accessibility boost. Sometimes the only way to make things accessible. ARIA is not magic.

https://codepo8.github.io/gridnav/

🔌 It is time we took ownership and responsibility of the whole technology stack.

😑 There is a culture of “let’s use whatever if it works”

We have a lot of messy solutions, and we keep building more tools to undo what clogs up the web.

Best practices can help with that, but only when they apply to the people who build things and when they solve current issues and needs…

Using <a href="javascript:void(0)"> 💪 instead of a URL or using a button is not JavaScript’s fault. It is a bad idea and practice - probably copy & paste.

🔏 Instead of bashing bad use of JavaScript, let’s embrace and scrutinise new ideas.

🔨 Any web product can become a Progressive Web App, not all have 🆚 to be. 🔨 You’ll reap the rewards of simple maintenance and upgrade paths and the form factor mobile users expect. 🔨 However, it makes sense to clean up before going there…

🔨 Look at what you built, check the current state of affairs at http:// caniuse.com and remove all the 🛡 cruft you don’t need. 🔨 Simplify your interfaces, the next users are impatient and on flaky connections. 🔨 Reconsider the ways you build and deploy your products, a lot can be automated.

✅ Create and publish as much content independent of JavaScript as you can It is time to re- ✅ JavaScript can make things much more think our best enjoyable and some things are just not worth while to implement without. practice for the ✅ Benefit from the user’s hardware Spend more time building great ✅ web approach… interfaces, less time relying on what is there and can’t break - in many cases it is disappointing.

You don’t rely on automatic fixes. 🙃 JavaScript breaks and it is painful. It allows us to analyse what went wrong. Benefits of an “It’s 🙃 T ooling is much better and we get much more insights into what happened than OK to rely on JS with, for example, CSS 🙃 We take responsibility of the interface. It for this” is our job to make it happen - not browser makers to agree and find a approach… consensus 🙃 We have full control over what gets loaded when, cached where and rendered when.