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.

The menu icon on Android. The share icon on iOS.

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.)

Have you published a response to this? :

Responses

James

Jeremy Keith published an amazing article on how to install a progressive web application (PWA) on your phone. A PWA is a website that can technically be used as an application, as opposed to a regular website which is optimised only to be shown in a web browser. Jeremy’s article is definitely worth a read if you want to install a progressive web application on your phone.

One itch I have had for a while is figuring out how to get my social reader to load as a PWA. I first started with an Apple Safari meta tag that indicates that a web application can run in full screen mode (the apple-mobile-web-app-capable meta tag). But, this only seemed to let me save a particular page as a PWA. When I saved my social reader to my home screen, the feed home loaded without any Safari components as I would have expected. When I tried to navigate to another page, the Safari navigation bar popped up at the top, making the site feel a bit clunky.

Jeremy’s article showed how a site he has worked on, The Session, loads as a PWA. In his demo, I noticed that the Safari navigation bar did not appear as he navigated around web pages. The main difference between my social reader’s PWA setup and The Session was that The Session had a web app manifest file. This manifest file includes various pieces of information that help mobile devices decide how to render a PWA.

I found an excellent web.dev tutorial on manifest.json files which showed what it should include. I copied the template from that page and modified it to use the same icon set and colour scheme as my social reader. Then, I added a link tag to my social reader’s head element so that mobile browsers can discover the manifest.json. My social reader manifest.json file is available online to look at if you need inspiration.

After adding this manifest.json file, my social reader now looks like this:

As I navigate around pages, no native Safari elements pop up. I can seamlessly move between pages. This is perfect. I can use my social reader as if it were a native application on my phone. There is no need for me to use a framework like React Native to make a more “native” version of the social reader. Apple’s PWA support works just fine for me. (I may or may not have previously been tempted to make a React Native version of my social reader!)

Apple’s PWA support, as Jeremy touches on in his article, is not perfect. I wish there was clear guidance from Apple that told developers exactly how to make a PWA. The “Add to home screen” button should maybe be renamed to “Save as an app” for progressive web applications to make it clearer to people that what they are saving to their home screen is an application. This could be done by checking for the presence of a manifest.json file. Also, I would love to see Firefox include this button too. I have to keep going into Safari to save an app as a PWA on my home screen.

Overall, I am satisfied with my new setup. I now have a PWA that doesn’t result in some Safari elements popping up that I don’t want to see in my web application. I no longer have an itch to build a React Native version of my social reader, a task that would take a lot of time and require writing a completely separate version of my reader. I am excited to use my feed reader with this new setup.

Also posted on IndieNews.

# Posted by James on Wednesday, January 19th, 2022 at 12:00am

Aaron T. Grogg

asks the question Are apps even that relevant anymore? Well, for some things, sure they are. But for most things I see in the app stores, they never really were. But Ben frames the question as if we developers were the ones pushing for native apps. But, aside from maybe app developers, I don’t really think it was ever we devs that were making this choice, was it? Certainly for me, it is always the client insisting “it has to be in the app store”… And that is usually because the end-users have been brainwashed into thinking that all apps must come from an app store… And of course, that mostly comes from all mobile devices making it really, really annoyingly unintuitive to install web apps on devices (at least initially, I believe Android is better now?)… So, until that mindset changes, the question is sadly moot…

Then again, if the likes of Macworld and are both gonna get behind promoting installable web apps, things just might start glacially moving! :-/

wrestles with getting an img element to work as a sort of fixed-background parallax effect. Note that the very last comment offers a great working solution, including a link to a clip-path generator. Nice assist, kubaS!

points out that we might want to also check on a page’s visibility state when we are looking at performance data, as browsers will often reduce resources for background tabs, which could really skew your RUM data…

Speaking of performance, offers A Unified Theory of Web Performance. It is a great conversation starter. I like the example of Gmail, as it is one we can (mostly) all associate with. So then, what’s the next step? :-)

Last web perf bit, promise, but check out these live RUM dashboards at SpeedCurve!

walks us through, first properly pronouncing Vite (thank you!), then adding it to an existing project, as in “replace whatever old thing you were using”…

Wow, you might also want to check out Adam’s “Author” page on CSS Tricks, lots of good-looking stuff there!

