TL;DR Responsive, Safari annoyances disabled on mobile, all-vector, system fonts, manifest and mobile icons, splash screens, great CI/CD, service worker.

What is PWA?

What are Progressive Web Applications? Let’s google it together:

Progressive Web Apps are user experiences that have the reach of the web, and are:

• Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging — Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Technically, PWA is a website with manifest. Technically. But conceptually, there’s much more:

PWA is the only way to appear on mobile device’s home screen without being censored by the platform’s app store, completely for free.

PWA means freedom.

Today we’ll be reviewing a tips and tricks to make your PWA better.

The list

Responsiveness

I’d posted an article about PWA responsiveness and how it differ from responsiveness on the desktop. Well, let’s see:

• Viewport. Stick with responsive viewport:

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

• PWA should never scroll horizontally unless it’s not absolutely necessary. Make sure you’re using box-sizing: border-box. I suggest sticking with Modern Normalize.
• It’ll be great to omit setting width or height completely. Web is responsive by default, and by limiting width or height, chances are your layout will break.
• I personally suggest 320px as the minimum width to stick to. Your app should nicely fit inside that width.

Feel

• Almost all native apps use native fonts. They have two major advantages: they load instantly regardless of the internet connection and your users are already used to them. So, it’s recommended to stick to system fonts with a special font stack.
• Forget about raster graphics. When it comes to UI elements such as icons, buttons and labels, stick to SVG. There are tons of free icons around at Icons8, to [icon] and The Noun Project. There are also colorable SVG illustrations accessible for free at Undraw and Ouch by Icons8.
• Keep your app small. It will load faster. Use the Source Map Explorer to spot heavy dependencies and replace them with lighter ones.

Mobile quirks

It’s better to tell mobile devices from desktop ones programatically.

We need this to apply some mobile-exclusive CSS, especially on Apple devices where selecting text may significantly degrade the UX.

Disable text selection

Native apps doesn’t allow text selection, so mobile PWAs shouldn’t. Text selection on mobile tends to drag focus away, so your UX may degrade.

button {
   user-select: none;
}

Do not disable text selection on meaningful, context-aware things like text inputs and paragraphs. Only disable it for UI elements such as buttons and controls.

I repeat, do NOT disable text selection everywhere meaninglessly!

Disable highlighting

On Safari for iOS, interactive elements are dimmed when you touch them. Disable it:

body {
   -webkit-tap-highlight-color: transparent;
}

Disable callouts

You don’t need anything to splash on top of your app. It’s useful at content websites, but in PWAs when you may’ve defined a custom behaviour for a long press, default callouts should be disabled.

body {
   -webkit-touch-callout: none;
}

Scrolling

When using overflow: auto, iOS Safari will be scrolling it shabby and awful. Set overflow to scroll and use this on every scrollable element:

-webkit-overflow-scrolling: touch;

Pull-to-Refresh

Chrome on Android will update the page when you pull it past its top edge. There’s a way to disable it.

Be careful: desktop users are used to selecting text with a mouse and it doesn’t break the UX, so don’t forbid them to.

Manifest and Icons

The crucial part. You always can dig into standards and write manifest by hand, but I suggest you to use Real Favicon Generator to generate both mobile icons and app manifest. It also generates meta tags for your head.

Make sure you filled the crucial fields:

• short_name
• name
• display – use standalone
• icons

In Chrome, you can check your manifest at Application -> Manifest in Dev Tools.

Splash Screens

On iOS, PWAs start with splash screens. Long story short, use Appscope Splash Screen Generator to generate them easily.

CI/CD

Imagine that you push your changes to GitHub and your app builds and deploys automatically. To achieve this, I suggest Netlify as the best free hosting for static PWAs.

Netlify has GitHub Pages and surge.sh as competitors, but none of them allow building your website for you. If you’re using GitHub Pages or surge.sh, you have to build your website by yourself.

When using Netlify, you just push your changes to the repository straight from your IDE and that’s it, it would be built and deployed in no time, for free. By convention, Netlify just executes npm run build and serves the build folder since build is finished.

Service Worker

To work offline, your app needs a service worker. It’s already there if you’re using Create React App, or you can build your own with PWA Builder.

For PWA inspiration, visit pwa.rocks.

That’s it! Go build something amazing!

P.S.

I’ve recently launched Rhittm – a tool to boost your Instagram popularity with insights like when it’s better to post and what hashtags to use. It’s free for everyone, no need to register! It doesn’t share or even store your data because it has no backend. Check it out!