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.
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.