Call it Floating UI, pop-ups, tooltips, whatever. These are cool, and work really well!

Ever want to create your own custom font? Brutalita makes it fairly easy. Have fun!

Man, when says A Complete Guide To Accessible Front-End Components, he is not joking… Would be nice to find them all in a single repo, but the candy is worth the extra click…

`course, is no slacker either

Okay, keeping on accessibility for another sec, I have been a fan of Zapier for years, using it to interconnect unrelated APIs with normally not more than a few clicks (occasionally a little Python). Well, now Zapier can help automate your continuous accessibility!

Anatole Touvron’s Portfolio is amazing! Though, after a few (dozen) scrolls, my laptop was getting ready to fly to Paris!

offers CSS Me Not, a bookmarklet that helps you find CSS files your site no longer needs, even letting you temporarily block them so you can test before removing them!

Anybody remember PHP? Well does, and reminds us about / introduces us to assert(). Around since PHP5, what a great, single-line alternative to: if ( !something ) return false;!

SVG is so powerful, and so awesome, and has been around for so long, that I get kind of depressed thinking about how it is still not commonly used around the web… Sure, some icons here, maybe during election season a bunch of dynamic charts and graphs, but overall, I think most of us just see it as a limited-use, kind-of-hard-to-use branch of web tech… Well, walks us through several cool use-cases.

And finally, writes about The Optional Chaining Operator, “Modern” Browsers, and My Mom, a tale of how users can get “trapped” in older browser versions, even when that browser is “evergreen”… A reminder that, although CanIUse says “yes you can”, we need to remember there are lots of users “can’t”…

Happy reading, Atg

danq.me

Don’t have time to read? Just start playing:

Play DNDle

There’s a Wordle clone for everybody

Am I too late to get onto the “making Wordle clones” bandwagon? Probably; there are quite a few now, including:

I’m sure that by now all your social feeds are full of people playing Wordle. But the cool nerds are playing something new… Now, a Wordle clone for D&D players!

But you know what hasn’t been seen before today? A Wordle clone where you have to guess a creature from the Dungeons & Dragons (5e) Monster Manual by putting numeric values into a character sheet (STR, DEX, CON, INT, WIS, CHA):

Just because nobody’s asking for a game doesn’t mean you shouldn’t make it anyway.

What are you waiting for: go give DNDle a try (I pronounce it “dindle”, but you can pronounce it however you like). A new monster appears at 10:00 UTC each day.

And because it’s me, of course it’s open source and works offline.

The boring techy bit

  • Like Wordle, everything happens in your browser: this is a “backendless” web application.
  • I’ve used ReefJS for state management, because I wanted something I could throw together quickly but I didn’t want to drown myself (or my players) in a heavyweight monster library. If you’ve not used Reef before, you should give it a go: it’s basically like React but a tenth of the footprint.
  • A cache-first/background-updating service worker means that it can run completely offline: you can install it to your homescreen in the same way as Wordle, but once you’ve visited it once it can work indefinitely even if you never go online again.
  • I don’t like to use a buildchain that’s any more-complicated than is absolutely necessary, so the only development dependency is rollup. It resolves my import statements and bundles a single JS file for the browser.

# Wednesday, February 16th, 2022 at 10:40am

1 Share

# Shared by Nicolas Hoizey on Tuesday, January 18th, 2022 at 2:08pm

3 Likes

# Liked by Dominik Schwind on Tuesday, January 18th, 2022 at 1:42pm

# Liked by Tomáš Jakl on Saturday, January 22nd, 2022 at 12:55am

# Liked by James' Coffee Blog on Thursday, May 5th, 2022 at 4:25pm

Previously on this day

4 years ago I wrote Analysing analytics

Ain’t no third party like a Google Analytics third party.

11 years ago I wrote Bye, bye 5

HTML5 is dead, long live HTML.

11 years ago I wrote Badge of shame

The W3C embark on a mission to confuse and befuddle.

16 years ago I wrote Backlash 2.0

Wintertime… and the coding ain’t easy. Sharks are jumping and the bubble is high.

20 years ago I wrote Black Hawk Down: Shoot first, don't ask questions afterwards

For anyone planning to see the film "Black Hawk Down", perhaps you should read this article first.