Tags: service

137

sparkline

Service Worker Registration  |  Web Fundamentals  |  Google Developers

Hmm …seems like I should probably wait for the load event before triggering navigator.serviceworker.register().

Network Information API

It looks like this is landing in Chrome. The navigator.connection.type property will allow us to progressively enhance based on connection type:

A web application that makes use of a service worker to cache resources during installation might have different bundles of assets that it might cache: a list of crucial assets that are cached unconditionally, and a bundle of larger, optional assets that are only cached ahead of time when navigator.connection.type is 'ethernet' or 'wifi'.

There are potential security issues around fingerprinting that are addressed in this document.

Progressive Web Apps? No, we are building Alien Web Apps | Condé Nast Technology

There’s a lot of misinformation on the internet as to how to build a PWA and how “appy” and SPA-y one must be.

Yes!

This simply isn’t true. Disappointingly, It is what most of the documentation, blog posts and public discourse seem to imply.

Preach it!

I’m so, so happy to see some pushback against the misinformation that progressive web apps automatically imply client-side rendered single page apps built from scratch. There’s so much value to be had in turbo-charging an existing site into a progressive web app.

But what we don’t need is yet another TLA like Alien Web Apps.

How much storage space is my Progressive Web App using? | Dean Hume

You can use navigator.storage.estimate() to get a (vague) idea of how much space is available on a device for your service worker caches.

Killing Old Service Workers for the Greater Good – Hackages Blog

Ooh, this is a tricky scenario. If you decide to redirect all URLs (from, say, a www subdomain to no subdomain) and you have a service worker running, you’re going to have a bad time. But there’s a solution here to get the service worker to remove itself.

The server-side specifics are for NGINX but this is also doable with Apache.

Infusion: An Inclusive Documentation Builder

Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.

Thinking about it, it makes total sense that a pattern library should be a progressive web app.

Tame your Service Worker before your Progressive Web App go into the wild by Maxim Salnikov

There are some great service worker optimisation tips in these slides.

Betting on the Web

Along the lines of John’s recent post, Henrik makes the business case for progressive web apps.

He also points out how they can be much better than native apps for controlling hardware.

They can be up and running in a fraction of the time whether or not they were already “installed” and unlike “apps” can be saved as an app on the device at the user’s discretion!

Essentially they’re really great for creating “ad hoc” experiences that can be “cold started” on a whim nearly as fast as if it were already installed.

Yes, That Web Project Should Be a PWA · An A List Apart Article

A fantastic piece by Aaron who—once again—articulates what I’ve been thinking:

Your site—every site—should be a PWA.

He clearly explains the building blocks of progressive web apps—HTTPS, a manifest file, and a service worker—before describing different scenarios for different kinds of sites:

  • Informational
  • Periodical
  • Transactional
  • Social
  • Software
  • Institutional

Progressive Web Apps may seem overly technical or beyond the needs of your project, but they’re really not. They’re just a shorthand for quality web experiences—experiences that can absolutely make a difference in our users’ lives.

Highly recommended!

A Progressive Roadmap for your Progressive Web App - Cloud Four

Jason lists the stages of gradually turning the Cloud Four site into a progressive web app:

And you can just keep incrementally adding and tweaking:

You don’t have to wait to bundle up a binary, submit it to an app store, and wait for approval before your customers benefit.

Offline POSTs with Progressive Web Apps – Web Dev @ Microsoft – Medium

This is a smart way to queue up POST submissions for later if the user is offline. It’s not as powerful as background sync (because it requires the user to revisit your site) but it’s a good fallback for browsers that support service workers but don’t yet support background sync

Progressive Progressive Web Apps - Tales of a Developer Advocate by Paul Kinlan

Paul goes into detail describing how he built a progressive web app that’s actually progressive (in the sense of “enhancement”). Most of the stuff about sharing code between server and client goes over my head, but I understood enough to get these points:

  • the “app shell” model is not the only—or even the best—way of building a progressive web app, and
  • always, always, always render from the server first.

Attachment #317095 for bug #175115

I’ve never been so excited by a single diff in a JSON file.

Service workers are coming to Safari.

Introducing PWAs

The slides from Calum’s presentation about progressive web apps. There are links throughout to some handy resources.

How to turn your website into a PWA | Max Böck - Frontend Web Developer

This primer on progressive web apps starts by dispelling some myths:

  1. Your thing does not have to be an “Application” to be a PWA.
  2. Your thing does not have to be a Javascript-powered single page app.
  3. PWAs are not specifically made for Google or Android.
  4. PWAs are ready and safe to use today.

Then it describes the three-step programme for turning your thing into a progressive web app:

  1. The Manifest.
  2. Go HTTPS.
  3. The Service Worker.

Your Site—Any Site—Should be a PWA | Aaron Gustafson

Tell it, brother!

PWAs don’t require you use a particular JavaScript framework or any JavaScript framework at all. You don’t need to be building a Single Page App either.

Service Worker gotchas

A great collection of learned lessons from implementing service workers.

I really, really like it when people share their own personal experiences and “gotchas!” like this.

Johannes Dachsel – Making my website work offline – a service worker module for Processwire

If you use the ProcessWire Content Management System, Johannes has written a handy plug-in that allows you to specify which files should be cached by a service worker.

traintimes.org.uk performance notes

I love, love, *love, traintimes.org.uk—partly because it’s so useful, but also because it’s so fast. I know public transport is the clichéd use-case when it comes to talking about web performance, but in this case it’s genuine: I use the site on trains and in airports.

Matthew gives a blow-by-blow account of the performance optimisations he’s made for the site, including a service worker. The whole thing is a masterclass in performance and progressive enhancement. I’m so glad he took the time to share this!

Service Worker Security FAQ - The Chromium Projects

Got questions about the security of service workers? This document probably has the answer.