Skip to main content

Native-like PWA

··

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:

NameReactVueotherTailwind-based
Konsta UIyesyesSvetleyes
daisyUIyesyesSolid, Svetle, Angular, Preact, Elm, Lityes
Sanchoyesno
Framework7yesyesSvetle
Vantnoyes
Onsen UIyesyesAngular
mobileuinoyesAngular, 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:

Metadata:

PWA examples:

Read more: Native-like PWA. Case study: heylinda-app, Server-side UI Components