Jeremy Keith's Blog, page 36

Web notifications on iOS

I���ve mentioned before that I don���t enable notifications on my phone. Text messages are the only exception. I don���t want to get notified if a new email arrives (I avoid email on my phone completely) and I certainly don���t want some social media app telling me somebody liked or faved something.

But the number one feature I���d like to see in Safari on iOS is web notifications.

It���s not for me personally, see. It���s because it���s the number one reason why people are choosing not to go all in progressive web apps.

Safari on iOS is the last holdout. But that equates to enough marketshare that many companies feel they can���t treat notifications as a progressive enhancement. While I may not agree with that decision myself, I get it.

When I���m evangelising the benefits of building on the open web instead of making separate iOS and Android apps, I inevitably get asked about notifications. As long as mobile Safari doesn���t support them���even though desktop Safari does���I���m somewhat stumped. There���s no polyfill for this feature other than building an entire native app, which is a bit extreme as polyfills go.

And of course, unlike on your Mac, you don���t have the option of using a different browser on your iPhone. As long as mobile Safari doesn���t support web notifications, nothing on iOS can support web notifications.

I���ve got progressive web apps on the home screen of my phone that match their native equivalents feature-for-feature. Twitter. Instagram. They���re really good. In some ways they���re superior to the native apps; the Twitter website is much calmer, and the Instagram website has no advertising. But if I wanted to get notifications from any of those sites, I���d have to keep the native apps installed just for that one feature.

So in the spirit of complaining about web browsers in a productive way, I just want to throw this plea out there: Apple, please support web notifications in mobile Safari!

The good news is that web notifications on iOS might be on their way. Huzzah!

Alas, we���re reliant on Maximiliano���s detective work to even get a glimpse of a future feature like this. Apple has no public roadmap for Safari. There���s this status page on the Webkit blog but it���s incomplete���web notifications don���t appear at all. In any case, WebKit and Safari aren���t the same thing. The only way of knowing if a feature might be implemented in Safari is if it shows up in Safari Technology Preview, at which point it���s already pretty far along.

So while my number one feature request for mobile Safari is web notifications, a close second would be a public roadmap.

It only seems fair. If Apple devrels are asking us developers what features we���d like to see implemented���as they should!���then shouldn���t those same developers also be treated with enough respect to share a roadmap with them? There���s not much point in us asking for features if, unbeknownst to us, that feature is already being worked on.

But, like I said, my number one request remains: web notifications on iOS …please!

A bug with progressive web apps on iOS

Dave recently wrote some good advice about what to do���and what not to do���when it comes to complaining about web browsers. I wrote something on this topic a little while back:

If there���s something about a web browser that you���re not happy with (or, indeed, if there���s something you���re really happy with), take the time to write it down and publish it

To summarise Dave���s advice, avoid conspiracy theories and snark; stick to specifics instead.

It���s very good advice that I should heed (especially the bit about avoiding snark). In that spirit, I���d like to document what I think is a bug on iOS.

I don���t need to name the specific browser, because there is basically only one browser allowed on iOS. That���s not snark; that���s a statement of fact.

This bug involves navigating from a progressive web app that has been installed on your home screen to an external web view.

To illustrate the bug, I���ll use the example of The Session. If you want to recreate the bug, you���ll need to have an account on The Session. Let me know if you want to set up a temporary account���I can take care of deleting it afterwards.

Here are the steps:

Navigate to thesession.org in Safari on an iOS device.Add the site to your home screen.Open the installed site from your home screen���it will launch in standalone mode.Log in with your username and password.Using the site menu, navigate to the links section of the site.Click on any external link.After the external link opens in a web view, tap on ���Done��� to close the web view.

Expected behaviour: you are returned to the page you were on with no change of state.

Actual behaviour: you are returned to the page you were on but you are logged out.

So the act of visiting an external link in a web view while in a progressive web app in standalone mode seems to cause a loss of cookie-based authentication.

This isn���t permanent. Clicking on any internal link restores the logged-in state.

It is surprising though. My mental model for opening an external link in a web view is that it sits ���above��� the progressive web app, which remains in stasis ���behind��� it. But the page must actually be reloading, either when the web view is opened or when the web view is closed. And that reload is behaving like a fetch event without credentials.

Anyway, that���s my bug report. It may already be listed somewhere on the WebKit Bugzilla but I lack the deductive skills to find it. I���m not even sure if that���s the right place for this kind of bug. It might be specific to the operating system rather than the rendering engine.

This isn���t a high priority bug, but it is one of those cumulatively annoying software paper cuts.

Hope this helps!

Both plagues on your one house

February is a tough month at the best of times. A February during The Situation is particularly grim.

At least in December you get Christmas, whose vibes can even carry you through most of January. But by the time February rolls around, it���s all grim winteriness with no respite in sight.

In the middle of February, Jessica caught the ���rona. On the bright side, this wasn���t the worst timing: if this had happened in December, our Christmas travel plans to visit family would���ve been ruined. On the not-so-bright side, catching a novel coronavirus is no fun.

Still, the vaccines did their job. Jessica felt pretty crap for a couple of days but was on the road to recovery before too long.

Amazingly, I did not catch the ���rona. We slept in separate rooms, but still, we were spending most of our days together in the same small flat. Given the virulence of The Omicron Variant, I���m counting my blessings.

But just in case I got any ideas about having some kind of superhuman immune system, right after Jessica had COVID-19, I proceeded to get gastroenteritis. I���ll spare you the details, but let me just say it was not pretty.

Amazingly, Jessica did not catch it. I guess two years of practicing intense hand-washing pays off when a stomach bug comes a-calling.

So all in all, not a great February, even by February���s already low standards.

The one bright spot that I get to enjoy every February is my birthday, just as the month is finishing up. Last year I spent my birthday���the big five oh���in lockdown. But two years ago, right before the world shut down, I had a lovely birthday weekend in Galway. This year, as The Situation began to unwind and de-escalate, I thought it would be good to reprieve that birthday trip.

We went to Galway. We ate wonderful food at Aniar. We listened to some great trad music. We drink some pints. It was good.

But it was hard to enjoy the trip knowing what was happening elsewhere in Europe. I���d blame February for being a bastard again, but in this case the bastard is clearly Vladimar Putin. Fucker.

Just as it���s hard to switch off for a birthday break, it���s equally challenging to go back to work and continue as usual. It feels very strange to be spending the days working on stuff that clearly, in the grand scheme of things, is utterly trivial.

I take some consolation in the fact that everyone else feels this way too, and everyone is united in solidarity with Ukraine. (There are some people in my social media timelines who also feel the need to point out that other countries have been invaded and bombed too. I know it���s not their intention but there���s a strong ���all lives matter��� vibe to that kind of whataboutism. Hush.)

Anyway. February���s gone. It���s March. Things still feel very grim indeed. But perhaps, just perhaps, there���s a hint of Spring in the air. Winter will not last forever.

Curating UX London 2022

The first speakers are live on the UX London 2022 site! There are only five people announced for now���just enough to give you a flavour of what to expect. There will be many, many more.

Putting together the line-up of a three-day event is quite challenging, but kind of fun too. On the one hand, each day should be able to stand alone. After all, there are one-day tickets available. On the other hand, it should feel like one cohesive conference, not three separate events.

I���ve decided to structure the three days to somewhat mimic the design process…

The first day is all about planning and preparation. This is like the first diamond in the double-diamond process: building the right thing. That means plenty of emphasis on research.

The second day is about creation and execution. It���s like that second diamond: building the thing right. This could cover potentially everything but this year the focus will be on content design.

The third day is like the third diamond in the double dia— no, wait. The third day is about growing, scaling, and maintaining design. That means there���ll be quite an emphasis on topics like design systems and design engineering, maybe design ops.

But none of the days will be exclusively about a single topic. There are evergreen topics that apply throughout the process: product design, design ethics, inclusive design.

It���s a lot to juggle! But I���m managing to overcome choice paralysis and assemble a very exciting line-up indeed. Trust me���you won���t want to miss this!

Early bird tickets are available until February 28th. That���s just a few days away. I recommend getting your tickets now���you won���t regret it!

Quite a few people are bringing their entire teams, which is perfect. UX London can be both an educational experience and a team-bonding exercise. Let���s face it, it���s been too long since any of us have had a good off-site.

If you���re one of those lucky people who���s coming along (or if you���re planning to), I���m curious: given the themes mentioned above, are there specific topics that you���d hope to see covered? Drop me a line and let me know.

Also, if you read the description of the event and think ���Oh, I know the perfect speaker!��� then I���d love to hear from you. Maybe that speaker is you. (Although, cards on the table; if you look like me���another middle-age white man���I may take some convincing.)

Right. Time to get back to my crazy wall of conference curation.

02022-02-22

Eleven years ago, I made a prediction:

The original URL for this prediction (www.longbets.org/601) will no longer be available in eleven years.

One year later, Matt called me on it and the prediction officially became a bet:

We���re playing for $1000. If I win, that money goes to the Bletchley Park Trust. If Matt wins, it goes to The Internet Archive.

I���m very happy to lose this bet.

When I made the original prediction eleven years ago that a URL on the longbets.org site would no longer be available, I did so in a spirit of mischief���it was a deliberately meta move. But it was also informed by a genuine feeling of pessimism around the longevity of links on the web. While that pessimism was misplaced in this case, it was informed by data.

The lifetime of a URL on the web remains shockingly short. What I think has changed in the intervening years is that people may have become more accustomed to the situation. People used to say ���once something is online it���s there forever!���, which infuriated me because the real problem is the exact opposite: if you put something online, you have to put in real effort to keep it online. After all, we don���t really buy domain names; we just rent them. And if you publish on somebody else���s domain, you���re at their mercy: Geocities, MySpace, Facebook, Medium, Twitter.

These days my view towards the longevity of online content has landed somewhere in the middle of the two dangers. There���s a kind of Murphy���s Law around data online: anything that you hope will stick around will probably disappear and anything that you hope will disappear will probably stick around.

One huge change in the last eleven years that I didn���t anticipate is the migration of websites to HTTPS. The original URL of the prediction used HTTP. I���m glad to see that original URL now redirects to a more secure protocol. Just like most of the World Wide Web. I think we can thank Let���s Encrypt for that. But I think we can also thank Edward Snowden. We are no longer as innocent as we were eleven years ago.

I think if I could tell my past self that most of the web would using HTTPS by 2022, my past self would be very surprised …���though not as surprised at discovering that time travel had also apparently been invented.

The Internet Archive has also been a game-changer for digital preservation. While it���s less than ideal that something isn���t reachable at its original URL, knowing that there���s probably a copy of the content at archive.org lessens the sting considerably. I couldn���t be happier that this fine institution is the recipient of the stakes of this bet.

Announcing UX London 2022

For the past two years, all of Clearleft���s events have been online. Like everyone else running conferences, we had to pivot in the face of The Situation.

In hindsight, it���s remarkable how well those online events went. This was new territory for everyone���speakers, attendees, and organisers.

UX Fest was a real highlight. I had the pleasure of hosting the event, giving it my Woganesque best. It was hard work, but it paid off.

Still, it���s not quite the same as gathering together with your peers in one place for a shared collective experience. I���ve really been missing in-person events (and from what I���ve seen in people���s end-of-year blog posts, I���m not alone).

That���s why I���m absolutely thrilled that UX London is back in 2022! Save the dates; June 28th to 30th. We���ve got a new venue too: the supremely cool Tobacco Dock.

This is going to be a summertime festival of design. It���ll be thought-provoking, practical, fun, and above all, safe.

It feels kind of weird to be planning an in-person event now, when we���re just emerging from The Omicron Variant, but putting on UX London 2022 isn���t just an act of optimism. It���s a calculated move. While nothing is certain, late June 2022 should be the perfect time to safely gather the UX community again.

It���s a particularly exciting event for me. Not only will I be hosting it, this time I���m also curating the line-up.

I���ve curated conference line-ups before: dConstruct, Responsive Day Out, and Patterns Day. But those were all one-day events. UX London is three times as big!

It���s a lot of pressure, but I���m already extremely excited about the line-up. If my plan comes together, this is going to be an unmissable collection of mindbombs. I���ve already got some speakers confirmed so keep an eye on the website, Twitter or sign up for the newsletter to get the announcements as when they happen.

The format of UX London has been honed over the years. I think it���s got just the right balance.

Each day has a morning of inspiring talks���a mixture of big-picture keynotes and punchy shorter case studies. The talks are all on a single track; everyone shares that experience. Then, after lunch, there���s an afternoon of half-day workshops. Those happen in parallel, so you choose which workshop you want to attend.

I think this mixture of the inspirational and the practical is the perfect blend. Your boss can send you to UX London knowing that you���re going to learn valuable new skills, but you���ll also leave with your mind expanded by new ideas.

Like I said, I���m excited!

Naturally, I���m nervous too. Putting on an event is a risky endeavour at the best times. Putting an event after a two-year pandemic is even more uncertain. What if no one comes? Maybe people aren���t ready to return to in-person events. But I can equally imagine the opposite situation. Maybe people are craving a community gathering after two years of sitting in front of screens. That���s definitely how I���m feeling.

If you���re feeling the same, then join me in London in June. Tickets are on sale now. You can get three-day early-bird pass, or you can buy a ticket for an individual day. But I hope you���ll join me for the whole event���I can���t wait to see you there!

Fonts or food?

At the end of every Thursday afternoon at Clearleft, we wrap up the working week with an all-hands (video) meeting. Yes, I know that the week finishes on Friday, but Fridays have been declared the no-meetings day at Clearleft: a chance to concentrate on heads-down work without interruption. Besides, some of us don���t work on Fridays. So Thursday really is the new Friday.

At this Thursday afternoon meeting we give and get updates on what���s been happening with project work, new business, events, marketing. We also highlighted any shout-outs that have posted in the #beingsplendid Slack channel during the week. Once that���s all taken care of, the Thursday afternoon meeting often finishes with a fun activity.

The hosting of the Thursday afternoon meeting is decided by fate. Two weeks ago, Rebecca and Chris hosted an excellent end-of-week meeting that finished with an activity around food���everyone had submitted their dream meal and we had to match up the meal to the person. Lorenzo, however, couldn���t help commenting on the typography in the slide deck. ���Lorenzo”, I said, ���What are you more judgmental about���fonts or food?���

The words were barely out of my mouth when I realised I had the perfect activity for the next Thursday afternoon meeting, which fate had decreed I was to host. I put together a quiz called ���fonts or food!

It���s quite straightforward. There are 25 words. All you have to do is say whether it���s the name of a font or the name of a food.

It was good fun! So I thought I���d share it with you if you fancy a go.

Ready?

Here we go���

Arrowroot font foodEnsete font foodTahu font foodTako font foodLato font foodFira font foodAdzuki font foodRoselle font foodPoke font foodPlantin font foodDabberlocks font foodEstampa font foodAmaranth font foodGentium font foodChallum font foodMayhaw font foodPawpaw font foodNopal font foodRaksana font foodDaylily font foodBilanthy font foodLaver font foodOrache font foodBroadley font foodCardoon font food

Total: 0/25

#fontsorfood li { display: table-row; } #fontsorfood li > * { display: table-cell; padding: 0.5em 1em; } #fontsorfood [data-result = "right"]::after { content: 'correct!'; } #fontsorfood [data-result = "wrong"]::after { content: 'incorrect'; }

document.getElementById('fontsorfood').querySelectorAll('input').forEach( el => { el.addEventListener('change', function(ev) { var item = el.closest('li'); if (item.dataset.answer == el.value) { item.dataset.result = 'right'; } else { item.dataset.result = 'wrong'; } item.querySelectorAll('input[type="radio"]').forEach( input => { input.setAttribute('disabled', 'disabled'); }); document.getElementById('fontsorfoodtotal').value = document.getElementById('fontsorfood').querySelectorAll('[data-result="right"]').length; });});

2.5.6

The Competition and Markets Authority (CMA) recently published an interim report on their mobile ecosystems market study. It���s well worth reading, especially the section on competition in the supply of mobile browsers:

On iOS devices, Apple bans the use of alternative browser engines ��� this means that Apple has a monopoly over the supply of browser engines on iOS. It also chooses not to implement ��� or substantially delays ��� a wide range of features in its browser engine. This restriction has 2 main effects:

limiting rival browsers��� ability to differentiate themselves from Safari on factors such as speed and functionality, meaning that Safari faces less competition from other browsers than it otherwise could do; and limiting the functionality of web apps ��� which could be an alternative to native apps as a means for mobile device users to access online content ��� and thereby limits the constraint from web apps on native apps. We have not seen compelling evidence that suggests Apple���s ban on alternative browser engines is justified on security grounds.

That last sentence is a wonderful example of British understatement. Far from protecting end users from security exploits, Apple have exposed everyone on iOS to all of the security issues of Apple���s Safari browser (regardless of what brower the user thinks they are using).

The CMA are soliciting responses to their interim report:

To respond to this consultation, please email or post your submission to:

Email: mobileecosystems@cma.gov.uk

Post: ���

Mobile Ecosystems Market Study
Competition and Markets Authority
���25 Cabot Square
���London
���E14 4QZ

Please respond by no later than 5pm GMT on 7 February 2022.

I encourage you to send a response before this coming Monday. This is the email I���ve sent.

Hello,

This response is regarding competition in the supply of mobile browsers and contains no confidential information.

I read your interim report with great interest.

As a web developer and the co-founder of a digital design agency, I could cite many reasons why Apple���s moratorium on rival browser engines is bad for business. But the main reason I am writing to you is as a consumer and a user of Apple���s products.

I own two Apple computing devices: a laptop and a phone. On both devices, I can install apps from Apple���s App Store. But on my laptop I also have the option to download and install an application from elsewhere. I can���t do this on my phone. That would be fine if my needs were met by what���s available in the app store. But clause 2.5.6 of Apple���s app store policy restricts what is available to me as a consumer.

On my laptop I can download and install Mozilla���s Firefox or Google���s Chrome browsers. On my phone, I can install something called Firefox and something called Chrome. But under the hood, they are little more than skinned versions of Safari. I���m only aware of this because I���m au fait with the situation. Most of my fellow consumers have no idea that when they install the app called Firefox or the app called Chrome from the app store on their phone, they are being deceived.

It is this deception that bothers me most.

Kind regards,

Jeremy Keith

To be fair to Apple, this deception requires collusion from Mozilla, Google, Microsoft, and other browser makers. Nobody���s putting a gun to their heads and forcing them to ship skinned versions of Safari that bear only cosmetic resemblance to their actual products.

But of course it would be commercially unwise to forego the app store as a distrubution channel, even if the only features they can ship are superficial ones like bookmark syncing.

Still, imagine what would happen if Mozilla, Google, and Microsoft put their monies where their mouths are. Instead of just complaining about the unjust situation, what if they actually took the financial hit and pulled their faux-browsers from the iOS app store?

If this unjustice is as important as representatives from Google, Microsoft, and Mozilla claim it is, then righteous indignation isn���t enough. Principles without sacrifice are easy.

If nothing else, it would throw the real situation into light and clear up the misconception that there is any browser choice on iOS.

I know it���s not going to happen. I also know I���m being a hypocrite by continuing to use Apple products in spite of the blatant misuse of monopoly power on display. But still, I wanted to plant that seed. What if Microsoft, Google, and Mozilla were the ones who walk away from Omelas.

Screenshots

