Distinguishing cached vs. network HTML requests in a Service Worker | Trys Mudford

It’s Time to Build a Progressive Web App. Here’s How – The New Stack

Much as I appreciate the optimism of this evaluation, I don’t hold out much hope that people’s expectations are going to change any time soon:

Indeed, when given a choice, users will opt for the [native] app version of a platform because it’s been considered the gold standard for reliability. With progressive web apps (PWAs), that assumption is about to change.

Nonetheless, this is a level-headed look at what a progressive web app is, mercifully free of hand-waving:

• App is served through HTTPS.
• App has a web app manifest with at least one icon. (We’ll talk more about the manifest shortly.)
• App has a registered service worker with a fetch event handler. (More on this later too.)

Streets Series’ Articles - DEV Community 👩‍💻👨‍💻

This is a really excellent four-part series on web performance that really dives into the technical details and asks all the right questions:

1. Making the world’s fastest website, and other mistakes
2. The weirdly obscure art of Streamed HTML
3. Speed Needs Design, or: You can’t delight users you’ve annoyed
4. Routing: I’m not smart enough for a SPA

How to make MPAs that are as fast as SPAs | Go Make Things

The headline is a little misleading because if you follow this advice, your multi-page apps will be much much faster than single page apps, especially when you include that initial page load of a single page app.

Here’s a quick high-level summary of what I do…

1. Serve pre-rendered, mostly static HTML.
2. Inline everything, including CSS and JavaScript.
3. Use mostly platform-native JavaScript, and as little of it as possible.
4. Minify and gzip all the things.
5. Lean heavily on service workers.

That’s an excellent recipe for success right there!

Progressier | Make your website a PWA in 42 seconds

This in an intriguing promise (there’s no code yet):

A PWA typically requires writing a service worker, an app manifest and a ton of custom code. Progressier flattens the learning curve. Just add it to your html template — you’re done.

I worry that this one line of code will pull in many, many, many, many lines of JavaScript.

Building a client side proxy

This is a great way to use a service worker to circumvent censorship:

After the visitor opens the website once over a VPN, the service worker is downloaded and installed. The VPN can then be disabled, and the service worker will take over to request content from non-blocked servers, effectively acting as a proxy.