What's PWA?

It stands for "Progressive Web App" meaning you are saving your website as a bookmarked web-app, which saves your position just like a real app.

But wait won't this make just a web-shortcut?

This is a misconception, it doesn't create a web shortcut, instead, it makes a standalone "bookmark/web app" that can be configured to work offline.

How to add the PWA (You can try with my site!)

What's the point?

Well, you don't have to upload it as an app to the app store, while having basically the same benefits as an app, with the remainder of it because it's on the person's homescreen.

How do I add it?

Add the following into the head of your site (Add the bg-color and image)

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
<meta name="theme-color" content="#FFF">
<link rel="apple-touch-icon" sizes="180x180" href="Add your app icon">

Add this to a ".json" file, make (change the name, image, URL, and color)

{
  "short_name": "Name",
  "name": "Name",
  "icons": [{
    "src": "Add your app icon",
    "sizes": "192x192",
    "type": "image/png"},
    {
    "src": "Add your app icon",
    "sizes": "512x512",
    "type": "image/png"}
  ],
  "start_url": "https://example.com",
  "background_color": "#141414",
  "theme_color": "#141414",
  "display": "standalone",
  "orientation": "portrait"
}

Paste the ".json" file link...

<link rel="manifest" href="Add .json file link"/>

Small aditions to make it more app like!

Configuring the status bar...

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

default white status bar with black text and symbols.
black black status bar and black text and symbols, making it appear completely black.
black-translucent white text and symbols, and the status bar will take the same background color as the body element of your web app.

Adding a splash (loading) screen...

<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">

Use this splash screen genorator: https://appsco.pe/developer/splash-screens

Disable selection, highlighting, and callouts

Disable scrolling

body {
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
}

Disable callouts

body {
   -webkit-touch-callout: none;
}

Enable tap effects

<body ontouchstart=””>

Inspiration from appscope.

Make your site into a Progressive Web App