Progresive Web Apps (PWAs) Using EWB

By Erick Engelke
March 21, 2025

Progressive Web Apps are a popular way of creating a downloadable app which is written using HTML5 (HTML + JavaScript).

This article shows how to write a simple one using EWB.

The Result

The final result is an app a user can click (with certain browsers) and they will have what appears to be a standalone app on their "desktop" (although it could be on a phone or other device).

here

On a PC or Mac, visit the site with Chrome or Edge. Chrome displays an install icon next to the star on the URL line, whereas Edge uses words (a little more obvious). install

After you install it, you can run it from the home screen of your browser, or from the start menu or Applicaitons Menu of your OS.

Uninstallation is achieved by running it, and selecting uninstall

uninstall

Running normally shows the main screen, but if the network is disabled, you are considered offline and it displays something like this

offline

Coding it up

Mostly index.html is a web page. This one is written in pure HTML because you need to add a header field. You would have to manually edit the HTML header in the EWB app, and I didn’t want to do that for my example.

The most important part is the Manifest in the header.

<head>
  <title>EWB Minimal PWA</title>

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <link rel="manifest" href="manifest.json" />
  <link rel="icon" href="/e.png" type="image/png" />
</head>

The manifest.json file looks like this. Note my file was stored under /~erick/pwa/, on my server, so I had to change the start_url and scope to reflect that path.

{
  "name": "EWB Minimal PWA",
  "short_name": "EWB PWA Demo",
  "display": "standalone",
  "start_url": "/~erick/pwa/index.html",
  "scope": "/~erick/pwa",
  "theme_color": "#313131",
  "background_color": "#313131",
  "icons": [
    {
      "src": "e.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}

The other (also most important) file is the sw.js file which we load with this bit of code in index.html:

<script type="text/javascript">
    if (navigator.serviceWorker != null) {
      navigator.serviceWorker.register('sw.js')
      .then(function(registration) {
        console.log('Registered events at scope: ', registration.scope);
      });
    }

Looking at sw.js, it manages the local file store to identical to the network version of files. That allows the PWA to work as a standalone (ish) app.

You don’t need to understand much of sw.js, I’ll point out what you need:

console.log('Script loaded!')
// IMPORTANT - this is the version number
var cacheStorageKey = 'minimal-ewb-pwa-8'

// IMPORANT: have a list of files needed locally
var cacheList = [
  "index.html",
  "e.png",
  "pwa.html",  // EWB app
  "pwa.js",    // EWB app's javascript
  "pwa-fonts.png"
]


self.addEventListener('install', function(e) {
  console.log('Cache event!')
  e.waitUntil(
    caches.open(cacheStorageKey).then(function(cache) {
      console.log('Adding to Cache:', cacheList)
      return cache.addAll(cacheList)
    }).then(function() {
      console.log('Skip waiting!')
      return self.skipWaiting()
    })
  )
})

self.addEventListener('activate', function(e) {
  console.log('Activate event')
  e.waitUntil(
    Promise.all(
      caches.keys().then(cacheNames => {
        return cacheNames.map(name => {
          if (name !== cacheStorageKey) {
            return caches.delete(name)
          }
        })
      })
    ).then(() => {
      console.log('Clients claims.')
      return self.clients.claim()
    })
  )
})

Installation Button

You can add an installation button which tries to be hidden if installation is not available. Place this just above the <IFRAME>

<button id='install-btn'>try to install</button>

Then the javascript:

let installPrompt;

document.getElementById("install-btn").style.visibility = "hidden";
window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  if (installPrompt)
      document.getElementById("install-btn").style.visibility = "visible";
});

document.getElementById("install-btn").addEventListener("click", () => {
  if (installPrompt) {
    installPrompt.prompt();
    document.getElementById("install-btn").style.visibility = "hidden";

  }
});

Magic… tricks and mirrors

You could write the main index.html in EWB, but you would need to either manually edit the manifest line, or write a script or program to do it, and always run that script after each compile.

I chose a simple magic trick, I just filled index.html’s screen with an IFRAME (to EWB users that’s a TBrowser) and run my pure EWB code in that IFRAME. That means the background javascript webworker continues to run while your EWB app is active.

Any EWB code will work.

My example calls data.php, which is a PHP server script on my server which just reports the server’s local time.

So your EWB code doesn’t have to do anything special.

The complete source for this project can be downloaded from here.

Let me know if you use this and have any additional questions.

Erick