Guide 🎮 Build Your First PWA Game: Step-by-Step Guide with Monetization Tips

[dood]

Not sure if you’ve noticed, but lately there have been more and more topics mentioning Progressive Web Apps (PWA) and affiliate marketing.

Here are a few examples:

• 23K FTDs and +40% ROI: profitable Mexico campaign with PIN-UP Partners
• How to earn more with these 5 underrated traffic sources
• $1965 profit on Facebook traffic with PWA app and XGames offers

So, what is a Progressive Web App (PWA)?​

A Progressive Web App is a type of website built with standard web tools like HTML, CSS, and JavaScript that works like a native mobile app. PWAs can be installed on your device, work offline, send push notifications, and open directly in your browser without going through an app store.

PWA benefits compared to app store apps​

There are many advantages of using a PWA instead of a native app:

• PWAs work on any device (desktop, mobile, tablet) using one codebase, while native apps need separate versions for iOS and Android.
• PWAs can be installed directly from your browser, without app store approval or downloads.
• PWAs can be found and indexed by search engines, helping improve organic traffic.
• PWAs update automatically in the background, while native apps need manual updates through app stores.
• PWAs use less storage on your device.
• PWAs can work offline with service workers, though they have limited access to device features like the camera or GPS.
• PWAs avoid app store fees and approval rules that native apps must follow.

View the full comparison here.

What can PWAs do?​

If you’re wondering what PWAs can do, there are many websites that show what’s possible with them.

One good example is What PWA Can Do Today (whatpwacando.today), where you can find a long list of supported features.

Here are some of the most common features used in PWA apps today:

• Installation - Progressive Web Apps can be installed to the home screen on mobile devices and desktop on laptops and desktop computers.
• Notifications - The Push API and Notifications API enable web apps to receive and display push notifications from a server, even when the app is in the background or not running at all.
• Geolocation - The Geolocation API enables users to share their location with a web app. Below you will see your current location on a Google Map.
• Media capture - Media capture allows apps to use the camera and microphone of a device. After recording a video you can play it, download it or record another one.
• Barcode and QR code reader - The Barcode Detection API detects barcodes and QR codes in images
• Face detection - The Shape Detection API detects faces and in some browsers also features like eyes, mouth, and nose.
• Bluetooth - The Web Bluetooth API enables apps to connect to Bluetooth Low Energy (BLE) devices and read values from or write values to it.

Examples of popular PWA apps​

Many well-known companies are already using PWAs today!

Starbucks​

Starbucks developed its PWA to increase customer engagement by adding loyalty programs and making the ordering process easier.

The app was designed to replace the old mobile website and provide a better experience on any device.

You can check their PWA here.

AliExpress​

They wanted to combine the best parts of their mobile app with the wide reach of the web. As a result of developing a PWA, conversion rates for new users increased by 104%, and the average number of page views per session doubled.

Trivago​

Trivago’s Progressive Web App uses very little data, making price comparisons across nearly 200 booking sites faster than ever.

It also includes a map for browsing accommodations and real hotel reviews. Users can easily go back to their previous searches, saving both time and bandwidth.

After Trivago launched its PWA, it achieved:

• 150% of an upsurge in user engagement;
• 97% increase in clicks from hotel results to offer pages based on Google’s report;
• 67% of disconnected users return to the site when they are online again.

What about mobile games?​

There are also mobile games available as PWAs. I’ll mention a few examples here as well.

Pacman​

Do you remember this legendary childhood game? It’s back with a modern twist as Pac-Man PWA.Pac-Man isn’t a new game, but now you can play it directly in your browser.

Tower Game​

Tower Game is part strategy and part puzzle. Your goal is to stack blocks and build the tallest tower possible.

As new blocks hang from a crane, tap the screen to drop them onto the tower. If the blocks aren’t lined up well, the tower will start to swing!

2048​

2048 became a hit because of how challenging it is. The popular tile-merging game, now available as a Progressive Web App, runs faster than ever.

Swipe up, down, left, or right to move the numbered tiles. When two tiles with the same number touch, they merge into one with a value equal to their sum.

The goal is to reach the number 2048. It sounds simple, but it’s a real brain workout!

There are also many PWA multiplayer games available, such as Dominoes.

