PWAs

Last Updated Feb 8, 2024: Added URL Handlers

The iPhone introduced the world to the mobile web. It was the original “sweet solution”, but had many downsides compared to native apps.

Limited performance, network access, and software features restricted what was even possible on the web.

But most of that has changed.

PWAs and service workers on modern mobile browsers have closed the gap between what’s possible on mobile web and mobile native.

This page is your home for everything to do with the next generation of mobile:

This is a work in progress. Check back often as new sections are filled out.

App Manifests

The app manifest is a JSON file that describes your app to the browser/operating system. This includes details like the suggested app name, icons, and capabilities of your site. This is the core starting place for all of your customizations. Adding the manifest to your page is done by adding a link tag to your <head>:

<head>
	<link rel="manifest" href="/app.webmanifest" />
</head>

The name and location of this file does not affect its functionality in any way ([unlike service workers]) so you can easily manage this as a normal page in your system. For a typical Rails website, the partial for this would look like:

{
  "name": "Long App Name",
  "short_name": "Short Name",
  "start_url": "/sign_in",
  "display": "fullscreen",
  "icons": [
    {
      "src": "<%= j image_path("icon-192.png") %>",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "<%= j image_path("icon-512.png") %>",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

The Wish List

PWAs are not nearly perfect yet. The native OS will always have features that are not available on the web. That said, here is my wish list of what I would like added that would enable core missing functionality. These are the things that are must-haves for users to accept a web app as a native app, not want-to-haves.

Better App Install

Currently, you need to go into the settings/share menu to “Install the app to your home screen”, except on Android/Chrome. They have a non-open install prompt system that lets the website creator easily prompt the user to install the web app. In my mind, this is currently the biggest disadvantage for an iOS PWA vs an iOS native app.

URL Handlers

In a native application, you can register a URL handler for your app. If you made a music app for example you could have jons_music:1234 open the app and go to album 1234. This can be critical especially if you are sending transactional emails, since they won’t be opened in the PWA.

There is currently a draft specification to allow this for PWAs via a feature called handle_links.

About Me

My name is Jonathan Bennett and I help Rails SaaS take their responsive websites to the next level. You don’t need to create a separate native mobile to give a great user experience! I work with the latest mobile tech to help you escape the traps and constraints of the app stores.

I have a decade of experience working with small businesses and startups, helping them turn business goals into reality.

Updates

Feb 8, 2024: Added URL Handlers
Jan 12, 2024: Initial post