The three Rs of web performance
- Reduce
- Reuse
- Restructure
The slides from Matthew’s talk on the performance overhauls he did on FixMyStreet.com and TrainTimes.org.uk.
Tags: serviceworkers
78
Service Workers | Build Progressive
This is a really nice explanation of adding a service worker to your site to make it more resilient. This tutorial is part of an ongoing series that I’m really looking forward to reading more of.
Going Offline | CSS-Tricks
Now that the latest versions of iOS and macOS Safari support service workers, I can’t think of a better time to learn about how progressive web apps work under the hood.
Thanks, Robin! (the cheque is in the post)
Going Offline | Aaron Gustafson
Aaron was kind enough to write the foreword to my new book Going Offline. Here it is in full.
In Going Offline, Jeremy Keith breaks down heady concepts into approachable prose and easy-to-follow code examples. He also points out service worker gotchas and shows you how to deftly avoid them. Invest a scant few hours with this book, and you’ll gain a solid understanding of how to put this new technology to work for you right away. No, really—within fifteen to twenty minutes of putting it down.
Why Suffolk Libraries chose to build their own self-service app.
It’s so great to see the initial UX work that James and I prototyped in a design sprint come to fruition in the form of a progressive web app!
In the case of this web-app, if the tablets go offline, they will still store all the transactions that are made by customers. Once the tablet comes back online, it will sync it back up to the server. That is, essentially, what a Progressive Web App is — a kind of a website with a few more security and, most importantly, offline features.
Going Offline · An A List Apart Article
The first chapter of my new book Going Offline has been published in A List Apart.
The first hit is free. If you like what you read here and you’re just dying to know how it ends, you can pre-order the book now (it’s shipping on April 24).
LukeW | An Event Apart: The Way of the Web
Here are Luke’s notes from the talk I just gave at An Event Apart in Seattle.
Reliable Experiences - PWA Roadshow - YouTube
A good hands-on introduction to service workers from Mariko.
Progressive Web App for FixMyStreet · Issue #1996 · mysociety/fixmystreet
Here’s a Github issue that turned into a good philosophical debate on how to build a progressive web app: should you enhance your existing site or creating a separate URL?
(For the record: I’m in favour of enhancing.)
Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
It’s really great to hear about how Microsoft will be promoting progressive web apps as first-class citizens …but it’s really unhelpful that they’re using this fudgy definition:
Progressive Web Apps are just great web sites that can behave like native apps—or, perhaps, Progressive Web Apps are just great apps, powered by Web technologies and delivered with Web infrastructure.
Although they also give a more technical definition:
Technologically speaking, PWAs are web apps, progressively enhanced with modern web technologies (Service Worker, Fetch networking, Cache API, Push notifications, Web App Manifest) to provide a more app-like experience.
Nice try, slipping notifications in there like that, but no. No, no, no. Let’s not fool ourselves into thinking that one of the most annoying “features” of native apps is even desirable on the web.
If you want to use notifications, fine. But they are absolutely not a requirement for a progressive web app.
(A responsive design, on the other hand, totally is.)
Workers at Your Service | WebKit
Here’s an interesting insight on how WebKit is going to handle the cleanup of unused service workers and caches:
Service worker and Cache API stored information will grow as a user is browsing content. To keep only the stored information that is useful to the user, WebKit will remove unused service worker registrations after a period of a few weeks. Caches that do not get opened after a few weeks will also be removed.
Safari 11.1
Squee! The next time there’s an update for OS X and iOS, Safari will magically have service worker support! Not only that, but Safari on iOS will start using the information in web app manifests for adding to home screen.
That’s an impressive turnaround.
Release Notes for Safari Technology Preview 46 | WebKit
Well, that escalated quickly! Service workers are now available in Safari’s Technology Preview, which means it won’t be long before it lands in Safari proper.
Also: service workers also just landed in the insider release of Edge.
Everything offline’s coming up Milhouse!
Progressive Web Apps - My new book is available! | Dean Hume
This looks interesting—a new book by Dean Hume all about progressive web apps. A few chapters are available to download.
Network based image loading using the Network Information API in Service Worker | justmarkup
This is clever—you can use the navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.
Salva de la Puente - What is a PWA
Here’s a nice one-sentence definition for the marketing folk:
A Progressive Web App is a regular website following a progressive enhancement strategy to deliver native-like user experiences by using modern Web standards.
But if you’re talking to developers, I implore you to concretely define a Progressive Web App as the combination of HTTPS, a service worker, and a Web App Manifest.
Jeremy Keith on Evaluating Technology at SmashingConf Barcelona 2017 on Vimeo
I think this is the best delivery of this talk I’ve ever given. It was something about being in that wonderful venue.
I got quite worked up around the the 32 minute mark.
Can You Afford It?: Real-world Web Performance Budgets – Infrequently Noted
Alex looks at the mindset and approaches you need to adopt to make a performant site. There’s some great advice in here for setting performance budgets for JavaScript.
JavaScript is the single most expensive part of any page in ways that are a function of both network capacity and device speed. For developers and decision makers with fast phones on fast networks this is a double-whammy of hidden costs.
Mozilla Developer Roadshow Asia Jeremy Keith - YouTube
At the 14 minute mark I had to deal with an obstreperous member of the audience. He wasn’t heckling exactly …he just had a very bad experience with web components, and I think my talk was triggering for him.
Service Worker Registration | Web Fundamentals | Google Developers
Hmm …seems like I should probably wait for the load event before triggering navigator.serviceworker.register().