​

Ideas for new PWA apps​

Want to create a new PWA app or game but don’t know where to start? Here are a few ideas to get you started.


A simple space shooter game

The player controls a spaceship flying through space, shooting waves of enemies and avoiding obstacles like asteroids.

Players earn virtual money by destroying enemies, which can be used to upgrade weapons, shields, and ship speed. The game is fast-paced and gets more challenging as you progress through the levels.

Monetization can be added with rewarded ads, letting players earn extra credits or continue after losing. The game can also support offline play and push notifications to keep players engaged.

It’s similar to Tyrian - if you’ve ever played it, you know how addictive it can be (I spent so many hours on this one!).

Trip Planning & Suggestion App

An app that helps users plan trips by suggesting itineraries, hotels, and attractions. It can include affiliate links to booking sites or travel gear, so users can easily book or buy what they need.


Reward-based Shopper & Deal Finder

A shopping or deals app that provides coupons, cashback, and exclusive offers. Users can earn rewards by watching ads or completing surveys, which can then be used for discounts or affiliate gift cards.

But how do I build PWA apps?​

Thanks to AI coding tools like Claude Code, GitHub Copilot, and Cursor, building a PWA app is easier than ever.

There are even plugins that can instantly convert your WordPress website into a Progressive Web App!

Or, you can just rent one…​

There are services like pwa.market that let you easily create a PWA using ready-made templates.

Creating an app with pwa.market takes only a few steps.

STEP 1 - Link domain

Link your domain or take domain provided by PWA.Market in one click

STEP 2 - Choose a design and customize it

Upload your design or choose from pre-made templates. Select the landing page and button colors. Add video snippets and enable PWA split mode. Customize the loading animation.

STEP 3 - Customize application

Add name of app, description, author, rate, category, comments and other parameters.

STEP 4 - Ratings and Reviews

Generate comments using AI or create a list from your own texts.

STEP 5 - Push notifications

Set up push notifications based on schedule and events.

STEP 6 - Set streams and postbacks

Choose GEO, cloak and pre-landing, set postbacks and traffic optimization system.

Their pricing starts from $25 per month for a TRIAL plan:

In case you want to use more PWA apps, you’ll need to upgrade to a more expensive plan, like the LITE plan.

How to monetize your app​

There are many ways to make money from your PWA app or game. Some of the most popular methods include:

• Banner Ads - you can show banners from Google Ads or any other network in your PWA application
• Rewarding Ads - you can ask users to watch a short video and reward them with extra virtual currency or lives in your game
• Push notifications - adding push notifications to your PWA is very similar to adding push notification to your webpage. If you want to send messages to your app users, there are solutions like OneSignal which you can implement.
• Direct Links - adding a direct link is easy. You can for example use Adsterra for that.
• Smartlinks - similar to direct links, you can also add smartlinks in your app.

View the full list here.

How to promote your app​

There are many ways to promote your PWA app and get more installs. You can use pop or push traffic, or run ads on platforms like Facebook. There are also plenty of helpful videos on YouTube, for example:

If you have an account on pwa.market, you can access a detailed guide showing how to create a Facebook Ads campaign for your app.

Setting up postbacks​

If you want to track PWA installations in your tracker, you can do that too. If you plan to promote your app on Facebook, it’s best to use the No-redirect Tracking method, which most trackers support.

I wrote a guide about it, which you can read here:

↪️ How to avoid tracker redirects? (works with Facebook and Google Ads campaigns)

afflift.com

The idea is that you put a landing page pixel in your HTML page. I’ve mentioned before that PWA apps are basically just HTML pages which you can install on your phone. Which means you can add various scripts on your page, and landing page pixel is one of them.

You’ll need to add your PWA URL as a new landing page in your tracker first.

And you’ll have to create an offer, by using the same URL as you did for the landing page. Why? Well, because when you create a new campaign in BeMob you need to provide the Landing page and Offer. But in this case, the visitor will only reach the landing page, and install the PWA from there (there will be no CTA buttons that redirect to “offer”). It’s just to make BeMob happy - so you can finish this step without error.

Once you save the campaign, you’ll see this popup:

Click on the LP Pixel Generator button.

