Progressive Web Apps in 2021

The Progressive Web App term is now five years old, and it’s time to sit down and understand where we are at 2021 within the platform, what has changed during 2020 and what we are expecting for the upcoming months. It shouldn’t surprise you while reading that iOS is the bottleneck here … Progressive Web …

8 Tips to Make Your Website Feel Like an iOS App

Very nice video by Sam Selikoff in which he sets up a web manifest to make his site feel more app-like. Great production quality. There are some tweaks I’d suggest though: Fixate the header using position: sticky; instead of position: fixed;. No need for that extra margin on the content then. Update: See note below …

Progressive Web Apps The Superpowers of the Web and Native Apps Combined

Free e-book by Google & Awwards on PWAs: We return to take a closer look at Progressive Web Apps (PWAs) and how they combine the reach of the web with the device integrations of installed software. In this ebook, Volume 2 in the series, you will learn: The capabilities of Progressive Web Apps Product strategies …

Offline Storage: When 7 KB Equals 7 MB

Gerardo Rodriguez from Cloudfour: While testing a progressive web app for one of our clients, I bumped into a suspicious error in the browser console: DOMException: Quota exceeded. After browsing the app a few more times, it became clear the error would occur after a small number of images were added to the cache storage …

Progressive Web Apps – PWA Roadshow

If you’ve totally missed out on PWAs, then this summarising video by Pete LePage is a good start. If you know what PWAs are then you might want to skip forward to the 8:30 mark, where details on the Twitter PWA (which might come to macOS soon?) are shared. In the first part of the …

PWAs are coming to iOS 11.3: Cupertino, we have a problem

Recently it was announced that iOS 11.3 and macOS 10.13.4 will include Service Workers, opening up the way for PWAs on iOS (and potentially macOS too, following lead of Microsoft here). ☝️ If you don’t want to download the macOS 10.13.4 beta you can alternatively download Safari Technology Preview (> 48) for use with your …

A Tinder Progressive Web App Performance Case Study

Addy Osmani: Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to 100% of users on desktop and mobile, employing techniques for JavaScript performance optimization, Service Workers for network resilience and Push Notifications for chat engagement. Today we’ll walk through some of their web perf learnings. Their PWA is …

sw-toolbox – A Collection of Tools for Service Workers

Service Worker Toolbox provides some simple helpers for use in creating your own service workers. Specifically, it provides common caching strategies for dynamic content, such as API calls, third-party resources, and large or infrequently used local resources that you don’t want precached. The code itself is very readable I must say: importScripts(‘sw-toolbox.js’); toolbox.precache([ ‘/css/app.css’, ‘/img/logo.png’ …

Progressive Web Apps with React

Great set of articles by Addy Osmani: In this series of posts I’ll share my experience turning React-based web apps into PWAs. We’ll also cover why shipping just what users need for a route & throwing out all other scripts are good ideas for fast perf. As with all articles by Addy: well-written, accurate, and …