Are you working on PWA? Here are some tips to make your PWA more Native using JavaScript and CSS.

1. Set an empty title for the PWA Standalone mode.

The Title of a web page plays an important role in browser access scenarios, especially when multiple tabs are opened. You can quickly distinguish different web pages according to the Title. On the other hand, smart web developers often put appropriate information in Title to benefit SEO.

When the PWA is in standalone mode, the Title may be less important as it has its own standalone window, separate launcher icon, and so on. Therefore, in order to make it cleaner and closer to Native App, a concise title can be set when accessing this mode alone, or even no title can be set to reduce the interference of text elements on the page.

const mqStandAlone = '(display-mode: standalone)'

// Check this page is running in pwa mode
if (navigator.standalone || window.matchMedia(mqStandAlone)) {
  document.title = ' '
}
Copy the code

Navigator. Standalone detects whether a web page is running in standalone mode, which is supported only on the iOS Safari browser. For details, see: Navigator. Standalone MDN

2. Run the display-mode command to set the PWA-specific style.

For example, set a rounded corner like this to make the browser Title area more integrated with the navigation section of the web page. In browser mode, the rounded corners are not required to avoid the disappearance of dents when they meet the edges of the browser.

<meta name="theme-color" content="#f5f5f5" />

<style>
nav {
  background-color: #f5f5f5;
}
main {
  backgrround-color: #fff;
}

@media all and (display-mode: standalone) {
  main {
    border-top-left-radius : 12px; }}</style>

<body>
  <nav></nav>
  <main></main>
</body>
Copy the code

Note also that we use theme-color to set the background color for the browser status bar.

3. Set to cancel scroll overflow to avoid the gap caused by scrolling to the top.

After setting up tip 2, we found that when scrolling to the top or bottom of the page, the browser’s default scroll overflow behavior caused a gap in our page. We can avoid this by using the following setting.

body {
  overscroll-behavior-y: none;
}
Copy the code

4. Set the mouse pointer to default to disable user selection.

This technique is especially useful when the page is full of menus and buttons rather than jump links. Also avoid frequent mouse pointer jumping between the default and point states.

*, a.button {
  cursor: default;
  user-select: none;
}
Copy the code

Some netizens think this is a bit extreme, but it only makes it closer to Native apps. Websites are blurring the boundaries between buttons and links. In general, buttons will have strong UI features, and links will look weak from a static view compared to buttons.

After this setting, we can set cursor: point separately for the links that need to jump to the page.

5. Set separate app ICONS for different systems.

For example, if the PWA is accessed in independent application mode, set a BigSure icon on the Mac, and use the universal icon on the browser. Here’s a brief introduction to doing just that.

We need two separate manifest.json files, one for general configuration and one for Mac.

First, remove the manifest link’s href attribute from the HTML page

<link rel="manifest" id="manifest" />
Copy the code

Then, JavaScript is used to check for Mac, and the href is set based on the result.

const setManifest = () = > {
  const isMacOS = /Mac OS X/.test(navigator.userAgent)
  document.querySelector('#manifest').setAttribute('href', isMacOS ? '/manifest-mac.json' : '/manifest.json')}Copy the code

Corresponding file:

// manifest.json
{
  "short_name": "YourProductName"."name": "YourProductName"."description": "Your information"."icons": [{"src": "/icon/android-icon-192*192.png"."sizes": "192 * 192"."type": "image/png"
    },
    {
      "src": "/icon/android-icon-512*512.png"."sizes": "512 * 512"."type": "image/png"}}]// manifest-mac.json
{
  "short_name": "YourProductName"."name": "YourProductName"."description": "Your information"."icons": [{"src": "/icon/mac-icon.png"."sizes": "192 * 192"."type": "image/png"]}},Copy the code

Well, that’s all I want to share this time, hoping to help you deal with the details of PWA development better.

This article was first published in: 5 Tips to Make PWA More Like Native App – Island Heart Hey