# How to make a (working!) Progressive Web App! **URL:** \ **Category:** Community Guides\ **Created:** [November 12, 2025, 10:19am UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505 "2025-11-12T10:19:04Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![Jri-Creator](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/jri-creator/32/65654_2.png) [@Jri-Creator](https://forum.infinityfree.com/u/Jri-Creator)\ **Post date:** [November 12, 2025, 10:19am UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505/1 "2025-11-12T10:19:05Z")

Have you thought about making your site an app? You probably don’t want to deal with Java/Kotlin or Applescript to make an app for your users, but you want to get that sweet-sweet-beautiful program on your site to work outside of that clumsy browser. Well, there is a way! If you want to make your site an app, you can make a Progressive Web App! ### Wait, what’s a Progressive Web App? A Progressive Web App (PWA) is a website that works like a mobile app on your phone or tablet. You can install it directly from your web browser without going through an app store, and it will appear on your home screen just like a regular app. PWAs work even when you have a slow internet connection, sending you notifications and loading quickly because they store some data on your device. They’re built using standard web technologies but feel smooth and responsive, almost indistinguishable from native apps. Best of all, one PWA works across all your devices—iPhone, Android, laptop, or desktop—without needing separate versions for each platform. ### Wow, that’s cool! I want to make my site a PWA, how do I do that? Here’s what you’re going to need: 1. Your site code (you already got this, but if you don’t, you can ask an AI to make one.) 2. `service-worker.js` code, in the root of the site/page you want as a PWA 3. `manifest.json` code 4. Two `png` files for the app logo - `icon-192.png` (192px by 192px) and 2. `icon-512.png` (512px by 512px) 5. An HTTPS connection This tutorial will provide you with the basics you need to start your own PWA. > Please note: This tutorial will provide the basics to PWA, but you may need to research or use a helper to make it suit your needs. If all you want to do is make a static page, this tutorial will cover that. > Also, due to the Security System, the PWA will need Internet Access sometimes. When the Security System’s cookie expires, the servers have to issue a new cookie. * * * ## Step 1: Prepare your site code Your site’s `HTML` or `PHP` file needs to contain: 1. ```auto ``` 2. `manifest.json`, but there’s a catch I’m going to have to tell you about shortly. #### Where do I put it? The ` ``` #### Now, about the `manifest.json` thing. Unfortunately, due to the Browser Security System, you can’t just copy/paste `manifest.json` into its respective file. If you do, you’ll get this when it loads: ![Screenshot 2025-11-01 at 6.21.14 PM](https://forum-cdn.infinityfree.net/original/3X/f/2/f23113465fee0d2d43c7a28b5c2bda04baf85b78.png) That’s the Security System. **But wait!** There’s still a way to get your `manifest` to load! You have to put a JS script in the `` of your code! This code will generate the `manifest.json` in a blob, and your browser will find it. You’ve got to add this in **(after modifying placeholders)**: ```auto ``` After adding and modifying all of that, you’ll get something like: > **Click to expand** > > ```auto > > > > > > > > > > > > > >

Hello World