Click on the Landing page name on the left side first. The first thing we need to do here is to copy the Meta Tag between <head> tags on your landing page.

And then you also need to add the Lading Page Pixel code between <head> tags, after the Meta tag code.

Upload your PWA app to a server, and now you can send visitors directly to that landing page URL - and not the Campaign URL that you usually use with the redirect method. If you directly open the URL of the app, you’ll see your visit in BeMob.

With the BeMob tracking code installed, each visitor to your landing page (PWA app) will get a unique Click ID.

You can view visits to your landing page under the Live visits report.

Now, we need a way to grab that ClickID from the BeMob script, and save it to the user device. So, when the visitor installs the application and runs it for the first time, we’ll make the script first a postback (only one, on the first run of the installed app).

If you remember, the script you got from BeMob that you needed to place on the landing page looked something like this:

function bemobCb(params) {
    var t = params.trackingDomain+'/click/';
    var re = new RegExp(t+'?(\\d*)');
    var e = document.querySelectorAll('a[href*="'+t+'"]');
    for (var i = 0; i < e.length; i++) {
        var ex = re.exec(e[i].href);
        if (ex) {
            e[i].href = params.ctaSecureUrl.replace('%%OFFER_NUMBER%%', ex[1] || 1);
        }
    }
}

This code places the click URL-s on your CTA buttons on the landing page. If you have any. Since we are not using CTA buttons to redirect the visitor to the offer page, we can replace that code with something like this:

function bemobCb(params) {
  var clickId = params.clickId;
  localStorage.setItem('clickId', clickId);
}

What this code does is it saves the ClickId value from BeMob to the localStorage system. That way the value of ClickId will be available and accessible to the installed PWA app once the user installs it and runs it for the first time.

And then we add a code like this to the PWA app, which checks is there is a ClickID and if the postback hasn’t been fired yet:

 // PWA install prompt
  let deferredPrompt = null;
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches ||
                       window.navigator.standalone ||
                       document.referrer.includes('android-app://');

 // One-time postback on first run (standalone only)
  try {
    if (isStandalone) {
      const clickId = localStorage.getItem('clickId');
      const postbackFired = localStorage.getItem('postbackFired');   

      if (clickId && !postbackFired) {
        // Construct postback URL with clickId
        const postbackUrl = `https://xxxxx.bemobtracks.com/postback?cid=${encodeURIComponent(clickId)}`;    

        // Use image pixel for reliable tracking (works even with CORS restrictions)
        const img = new Image();
        img.src = postbackUrl;
        img.style.display = 'none';
        document.body.appendChild(img);     

        // Also try fetch as backup
        fetch(postbackUrl, { mode: 'no-cors', cache: 'no-store' }).catch(() => {});

        // Mark postback as fired to prevent future calls
        localStorage.setItem('postbackFired', 'true');
        localStorage.setItem('postbackFiredAt', Date.now().toString());   

        // Clean up image after a moment
        setTimeout(() => {
          if (img.parentNode) {
            document.body.removeChild(img);
          }
        }, 1000);
      }
    }
  } catch (e) {
    console.error('Postback error:', e);
  }

And would you look at that - it really works!

Again, you can read more about that here.

You can apply the same logic if you want to add Facebook Pixel to track app installs in your Facebook Ads campaigns.

And now… a simple guide to building your first PWA game!​

I want to show that building a simple PWA game today is actually pretty easy, especially with free AI coding tools like Cursor. Most of these tools have a free plan with some limits, so you might not finish your app in one day unless you switch to a paid plan.

Using a simple prompt, you can get started quickly and see results almost immediately.

If you need some free graphics for the game, you can always find some on Freepik.

After a few hours of back-and-forth with Cursor, you could end up with a game like this:

Click HERE If you want to DOWNLOAD the game and take a look.

What do you think about PWAs? Will you try building one after reading this?

 

[PeterYang]

Amazing!

 

[RKingsley]

This is wild! Hard not to get "shiny new object" syndrome

 

[VastlySeeds]

There's just too much to learn—24 hours in a day simply isn't enough.

 

[BillyMimba]

wow...what a thread - @dood

 

[Alukard_X]

PWABuilder

Publish your Progressive Web App (PWA) to app stores

pwabuilder.com