Title
PWA Compatible
Subject
Make a Progressive Web Apps (PWA) compatible webpage.
Description
Create a Progressive Web Apps (PWA) compatible webpage by linking a manifest.json. This can be tested via chrome inspecter Lighthouse tool. This can be used to create standalone app-like (webclips) behavior on ios Devices or as an individual Chrome-app on desktops. In ios devices, this also opens up the possibility of setting webpage as single-app kiosk mode using guided mode.
Date
2023-12-28
Creator
YIMENG
Publisher
YIMENG
Text
1. Create manifest.json with following template:
{
"name": "JRVS",
"short_name": "JRVS",
"start_url": "/exhibits",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"description": "JRVS",
"icons": [
{
"src": "/assets/images/logo_192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/logo_512x512",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
2. Link the manifest.json file from above to html header tag in the begining:
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="transparent">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
{
"name": "JRVS",
"short_name": "JRVS",
"start_url": "/exhibits",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"description": "JRVS",
"icons": [
{
"src": "/assets/images/logo_192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/logo_512x512",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
2. Link the manifest.json file from above to html header tag in the begining:
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="transparent">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Original Format
json, html