Progressive web app (PWA) Mistakes and Enhancements
Tags: frontend, design, pwa
Published: 2022-02-05 18:44:43

In this article, we will show some mistakes that developers do in their PWA manifests and some tips to enhance your PWA through enhancing your manifest. 

Before I start, let's have a moment to explain some important definitions.

---
### Definitions 
**PWA** (Progressive Web App): according to [web.dev](https://web.dev/what-are-pwas/)

> Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application.

So, PWA seems like a native app for mobile and desktop platforms but it runs in browsers capabilities. 

**Manifest**: is the backbone for your PWA. It is a JSON file that includes some basic info and some necessary resources for your app. 

After understanding these definitions,  we are ready to start our article. 

---

## Mistakes most developers do in their manifests:

1. **Icons property**: In your manifest, you can set a list of your app icon so when the user installs your app, he/she can see the app icon in the os launcher as any native app. **However**, this property does not work in IOS devices 😱

**How to solve this issue ?** 
you can define the icons on your html `head` like this 
```html
<link rel="apple-touch-icon" sizes="180x180" href="yourIcon.png">
```

2. **Display property**: you can set how your app will look like when it is open through using this property. It can have a value from `fullscreen`, `standalone` `minimal-ui` or `browser`. **However**, Some developers forget about the notch when they set `fullscreen` value so the content is trimmed from above and their app appears like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfoft0a7d1tl6zcigklm.png)

**The Solution:**
You can use [SafeAreaView](https://reactnative.dev/docs/safeareaview#:~:text=The%20purpose%20of,on%20iPhone%2013) and  set some padding to your app through CSS.  like this 

```css
 padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
```

but first, you need to take the permission to use these values. 
So in your head tag, you should place these tags.

```html
<head>
  <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width"></meta>
  <meta name="apple-mobile-web-app-capable" content="yes"></meta>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>
</head>
```

![Alt Text](https://media.giphy.com/media/6j9Bqkv3r4NjcAIppe/giphy.gif) 

---- 
## How to enhance your manifest?

1. **short-name property:** In your manifest, you can set a `name` for your PWA but what if the OS does not have enough space to display the name? 
yes, you guess it right, the `short-name` will be displayed. 

What will happen if I don't set the `short-name` prop? 
if your app name is long, it will be trimmed like this 👇 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp4k6s1ibw3rlvtoacig.png)

2. **Add screenshots to your app installation:**  When you prompt a modal to ask the user to install your PWA using [beforeInstallPrompt](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent) event, You can add some screenshots from your app to attract the user to install it. 

it will look like this 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u665whueq5qen798us3h.png)

and here is a snapshot from the Twitter manifest. 

```json
 "screenshots":[
      {
         "src":"https://abs.twimg.com/responsive-web/client-web/twitter-lite-data-saver-marketing.68059865.png",
         "sizes":"586x1041",
         "type":"image/png"
      },
      {
         "src":"https://abs.twimg.com/responsive-web/client-web/twitter-lite-explore-marketing.fd45b025.png",
         "sizes":"586x1041",
         "type":"image/png"
      },
	  ],
```


Finally, you should consider manifest props limitations and consider enhancing user experience to attract him/her to install your app

![](https://media.giphy.com/media/3o6Mbnll2gudglC3HG/giphy.gif)