Adding PWA on the Jekyll Site
A progressive web application (PWA), commonly known as a progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices. [wikipedia]
If you want to make your jekyll project a PWA it’s very easy, just add the manifest.json and sw.js files.
The following are examples of manifest.json and sw.js files that I use on this site.
manifest.json
{
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
"name": "Habib Nugroho",
"background_color": "#000",
"theme_color": "#00a880",
"id":"/",
"scope": "/",
"start_url": "/",
"display": "standalone",
"description": "Developer blog sharing ideas and smart solutions to others",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
sw.js (Service Workers)
https://raw.githubusercontent.com/habibimroncn/habibimroncn.github.io/main/sw.js
The data in both files is adjusted to the site you are using.
And to make a manifest icon you can use this site: https://www.simicart.com/manifest-generator.html/