🌐 Progressive Web Apps (PWAs)
Progressive Web Apps is a term coined by Google to describe a set of functionalities that bring web apps closer to native apps, and which include offline support, push notifications, installability, and more. web.dev (opens in a new tab) is a comprehensive resource to learn more about PWAs. While there is certainly a lot of PWA features that can be useful for games, I think the most important one is installability. Allowing your users to install your game on their device and have an icon on their desktop or home screen is a great way to increase engagement and gives a more immersive fullscreen experience with no browser UI.
Installing a PWA on a device can be done in two ways: via a button in the browser UI (which may say Add to home screen "A2HS" on mobile, or Install app on desktop), or via a browser-native prompt that the PWA can trigger. By default, if supported, the installation prompt (opens in a new tab) will appear whenever the browser has confirmed that your PWA meets the installability criteria (opens in a new tab), which may happen soon after the user opens your game. That's less than ideal, as it may interrupt the user's experience and be seen as an annoying popup. You can instead trigger the prompt yourself, for example when the user clicks an in-game install button or has completed a level.
As on January 2023, installing PWAs directly from a web page is supported on (opens in a new tab):
- ✅ Chromium-based desktop browsers (Chrome, Edge, Brave...).
- ✅ Chromium-based Android browsers (Chrome, Edge, Brave...).
- ✅ Firefox for Android.
- 😕 Firefox desktop via an extension (opens in a new tab).
- 😕 Safari on iOS and iPadOS, but with no install prompt support. Users have to click on Share, then Add to home screen, which is a terrible process that you will have to explain to your users (see example below).
- ❌ Browsers other than Safari cannot install PWAs at all on iOS and iPadOS (Note: this is changing! (opens in a new tab) 🎉).
- ❌ Safari and Opera on desktop.
Safari Install Instructions
Here is what I implemented on WebGamer.io (opens in a new tab) to explain how to install a PWA on iOS and iPadOS:
(the red highlights are part of the instructions modal)
With the recent changes (opens in a new tab) to Safari going in the direction of supporting PWAs, I hope that this will just be a temporary workaround and that we will have access to a native install prompt on iOS and iPadOS soon.
The easiest way to publish your PWA to app stores (opens in a new tab) is to use PWABuilder (opens in a new tab), online or via the VSCode extension (opens in a new tab). It's a tool made by Microsoft to publish your existing PWA to app stores like the Apple App Store, Google Play Store, and Microsoft Store. It's free and easy to use, and it will generate all the assets you need for your app store submission. You can also use it to generate a manifest (opens in a new tab) or a service worker (opens in a new tab).
Offline support is required to install a PWA, and that's achieved via service workers. Service workers can get quite complicated and I would recommend leveraging existing libraries instead of doing it yourself. You can use Google's Workbox (opens in a new tab) to help, but an even easier way to get started is to use a library for your bundler:
- vite-plugin-pwa (opens in a new tab)
- @vite-pwa/sveltekit (opens in a new tab) (Svelte)
- @vite-pwa/astro (opens in a new tab)
- @ducanh2912/next-pwa (opens in a new tab) (Fork of next-pwa (opens in a new tab), React)
- next-offline (opens in a new tab) (React)
- gatsby-plugin-offline (opens in a new tab) (React)