Healthy Grains Calculator App
How do I create a PWA from my website: https://drmick.com/Grain_Calculator.html
To turn your website into a Progressive Web App (PWA), you need to add three main components: a Web App Manifest, a Service Worker, and App Icons.
Since your site is a single-page HTML file, this process is very straightforward.
1. Create the Web App Manifest
Create a file named manifest.json in your root directory. This tells the phone how the app should look (colors, name, etc.).
+1
JSON
{
"name": "Healthy Grains Calculator",
"short_name": "GrainCalc",
"description": "Evaluate grain-based foods using scientific nutritional criteria.",
"start_url": "/Grain_Calculator.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2e7d32",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
2. Create the Service Worker
Create a file named sw.js in your root directory. This is what allows the app to work offline by caching your HTML file.
JavaScript
const CACHE_NAME = 'grain-calc-v1';
const ASSETS = [
'/Grain_Calculator.html',
'/manifest.json',
'/icon-192.png',
'/icon-512.png'
];
// Install the service worker and cache files
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
);
});
// Serve files from cache when offline
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
3. Update your HTML
Add these lines inside the section of your Grain_Calculator.html file to link the manifest and register the service worker.
HTML
4. Generate Icons
You need two square PNG icons (192x192px and 512x512px).
You can use a free tool like PWABuilder’s Image Generator to create all the necessary sizes from a single image: https://www.pwabuilder.com/imageGenerator
5. Requirements for Installation
For the "Install App" prompt to appear on users' phones:
HTTPS: Your site must be served over a secure connection (SSL).
Icons: You must have at least the 192px and 512px icons defined.
Manifest: The display must be set to standalone or fullscreen.
Once these files are uploaded to drmick.com, visiting the site on Chrome (Android) or Safari (iOS) will allow users to "Add to Home Screen," and it will function as a standalone app.