I wrote about how I created a page on The Session with instructions for installing the site to your home screen. When I said that I included screenshots on that page, I may have underplayed the effort involved. It was real faff.

I���ve got an iPhone so generating screenshots (and video) from that wasn���t too bad. But I don���t have access to an Android phone. I found myself scouring the web for templates that I could use to mockup a screenshot of the address bar.

That got me thinking…

Wouldn���t it be cool if there were a service that generated those screenshots for you? You give it a URL, and it spits out screenshots of the site complete with overlays showing the installation flow on Android and iOS. It could even generate the img markup, complete with differently-scaled images for the srcset attribute.

Download the images. Copy that markup. Paste it into a page on your site. Boom! Now you���ve got somewhere to point your visitors to if you���d like them to install your progressive web app.

There are already some services out there for generating screenshots of mobile phones but they���re missing is the menu overlays for adding to home screen.

The devrels at both Google and Microsoft have been doing a great job of promoting progressive web apps. They���ve built tools to help you with tasks like generating icons or creating your web app manifest. It would be sooooo nifty if those tools also generated instructional screenshots for adding to home screen!

Installing progressive web apps

I don���t know about you, but it seems like everyone I follow on Twitter is playing Wordle. Although I don���t play the game myself, I think it���s pretty great.

Not only does Wordle have a very sweet backstory, but it���s also unashamedly on the web. If you want to play, you go to the URL powerlanguage.co.uk/wordle. That���s it. No need to download an app.

That hasn���t stopped some nefarious developers trying to trick people into downloading their clones of Wordle from app stores. App stores, which are meant to be curated and safe, are in fact filled with dodgy knock-offs and scams. Contrary to popular belief, the web is quite literally a safer bet.

Wordle has a web app manifest, which means you can add it to your home screen and it will behave just like a native app (although I don���t believe it has offline support). That���s great, but the process of adding a web app to your home screen on iOS is ludicrously long-winded.

Macworld published an article detailing how to get the real Wordle app on your iPhone or iPad. On the one hand it���s great to see this knowledge being spread. On the other hand it���s dispiriting that it���s even necessary to tell people that they can do this, like it���s a hidden nerdy secret just for power users.

At this point I���ve pretty much given up on Apple ever doing anything about this pathetic situation. So what can I do instead?

Well, taking my cue from that Macworld article, the least I can do is inform people how they can add a progressive web app to their home screen.

That���s what I���ve done on thesession.org. I���ve published a page on how to install The Session to your home screen.

On both Android and iPhone the journey to installing a progressive web app begins with incomprehensible iconography. On Android you must first tap on the unlabeled kebab icon���three vertical dots. On iOS you must first tap on the unlabeled share icon���a square with an arrow coming out of it.

When it comes to mobile operating systems, consumer choice means you choose which kind of mystery meat to eat.

I���ve included screenshots to help people identify these mysterious portals. For iOS I���ve also included a video to illustrate the quest to find the secret menu item buried beneath the share icon.

I���ve linked to the page with the installation instructions from the site���s ���help��� page and the home page.

Handy tip: when you���re adding a start_url value to your web app manifest, it���s common to include a query string like this:

start_url: "/?homescreen"

I���m guessing most people to that so they can get analytics on how many people are starting from an icon tap. I don���t do analytics on The Session but I���m still using that query string in my start_url. On the home page of the site, I check for the existence of the query string. If it exists, I don���t show the link to the installation page. So once someone has installed the site to their home screen, they shouldn���t see that message when they launch The Session.

If you���ve got a progressive web app, it might be worth making a page with installation instructions rather than relying on browsers to proactively inform your site���s visitors. You���d still need to figure out the right time and place to point people to that page, but at least the design challenge would be in your hands.

Should you decide to take a leaf out of the Android and iOS playbooks and use mystery meat navigation to link to such a page, there���s an emoji you could potentially use: ����

It���s still worse than using actual words, but it might be better than some random combination of dots, squares and arrows.

(I���m not really serious about using that emoji, but if you do, be sure to use a sensible aria-label value on the enclosing a element.)