loading...
Cover image for PWA Checklist 2019

PWA Checklist 2019

uyouthe profile image Miloslav Voloskov Updated on ・5 min read

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:

<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!

Posted on Feb 17 '19 by:

uyouthe profile

Miloslav Voloskov

@uyouthe

🏳️‍🌈Declarative logic for masses

Discussion

markdown guide
 

"Native apps doesn't allow text selection, so mobile PWAs shouldn't." I'm sorry, what?!? I saw there's other people disagreeing as well, but I think it's worth disagreeing... again. :) On top of that there are plenty of great use-cases for text selection and highlighting, especially in education oriented apps.

This... "Native apps doesn't allow text selection, so mobile PWAs shouldn't." is an overly sweeping statement, and I'd be careful with those. :)

Otherwise great article!

 

I'm sorry but I think that all mobile apps and PWAs SHOULD allow text selection, and I'm stating this explicitly.

Only the meaningful text should be selectable tho – there is no need to select the button text or something like that. Article text or message are the entirely different story – disallowing selection there is a bad practice.

 

That's true and I agree, only content should be selectable in terms of text. I thought you meant disabling it all over the place. Good to know we're on the same page! :)

Edited the article. You're right – my initial explanation is pretty unclear. Thanks again

 

Thank you for this. I am in the process of creating my CV as a PWA, so I will use some of you points mentioned here as good practices.

 

Be careful. PWA is meant to enhance a device's features. It's meant to be used on daily basis, just like every other app. I personally think that PWA could be just amazing for your blog, but not for CV.

For presenting content, regular websites are best because they was meant for it.

CV is basically just a piece of paper. CVs are often printed and presented like that. What app-specific features are you planning to implement?

 

I am in the process of getting myself back to the web development. The last three years I am working with something completely independent from web, that I have started missing front end part. Now because of that, I thought to start simple and create my CV as PWA (because it's simple 'project'), just for representative purposes, and afterwards to convert my website/blog to a PWA.

That’s nice. But you might want to omit service worker completely because if you don’t, your content will cache and your visitors may be stuck with an outdated version of your cv.

Well thought! We'll see how it goes :)

 

CV, I didnt think of this use case for a PWA. What a good idea.

 

Nice write-up, I believe disabling text selection would impact accessibility, it’s not true that all native apps disable text selection

 

Yes, browsers being native apps don’t. It’s an opinionated aspect, but when you select text on mobile, it forcefully scrolls to the selection, and your whole UX or animations could break.

 

Respectfully, which mobile browser force scrolls when you select text? On iOS for example the only time force scroll happens is when inputs are focussed. There is a strong business case for accessibility w3.org/WAI/business-case. Fluid animation is achievable with many front-end frameworks for example PopMotion Pose that wouldn't break with scrolling. If visual styling is the issue you can also style the text-highlight colour, or remove text selection for certain elements (not the whole body, or even create your own text selection or sharing interface Medium.com style

Safari on iOS.

Yes, you're right about removing selections not for the body ,but I still think that mobile user don't really need to select any text of your interface. For example, if you're building Twitter, enable text selection only for tweets.

Yes that's a nice solution, this way there's still some accessibility, it's worth mentioning that when viewing an individual post on Twitter text selection is allowed

 

...and that's where you start having fun overriding the contextmenu

 

Hello Miloslav, thanks for the sharing this article.

Greetings from Mexico.