BabylonJS PWA (Progressive Web App)


#1

I wanted to try out building a BabylonJS PWA and it came out like this:
demo: BabylonJS PWA

Inspired by the blog post from @Deltakosh and a great topic from @aFalcon. For those who don’t know about PWA - you can from your Android device in chrome download the “app” to your device and it will work offline. Here are my Chrome on Android options:

Now you have an “app” without going to the app store and it will work when you have no internet (you can try by turning off data). Some native functionality is available, but I haven’t investigated that yet.

There is a website that can package it for Android/iOS (http://pwabuilder.com). Lots of resources out there about setting up your manifest. Obviously what I made here is not worthy of being an app, but just shows how easy it is to get started and in this case I did not write any code and it is all written declaratively.

I have some improvements in mind. Getting it working well in portrait landscape mode, adding a GUI button to “Add to Home Screen”, etc… All the code is on the github page (GitHub - brianzinn/create-react-app-babylonjs-pwa at master). cheers.


#2

Awesome!

@brianzinn - clearly jedi skillz.

var Bonus  =  React + BabylonJS + PWA  ===  <Very cool tech/>. 

RESPONSES:

  • Really like PWABuilder CLI version. Watching the “Icon Generator” - important (later).

  • We are keen to “roll our own” ServiceWorkers - to Sequence Animations, with new “Patterns”.

  • Web App Manifest has MANY AWESOME SOLUTIONS!

    Manifest enables the “Add to Homescreen”.

       * But different support across every brower
    
       *  e.g. btn in URL, or tray(iOS), settings menu, or chrome://apps.
    

    Also enables Orientation: Portrait, Landscape (see below).

Used MDN docs on Web App Manifest to TEST and make Verbose Example (remove comments before using):

{
  "name": "3D-PWA-SHELL-TEMPLATE",
  "short_name": "3D-PWA-TEMPLATE",
  "icons": [{             /* <-- notice icon jungle, but keep moving */ 
    "src": "img/logos/logo1_128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "img/logos/logo1_144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "img/logos/logo1_152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "img/logos/logo1_192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "img/logos/logo1_256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "scope": "/", /* <-- change in PROD for multiple PWAs */
  "start_url": "/index.html?source=pwa",  /* <-- enables the "Install" ability  */
  "display": "standalone",
  "orientation": "landscape",   /*  <-- enables orientation customization */
  "background_color": "#000",
  "theme_color": "#ccc"    /* <-- enables automated splash screen with icon */
}

INFO: iOS Safari was latest to adopt to “Add to Homescreen” (A2HS).
TEST: SUCCESS - in latest version (iOS Safari). A2HS previously did not work. Cool.

NOTE: significant troubleshooting involved in start_url

  • Be prepared to change start_url when moving to PRODUCTION.

    Different production path - will break Manifest at start_url (confusing 1st time).

  • good items for build system: start_url and Push API versions. I keep both PATHS in readme (for now).

  • Debugging TIP:

    DevTools “Application” Tab and “Audit” Tab are EXCELLENT for reviewing Manifest errors.


Here is VANILLA HOMESCREEN COMPONENT (with comments):

    <!--********************************-HOMESCREEN-COMPONENT-********************************-->
    <aside>
      <style>.add-button { position: absolute; top: 72px; right: 2px; border-radius: 10px; } </style>
      <button class="add-button center">Add to Homescreen</button>
      <script async type="text/javascript">//App install banners/Add to Home Screen by Pete LaPage.
        let deferredPrompt; //https://developers.google.com/web/fundamentals/app-install-banners/
        const addBtn = document.querySelector('.add-button');
        addBtn.style.display = 'none'; //hide-A2HS-initially-.
        window.addEventListener('beforeinstallprompt', (e) => {
          e.preventDefault(); // Prevent Chrome 67 and earlier from automatically showing the prompt
          deferredPrompt = e; // Stash the event so it can be triggered later.
          addBtn.style.display = 'block';  // Update UI to notify the user they can add to home screen
          addBtn.addEventListener('click', (e) => {
            addBtn.style.display = 'none';// hide our ui A2HS button
            deferredPrompt.prompt(); // Show the prompt
            deferredPrompt.userChoice.then((choiceResult) => { // Wait for the user to respond to the prompt
                if (choiceResult.outcome === 'accepted') {
                  console.log('User accepts A2HS.');
                } else {
                  console.log('User dismissed A2HS.');
                }
                deferredPrompt = null;
              });
          });
        });
      </script>
    </aside>
    <!--***************************-HOMESCREEN-COMPONENT-********************************-->
  • Old-school - JSX. :sunglasses:

IMPORTANT TIP:

  • BUTTON does NOT SHOW if MANIFEST FAILS.
  • because “beforeinstallprompt” EVENT only fires “after manifest is validated”.

    tricky. It should have been named something like “afterManifest”.

  • If that happens > go to DevTools: Application or Audit Tab to find details on Manifest Fail.
  • (usually 404 path)

IMPROVEMENTS: we try to extend the “A2HS” (Add to Homescreen) Button.

  • Today team attempts integrating A2HS with Itch.io.

  • Next, try to get BabylonJS represented on Appscope and PWA Rocks (requires small svg [!])


BrianZinn GitHub Link is awesome.