PWA is the only medium that allows your app to appear on homescreens without any platform censorship. You're not restricted to App Store and Google Play policies.

PWA means freedom.

So let's begin.

Essentials

HTTPS

Make sure that your webapp and all its resources are served via HTTPS.

Responsive viewport

Add a responsive viewport to your head tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

But if you're really sure that your app shouldn't be scalable by users, use this one:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Many modern browsers tend to ignore you trying to prevent users from scaling your website, and to be honest, rightfully so.

PWACSS

Use PWACSS reset. It will disable IOS touch callouts, disable those gray things that appear on IOS when you touch interactive elements, set everything to border-box so it's unlikely that your app will scroll horizontally and ruin the UX, set the system font stack and do other useful things.

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/gh/uyouthe/pwacss/pwacss.min.css>">

320px

As a rule of thumb, make sure your app fits nicely within a width of 320px.

Smooth horizontal scroll

Make sure to add -webkit-overflow-scrolling: touch; to every element with overflow: auto; so it scrolls horizontally nice and smooth.

Manifest and icons

Powered by Fruition