# 5th April Report

This is my sixth report of study for internship before go to Taiwan. In here I will explain about Manifest for PWA in order to create native app experience for user with using web app. It is a great component that become one of the reason why PWA has more advantages than native apps, but not like native apps is worse than PWA.

## Summary of this week

- Manifest of PWA is a JSON type file which contains information about the web itself, like icon and name, that can be inform the user to know what is the website does he access.
- More than just a HTML code, manifest work for when the web app must to be added into home screen so the user can access via shortcut rather than type URL in browser.
- For PWA, manifest work more widely because it also has configuration which the user can open the web page with automatically full screen so it becomes more like native apps.
- There is also manifest function with Ionic 4 program which allow the web app to pop up a notification for user to add it into home screen.
- With manifest, PWA can compete native app apple-to-apple where PWA has advantages with no install needed.

---

## Documentation

In here we will discuss about how to code the manifest to our PWA project in order to increase user experience of using it like native app. For information, in "app" thing, manifest is a JSON file which contain sort of the app's information. It has the title, the name, the logo, etc., but not the file itself. This is how manifest.json look:

{
  "name": "Ionic",
  "short_name": "Ionic",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/imgs/logo.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"
}   

- "Name" and "Short Name" is the name of the app which displayed as the app title. It is not required to define both of them so one of them should be defined. If both of them were defined, "short name" will be used.
- Start URL is where the URL is headed when the users first access the app.
- Display is how the app is displayed when the users start to access via shortcut/icon, not from browser.
- Icons, as we can understand, is the icon of the app. To mention that the icon can be defined more than one for more cases. For example: some phones can only using icon 256x256 image so when we defined only upper than that, it may be not loaded because not compatible.
- Background color is the color when the page/app is not fully loaded (usually the CSS file) so it doesn't display as blank, or white color, we can use any color.
- Theme color is the color when the app doesn't using theme color inside the code, this one is optional but it is more suggested be defined.

How do we start to have our manifest in our PWA is by installing angular PWA into our PWA project. Like in the previous report, we can install PWA from Angular using Node JS command line.

`ng add @angular/pwa`

For your information, in order the manifest can work properly in your PWA project it must has:
- Has manifest.json file
- Has service worker, which we can get it from Angular
- Run with HTTPS protocol

We can found our manifest.json file in our PWA Project in If we already have the manifest.json in our `src` folder. If we don't have it, we can create it **in the same directory** and next we import into index.html, or main HTML file.

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/07-01.JPG" alt="img-01">
</center>
</br>

In our HTML, we defined with:

<link rel="manifest" href="manifest.json">

Next, in manifest.json let's start code:

{
  "name": "<defined-your-app-name>",
  "short_name": "<same-as-name-can-be-different>",
  "start_url": "<defined-where-users-start>",
  "display": "<standalone/fullscreen/browser>",
  "icons": [
    {
      "src": "<your-icon-directory-.jpg/png>",
      "sizes": "<pixel-size-of-icon>",
      "type": "image/<jpg/png/x-icon(for .ico)>"
    }
  ],
  "background_color": "<defined-HEX-color>",
  "theme_color": "<defined-HEX-color>"
}   

In here I will using fullscreen display so when it opened it doesn't prompt the browser, hide the toolbar, and user can use the app more like native app. Here is my code for my timer-2 project:

{
  "name": "Simple Timer",
  "short_name": "Simple Timer",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "fullscreen",

  "scope": "/",
  "start_url": "/",
  "icons": [

    {
      "src": "assets/icon/favicon.png",
      "sizes": "512x512",
      "type": "image/png"
    },

    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    }
  ]
}

- I defined a lot of code for icon in order for compatibility with any phone/platform.
- To be honest, when we create with Ionic platform it defines this for us so furthermore we can re-code it.

Build the project and deploy it to our hosting, or Firebase if you use it. Now open it with our phone browser.

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/07-02.png" alt="img-03" style="width:200px">
</center>
</br>

And after we add to home screen, we can check in app menu and find it as an app.

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/07-03.jpg" alt="img-03" style="width:200px">
</center>
</br>

For prevention to browser not compatible yet with Javascript, or the phone itself, we can defined script command in HTML to notify the user.

<noscript>Enable JavaScript to use this application.</noscript>

This is how it look when it opened (spoiler= below this it is a GIF image so maybe it would take time to load, I recommend to use WiFi if your internet quota is low):

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/07-04.gif" alt="img-04" style="width:200px">
</center>
</br>

We can look more feature in manifest.json and how to build it from [Google Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/).

---

## References

- Understanding the Manifest of an Ionic PWA in One Go (https://www.javascripttuts.com/understanding-the-manifest-of-an-ionic-pwa-in-one-go/)
- The Web App Manifest by Developer Google (https://developers.google.com/web/fundamentals/web-app-manifest/)

###### tags: `pre-intern report`