A very welcome project from Marcus Herrmann, documenting how to make common interaction patterns accessible in popular frameworks: Vue, React, and Angular.
Thursday, May 16th, 2019
Friday, March 29th, 2019
Not only does the differentiation of terms create a divide within the industry, the term ‘web app’ regularly acts as an excuse for corner cutting and the exclusion of users.
We kid ourselves into thinking we’re building groundbreakingly complex systems that require bleeding-edge tools, but in reality, much of what we build is a way to render two things: a list, and a single item. Here are some users, here is a user. Here are your contacts, here are your messages with that contact. There ain’t much more to it than that.
Wednesday, March 20th, 2019
Tuesday, February 19th, 2019
If there are no specific reasons to build a single-page application, I will go with a traditional server-rendered architecture every day of the week.
Saturday, February 9th, 2019
This seems to work quite nicely: convert your progressive web app into an APK file that you can then submit to the Google Play store (you’ll still have to go through all the hassle of submitting the app, but still).
Friday, February 1st, 2019
It’s interesting to compare the release notes for each browser and see the different priorities reflected in them (this is another reason why browser diversity is A Good Thing).
A lot of the Firefox changes are updates to dev tools; they just keep getting better and better. In fact, I’m not sure “dev tools” is the right word for them. With their focus on layout, typography, and accessibility, “design tools” might be a better term.
Oh, and Firefox is shipping support for some CSS properties that really help with print style sheets, so I’m disproportionately pleased about that.
In Safari’s changes, I’m pleased to see that the
datalist element is finally getting implemented. I’ve been a fan of that element for many years now. (Am I a dork for having favourite HTML elements? Or am I a dork for even having to ask that question?)
And, of course, it wouldn’t be a Safari release without a new made up
meta tag. From the people who brought you such hits as
apple-mobile-web-app-capable, comes …
supported-color-schemes (Apple likes to make up
meta tags almost as much as Google likes to make up
There’ll be a whole bunch of improvements in how progressive web apps will behave once they’ve been added to the home screen. We’ll finally get some state persistence if you navigate away from the window!
Updated the behavior of websites saved to the home screen on iOS to pause in the background instead of relaunching each time.
Maximiliano Firtman has a detailed list of the good, the bad, and the “not sure yet if good” for progressive web apps on iOS 12.2 beta. Thomas Steiner has also written up the progress of progressive web apps in iOS 12.2 beta. Both are published on Ev’s blog.
Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store!
Very interesting indeed! I’m not sure if I’m ready to face the Kafkaesque process of trying to add something to the Google Play Store just yet, but it’s great to know that I can. Combined with the improvements coming in iOS 12.2, these are exciting times for progressive web apps!
Here’s a thorough blow-by-blow account of the workshop I ran in Nottingham last week:
Jeremy’s workshop was a fascinating insight into resilience and how to approach a web project with ubiquity and consistency in mind from both a design and development point of view.
Thursday, January 3rd, 2019
Well, this could be very handy for Huffduffer!
Friday, December 28th, 2018
This article conflates progressive web apps with having an app shell architecture. That’s a real shame.
Monday, November 12th, 2018
Monday, October 22nd, 2018
Thursday, August 30th, 2018
I had a great time chatting with Lea and Emily about service workers on this episode of their podcast—they’re such great hosts!
Here’s the huffduffed audio.
Friday, August 10th, 2018
Very valuable observations from Paul on his travels, talking to developers and business people about progressive web apps—there’s some confusion out there.
My personal feeling is that everyone is really hung up on the A in PWA: ‘App’. It’s the success and failure of the branding of the concept; ‘App’ is in the name, ‘App’ is in the conscious of many users and businesses and so the associations are quite clear.
Tuesday, August 7th, 2018
What an excellent question! And what an excellent bit of sleuthing to get to the bottom of it. This is like linguistic spelunking on the World Wide Web.
Oh, and of course I love the little sidenote at the end.
Friday, August 3rd, 2018
I got an intriguing email recently from someone who’s a member of The Session, the community website about Irish traditional music that I run. They said:
When I recently joined, I used my tablet to join. Somewhere I was able to download The Session app onto my tablet.
But there is no native app for The Session. Although, as it’s a site that I built, it is, a of course, progressive web app.
They went on to say:
I wanted to put the app on my phone but I can’t find the app to download it. Can I have the app on more than one device? If so, where is it available?
I replied saying that yes, you can absolutely have it on more than one device:
But you don’t find The Session app in the app store. Instead you go to the website https://thesession.org and then add it to your home screen from your browser.
My guess is that this person had added The Session to the home screen of their Android tablet, probably following the “add to home screen” prompt. I recently added some code to use the
window.beforeinstallprompt event so that the “add to home screen” prompt would only be shown to visitors who sign up or log in to The Session—a good indicator of engagement, I reckon, and it should reduce the chance of the prompt being dismissed out of hand.
So this person added The Session to their home screen—probably as a result of being prompted—and then used it just like any other app. At some point, they didn’t even remember how the app got installed:
Success! I did it. Thanks. My problem was I was looking for an app to download.
On the one hand, this is kind of great: here’s an example where, in the user’s mind, there’s literally no difference between the experience of using a progressive web app and using a native app. Win!
But on the other hand, the expectation is still that apps are to be found in an app store, not on the web. This expectation is something I wrote about recently (and Justin wrote a response to that post). I finished by saying:
Perhaps the inertia we think we’re battling against isn’t such a problem as long as we give people a fast, reliable, engaging experience.
When this member of The Session said “My problem was I was looking for an app to download”, I responded by saying:
Well, I take that as a compliment—the fact that once the site is added to your home screen, it feels just like a native app. :-)
And they said:
Yes, it does!
I love having discussions like this!
Friday, July 27th, 2018
A directory of progressive web apps.
Wednesday, July 25th, 2018
Here’s an intriguing proposal that would allow web apps to indicate activity in an icon (like an unread count) in the same way that native apps can.
This is an interesting one because, in this case, it’s not just browsers that would have to implement it, but operating systems as well.
Tuesday, July 24th, 2018
- Native apps
- A progressive web app
- A hybrid app
The Virgin Holidays team went with that third option.
Now, it will come as no surprise that I’m a big fan of the second option: building a progressive web app (or turning an existing site into a progressive web app). I think a progressive web app is a great solution for travel apps, and the use-case that Luke describes sounds perfect:
Easy access to resort staff and holiday details that could be viewed offline to help as many customers as possible travel without stress and enjoy a fantastic holiday
Luke explains why they choice not to go with a progressive web app.
The current level of support and leap in understanding meant we’d risk alienating many of our customers.
The issue of support is one that is largely fixed at this point. When Clearleft was working on the Virgin Holidays app, service workers hadn’t landed in iOS. Hence, the risk of alienating a lot of customers. But now that Mobile Safari has offline capabilities, that’s no longer a problem.
But it’s the second reason that’s trickier:
Simply put, customers already expected to find us in the App Store and are familiar with what apps can historically offer over websites.
I think this is the biggest challenge facing progressive web apps: battling expectations.
For over a decade, people have formed ideas about what to expect from the web and what to expect from native. From a technical perspective, native and web have become closer and closer in capabilities. But people’s expectations move slower than technological changes.
First of all, there’s the whole issue of discovery: will people understand that they can “install” a website and expect it to behave exactly like a native app? This is where install prompts and ambient badging come in. I think ambient badging is the way to go, but it’s still a tricky concept to explain to people.
But there’s another way of looking at the current situation. Instead of seeing people’s expectations as a negative factor, maybe it’s an opportunity. There’s an opportunity right now for companies to be as groundbreaking and trendsetting as Wired.com when it switched to CSS for layout, or The Boston Globe when it launched its responsive site.
It makes for a great story. Just look at the Pinterest progressive web app for an example (skip to the end to get to the numbers):
Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board. Those are amazing in and of themselves, but the growth front is where things really shined. Logins increased by 370 percent and new signups increased by 843 percent year-over-year. Since we shipped the new experience, mobile web has become the top platform for new signups. And for fun, in less than 6 months since fully shipping, we already have 800 thousand weekly users using our PWA like a native app (from their homescreen).
Now admittedly their previous mobile web experience was a dreadful doorslam, but still, those are some amazing statistics!
Maybe we’re underestimating the malleability of people’s expectations when it comes to the web on mobile. Perhaps the inertia we think we’re battling against isn’t such a problem as long as we give people a fast, reliable, engaging experience.
If you build that, they will come.
Tuesday, July 10th, 2018
Twitter and Instagram progressive web apps
The two major candidates are Twitter and Instagram. I added them to my home screen, and banished the native apps off to a separate screen. I’ve been using both progressive web apps for a few months now, and I have to say, they’re pretty darn great.
There are a few limitations compared to the native apps. On Twitter, if you follow a link from a tweet, it pops open in Safari, which is fine, but when you return to Twitter, it loads anew. This isn’t any fault of Twitter—this is the way that web apps have worked on iOS ever since they introduced their weird
web-app-capable meta element. I hope this behaviour will be fixed in a future update.
Also, until we get web notifications on iOS, I need to keep the Twitter native app around if I want to be notified of a direct message (the only notification I allow).
Apart from those two little issues though, Twitter Lite is on par with the native app.
Instagram is also pretty great. It too suffers from some navigation issues. If I click through to someone’s profile, and then return to the main feed, it also loads it anew, losing my place. It would be great if this could be fixed.
For some reason, the Instagram web app doesn’t allow uploading multiple photos …which is weird, because I can upload multiple photos on my own site by adding the
multiple attribute to the
input type="file" in my posting interface.
Apart from that, though, it works great. And as I never wanted notifications from Instagram anyway, the lack of web notifications doesn’t bother me at all. In fact, because the progressive web app doesn’t keep nagging me about enabling notifications, it’s a more pleasant experience overall.
Something else that was really annoying with the native app was the preponderance of advertisements. It was really getting out of hand.
Well …(looks around to make sure no one is listening)… don’t tell anyone, but the Instagram progressive web app—i.e. the website—doesn’t have any ads at all!
Here’s hoping it stays that way.