Native-like PWA

Table of Contents

Modern PWAs are very powerful - they can use/do: geolocation, notifications, file system, payment, bluetooth, camera, microphone, etc. See full list here. Plus there is WebAssembly, WebGL, etc.

Introduction #

Let’s assume we want to build native-like PWA for mobile platform that will be on separate domain. We don’t need to take into account desktop. With this approach priorities would be different, than for typical web development.

What is important:

Service workers for offline support
Icon, splash screen, theme color
AppShell
Bottom navigation bar
Support for gestures
Smooth animations
Dark theme

What is not important:

Static side generation (SSG), Server side rendering (SSR). Client side rendering (CSR) is enough.
Search engine optimization, social media optimization.
Routing, like History API. In standalone mode there is no browser UI anyway.

So far so good. But we can go even further. Take a look at typical native application for mobile platform.

they typical support only one orientation (portrait or landscape)
- So we can lock orientation
there is no text selection
- user-select: none; - when people do this on web, it’s annoying
there is no zoom
- <meta content="width=device-width, initial-scale=1, user-scalable=no" /> - this is a bad for accessibility (so don’t do it unless you know what you are doing)
we don’t need overscroll
- overscroll-behavior: none; or position: fixed;
we don’t need other Safari things
- -webkit-tap-highlight-color: transparent; and -webkit-touch-callout: none;

And this is not a full-list.

TodoMVC for PWA #

It would be interesting to create minimal demo application for native-like PWA and implement it using different technologies. The same way as TodoMVC used to showcase different “MVC” frameworks.

For inspiration:

Specification #

In order to do this we need to define specification, similar to this one. It can be something like this:

It should be installable
- it should have webmanifest and all required icons
- it should provide installation instruction for iOS
It should work offline
- It should show at least AppShell when offline
- If no other functionality is available it should show message (something like “You are offline”)
It should provide AppShell
- It should include at least bottom navigation bar (for portrait mode)
It should update automatically
- but it should be unobtrusive
It should support gestures
- For example, ability to swipe left/right to navigate between pages
It should support dark mode
- It should be possible to switch between light and dark mode and it should take into account default system mode

UI framework #

Here are some potential candidates for UI framework for the task:

Name	React	Vue	other	Tailwind-based
Konsta UI	yes	yes	Svetle	yes
daisyUI	yes	yes	Solid, Svetle, Angular, Preact, Elm, Lit	yes
Sancho	yes	no
Framework7	yes	yes	Svetle
Vant	no	yes
Onsen UI	yes	yes	Angular
mobileui	no	yes	Angular, Phaser

Use-gesture and co #

use-gesture and react-spring deserve special mention. They are not UI frameworks, but they can be used to create native-like gestures and animations. See:

React-native-web #

And sepparate place for React Native. It was build to create native mobile applications in first place, so it would cover a lot of requirements out of the box. There is react-native-web, which allows to use React Native on web. And Expo seems to support PWA to some extent. So this is separate list for React Native:

As an alternative to Expo it is possible to use:

Vite

And one more interesting project - tamagui. Which takes the same idea as react-native-web, but does some interesting optimizations, for example:

react-native-web-lite

Known issues #

Be aware that while PWAs are very powerful, there are still some issues. For example:

Other resources #

Asset generators:

Metadata:

PWA examples: