Menu
Menu Sheet Overlay
Search
Search Sheet

PWA Patterns

Progressive Web Apps (PWAs) bring app-like experiences to the web. Through PWAs, Mobify aims to create fast, fluid, frictionless mobile experiences that look and feel the same as a native app.

What makes an app-like experience?

Built into the core functionality of a PWA are techniques that make browsing feel 'native'. Instant page transitions and offline caching mean content is loaded quickly on low or no connectivity, without the feeling that a new page is loading each time.

It is up to the designer to build on these capabilities to communicate a feeling of fluidity and high performance.

Designing app-like experiences

Perceived performance

Good use of page skeletons and loading animations can create a perception of high performance for the shopper, helping to close the gap between loading content and browsing.

Page skeletons
Page skeletons that appear for a short time instead of a blank screen or loading animation are proven to make the page appear to load faster.

Read this article to learn more about perceived performance best practices.

Smooth transitions and user feedback

Interactions that are responsive to a user's gesture are synonymous with apps. Swiping to open or close menus, tap states that react instantly to touch, and smooth scroll effects are just a few examples of these responsive interactions.

Smooth scrolling
Lancome utlizes a smooth scrolling effect as images are loaded into the page.

Offline mode feedback

Mobify PWAs allow the user to view previously-loaded content while offline, which means that shoppers can continue browsing, even if their network connection becomes limited. Designers should craft the UI elements that will help communicate this state. These can include banners, 'retry connection' buttons, and the use of grayscale on links to pages with no previously loaded content to show they are unavailable offline.

Offline Feedback
Merlin's Potions (the Mobify SDK scaffold) offers clear feedback when user is offline.

Add to home screen

Shoppers can add PWAs to their home screen if they're using a supported device. This makes the PWA behave like a native app: they will be able to access the PWA in their app launcher, device settings and task switcher. To encourage this app-like behavior, designers should include an app icon in every PWA project. It's also ideal to explore alternative navigation patterns for users loading an app from this view, due to the loss of the Back and Share buttons previously found in the browser chromes.

Add to homescreen
An example of the add to homescreen prompt on Merlin's Potions (the Mobify SDK scaffold) and the app launched in full screen mode.

Tap targets

In terms of navigation, home pages with large category tap targets provide user-friendly jumping off points for the shopper, as opposed to the 'web-like' approach of nesting everything in a navigation drawer. Below are a few examples of different ways you can arrange large tap targets:

Exposed navigation
Merlin's Potions (big list items), Pure Formulas (category grid) and Lancome (navigation reel) are examples of alternative approaches to the 'hamburger' menu when asking the shopper to begin browsing.

Contextual footers

While desktop sites often contain global footers with social media links, newsletter signups and privacy statements, this type of content is best left off your PWA app footer. Global footers that contain lots of non-contextual content and links clutter up the small screen, and interfere with the user's current task. In the PWA environment, designers are encouraged to reposition this content into areas where the shopper is more likely to engage with it:

  • Offer newsletter or push notification signups on the PDP when items are out of stock, or after a user has made a purchase.
  • Place company-related links (for example, Careers, or About us) into the main menu.
  • Include any social media links in this area of the main navigation, away from the core task of browsing products.
Rich navigation drawer
Lancome's navigation drawer is rich with customer service links, links to external blogs and language switchers in order to keep the footer as minimal as possible.

Read this article to learn more about footer design best practices.

Continuous Login

Logging out of a user account on a native app is not a common task, so it can be presented lower in the visual hierarchy. Cookie length is defined on the client side, however, designers are encouraged to communicate the need for extended cookies to the client in order to provide a continuous login to mobile shoppers.

Rule of thumb

These examples are just a few ways to create an app-like experience. In general, always consider how your shopper's behavior would occur in a native app, and adjust the web experience accordingly.