> > > > > > ``` Your site code is prepared for a PWA, but now you’ve got to add the rest! ## Step 2: Add `service-worker.js` The service worker helps tell the browser what to cache, load and do. This `service-worker.js` is a basic one, but for this tutorial it works. Here’s what you need to add to a new `service-worker.js` file **(after modifying placeholders)**: ```auto const CACHE_NAME = '[cache-name, like hello-world-v1]'; const urlsToCache = [ '/', '/[your site's main file, index.html/index.php/what ever it is]' [whatever else you need to cache, like CSS files, JS files, .html or .php files (Make sure to add a comma before adding a new entry!)] ]; // Install event - cache files self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); // Fetch event - serve from cache when offline self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); }); ``` > **Example** > > ```auto > const cacheme = 'hi-v1'; > const urlsToCache = [ > '/', > '/index.html' > ]; > > // Install event - cache files > self.addEventListener('install', event => { > event.waitUntil( > caches.open(cacheme) > .then(cache => cache.addAll(urlsToCache)) > ); > }); > > // Fetch event - serve from cache when offline > self.addEventListener('fetch', event => { > event.respondWith( > caches.match(event.request) > .then(response => response || fetch(event.request)) > ); > }); > > ``` ## Step 3: Prep the `png`s What you are going to need: 1. `icon-192.png` (192px by 192px) 2. `icon-512.png` (512px by 512px) If you need an image editor to make these, I recommend [Kleki](https://kleki.com/). Kleki is made to run in the browser, it’s open source, and it’s easy to use. If you need some `png`s, here are the sized ones for testing (click on them, then hit Download): > **Click to expand** > > ![icon-512](https://forum-cdn.infinityfree.net/original/3X/c/9/c9c035396b07d6e7b5c77f9d9825fa6b67424fb1.png) > ![icon-192](https://forum-cdn.infinityfree.net/original/3X/6/2/624946b3a514c67ea6667427b4f93e1008bae059.png) ## Step 4: Test your PWA If everything works out, you should see an icon like this in your toolbar: ![Screenshot 2025-11-01 at 8.31.58 PM](https://forum-cdn.infinityfree.net/original/3X/a/8/a81e110a1315e60b3187ed4a7304d81d165825be.png) When clicked, you should see something like: ![2025_11_01_0ya_Kleki](https://forum-cdn.infinityfree.net/original/3X/e/2/e28cafdb0fc8ce88a42c323523925721c84e7d18.png) When installed, you should see something like: ![2025_11_01_0yd_Kleki](https://forum-cdn.infinityfree.net/original/3X/9/a/9afe467250f9b95e1f2e5953cb378fa088a9251c.jpeg) For app icon: ![2025_11_01_0ye_Kleki](https://forum-cdn.infinityfree.net/original/3X/2/a/2af60fed8a0fa5398f21b29148b0f665d23ffae1.png) If this all worked out: # Congrats! You just made a PWA! You can now brag about your site being an app, and enjoy the app-like experience! If any issues arise **related to this PWA tutorial** , comment below. **All other questions should be sent to either** #Hosting Support **or** #Informal. Thanks for following this tutorial! If it worked out for you, give it a ❤! ---

**Author:** ![Gavin12342](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/gavin12342/32/64730_2.png) [@Gavin12342](https://forum.infinityfree.com/u/Gavin12342)\ **Post date:** [March 3, 2026, 1:54pm UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505/2 "2026-03-03T13:54:57Z")

Five Stars ⭐⭐⭐⭐⭐ ---

**Author:** ![Jri-Creator](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/jri-creator/32/65654_2.png) [@Jri-Creator](https://forum.infinityfree.com/u/Jri-Creator)\ **Post date:** [March 3, 2026, 6:42pm UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505/3 "2026-03-03T18:42:50Z")

Can you please explain your situation further? ---

**Author:** ![Gavin12342](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/gavin12342/32/64730_2.png) [@Gavin12342](https://forum.infinityfree.com/u/Gavin12342)\ **Post date:** [March 3, 2026, 6:46pm UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505/4 "2026-03-03T18:46:39Z")

Sorry, I forgot to update that. It turned out I made the file with the name ’ service-worker.js’ (With a space) and not ‘service-worker.js’ (Without the space). ---

**Author:** ![lovebug](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/lovebug/32/57624_2.png) [@lovebug](https://forum.infinityfree.com/u/lovebug)\ **Post date:** [March 4, 2026, 8:18am UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505/5 "2026-03-04T08:18:39Z")

I have yet to try this amazing tutorial but would like to say well done ⭐⭐⭐⭐⭐ ---

**Author:** ![Jakoyy](https://forum.infinityfree.com/letter_avatar/jakoyy/32/6_22734026db12803ebb3e059622ac3534.png) [@Jakoyy](https://forum.infinityfree.com/u/Jakoyy)\ **Post date:** [August 26, 2026, 1:11am UTC](https://forum.infinityfree.com/t/how-to-make-a-working-progressive-web-app/116505/7 "2026-08-26T01:11:36Z")

WOWWWW this work for my site! Thanks a Lot for the tutorial, Mate👀✨😎