Ready-made customisable prompt for creating a working PWA application using Claude.ai.
This prompt is needed for Claude to assemble a ready-made PWA application for your offer. It is simply a template and demonstration of the possibilities of creating a PWA using AI. The application does not have push notifications (easy to add) or statistics (also not difficult) — in short, it is a base that needs to be customized.
Claude is an AI assistant from Anthropic. It can write and edit texts, analyse large documents and data, assist with programming, and solve everyday work tasks.
For more information on what PWAs are and how they are used in traffic arbitrage, read here: https://cpa.rip/blogs/custom-pwa/.
Copy this ready-made prompt to create a PWA application:
Pwa prompt english · MDCopyPWA Traffic Arbitrage — Compact Prompt
PARAMETERS
APP_NAME : Generate randomly
SHORT_NAME : Generate randomly
DEVELOPER : SkyNet Entertainment Ltd.
CATEGORY : Casino · Games
LANGUAGE : es
AFFILIATE_LINK : link
RATING : 4.8 | REVIEWS: 12K | DOWNLOADS: 500K+
SIZE : 4.2 MB | AGE: 18+
SPLASH_SECONDS : 10
SCREENSHOT_COUNT: 3
DESCRIPTION: …
REVIEWS (name / date / text):
1: Generate randomly / Generate randomly / Generate randomly
2: Generate randomly / Generate randomly / Generate randomly 🎡
3: Generate randomly / Generate randomly / Generate randomly
SCREENSHOTS (theme / emoji / bg-color / badge):
1: Slots / 🎰 / dark purple / "⭐ TOP"
2: Bonus / 🎁 / dark green / "🎁 Bonus"
3: Jackpot / 💸 / dark orange / "💸 Jackpot"
ZIP CONTENTS (all files in root, no subfolders)
index.html, app.html, manifest.json, sw.js,
icon-192.png, icon-512.png,
screenshot1.png … screenshot{SCREENSHOT_COUNT}.png
index.html
First lines immediately after <meta charset>:
html<script>
if (window.matchMedia("(display-mode:standalone)").matches || navigator.standalone)
{ document.documentElement.style.cssText="background:#fff;visibility:hidden";
window.location.replace("./app.html"); }
</script>
<style>body{visibility:hidden}html.ready body{visibility:visible}</style>
Page sections (Google Play style):
Sticky header — Google Play logo (4-color SVG) + search/profile icons
App block — 80×80px icon, app name, developer, category, badges
Statistics — star rating ★, downloads, editor's choice medal, age rating
Install button — color #01875f, 100% width, height 40px, border-radius 8px
Progress bar — below the button, hidden by default
Screenshot carousel — 130×230px thumbnails, border-radius 10px, horizontal scroll; show only screenshot1…N
Description — with "More ▾" toggle
Reviews — avatar (first letter), name, date, stars, text
Info grid 2×2 — size / Android version / downloads / developer
Fixed bottom bar — icon + app name + button
Button logic (in-memory variables only, ⛔ no localStorage/cookies):
jsvar deferredPrompt = null, installed = false, animationPlayed = false;
addEventListener('beforeinstallprompt', e => { e.preventDefault(); deferredPrompt = e; });
addEventListener('appinstalled', () => {
if (animationPlayed) return;
installed = true; deferredPrompt = null;
runInstallAnimation(() => setOpenState());
});
// On "Install" button click:
// • deferredPrompt exists → prompt() → accepted: run animation → setOpenState; dismissed: restore "Install" label
// • no prompt + iOS → show modal with Safari instruction
// • no prompt + not iOS → wait 4s → prompt()
runInstallAnimation(callback):
jsfunction runInstallAnimation(cb) {
if (animationPlayed) { cb?.(); return; }
animationPlayed = true;
// button → spinner + "Installing…", bg #e8f5e9, color #01875f
// progress bar steps: [10, 25, 45, 65, 80, 92, 100] with pauses between
// after reaching 100% → wait 500ms → call cb()
}
setOpenState / openApp:
jsfunction setOpenState() {
installed = true; // in-memory only — do NOT write to localStorage
// both buttons (main + bottom bar) → "✓ Open", onclick = openApp
}
function openApp() { window.location.href = './app.html'; }
End of script:
jsdocument.documentElement.classList.add('ready');
if ('serviceWorker' in navigator) navigator.serviceWorker.register('./sw.js');
// + add ripple animation to all buttons
app.html — Splash Screen + Redirect
Splash screen (white background, all content centered):
icon-512.png — 112×112px, border-radius 24px, box-shadow
App name — 26px, font-weight 400, color #202124
Spinner — border-top-color #01875f
Entrance animation: scale(0.75→1) + opacity(0→1), duration 0.5s
Progress bar — position: fixed; bottom: 0, height 3px, color #01875f; fills evenly over SPLASH_SECONDS seconds, jumps to 100% 400ms before the end
Redirect (fires 300ms after page load):
jsvar TARGET = 'AFFILIATE_LINK';
var host = new URL(TARGET).host, path = TARGET.replace(/^https?:\/\/[^/]+/, '');
var intent = 'intent://' + host + path
+ '#Intent;scheme=https;package=com.android.chrome'
+ ';S.browser_fallback_url=' + encodeURIComponent(TARGET) + ';end';
window.location.href = intent;
setTimeout(() => window.location.replace(TARGET), 1500); // fallback for non-Android
manifest.json
json{
"name": "APP_NAME",
"short_name": "SHORT_NAME",
"start_url": "./index.html",
"scope": "./",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#01875f",
"icons": [
{"src":"icon-192.png","sizes":"192x192","type":"image/png","purpose":"any"},
{"src":"icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}
]
}
⛔ Do NOT add a "screenshots" field — Chrome renders them inside the install dialog, which breaks UX.
sw.js
jsconst CACHE = 'app-v1';
const STATIC = [
'./manifest.json', './icon-192.png', './icon-512.png',
...Array.from({ length: SCREENSHOT_COUNT }, (_, i) => `./screenshot${i + 1}.png`)
];
// install → caches.open(CACHE).addAll(STATIC); self.skipWaiting()
// activate → delete old caches; self.clients.claim()
// fetch rules:
// cross-origin request → pass through (do not intercept)
// index.html / app.html / "/"→ network-first; fallback: cache(index.html)
// everything else → cache-first → on miss: fetch → store in cache
Icons (Python Pillow)
icon-192.png — 192×192px
icon-512.png — 512×512px
Background: vertical gradient #1a0a3e → #0d0628
First letter of SHORT_NAME, white, bold, centered
Screenshots (Playwright Chromium)
Generate exactly SCREENSHOT_COUNT files (screenshot1.png … screenshotN.png)
Viewport: 260×460px, save as PNG
Each screenshot structure:
Header — app name + colored badge (from SCREENSHOT_N params)
Center — large emoji ~80px with CSS drop-shadow filter
Bottom panel — background: rgba(0,0,0,0.65) + backdrop-filter: blur; title in #ffd700; description text; 3 decorative emojis; "Play Now" button in #01875f
Set your parameters in the prompt, such as: application name, short name, developer, category, language, affiliate link, rating, number of reviews, number of downloads, application size, age restriction, splash screen display time, and number of screenshots. You can also set your own descriptions, reviews, and screenshots, or leave these parameters to be generated randomly. Leave everything below these parameters unchanged.
Paste the final prompt into Claude and run it.
If permission is requested during the process, grant it.
Download the resulting archive by clicking ‘Download’ or find the files in the project folder if it was previously configured.
Unzip the resulting archive and replace the images with the ones you’ve prepared in advance. It is more convenient to update images by replacing the files in the root folder, keeping the original name and format.
Upload all files to the hosting.
PWA requires HTTPS — without it, beforeinstallprompt will not work and the Install button will not appear.
Be sure to check your PWA for operability before driving traffic!
After testing, you can also modify the application as you see fit.
Then think about where you can use it and how you can take advantage of it! For example, you can create a panel with push notifications and statistics, and so on.
Example of a generated PWA
 |
 |
 |
 |
Download archive: https://drive.google.com/file/d/1yUxHKGMw1x4QiyQ3G8sGNr8TqtHEtMcw/view
Services for creating PWA applications for arbitrage: https://cpa.rip/mobile-app/pwa/
