Native-like PWA

stereobooster - Sep 6 '23 - - Dev Community

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)
  • 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:

  1. It should be installable
    • it should have webmanifest and all required icons
    • it should provide installation instruction for iOS
  2. 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")
  3. It should provide AppShell
    • It should include at least bottom navigation bar (for portrait mode)
  4. It should update automatically
    • but it should be unobtrusive
  5. It should support gestures
    • For example, ability to swipe left/right to navigate between pages
  6. 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:

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

Known issues

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

Other resources

Asset generators:

Minimal requirements:

PWA examples:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .