3D-PWA-Appshell-Template

PWA Template with BabylonJS

A 3D Progressive Web Appshell Template

Progressive Web Applications are the next big thing for the world wide web and HTML5 App developers. The concept is to take any Web Page and save it offline to a users "Homescreen" for easy access anytime! We think this is an excellent fit for BabylonJS and for distributing creative content. Because for the first time, we can take our 3D skills to the "Home screen" with no app store necessary. Use this template as an example of how to serve 3D PWA's from any SSL Website.

PWA AppShell Template Examples

WARNING

Be sure to check the W3C compatibility before going to production. PWA technology is a "Progressive Enhancement" (meaning it is a vanilla web site underneath) and it is all subject to change. So it's best to watch for browser support for things like the Web App Manifest and Service Worker. Also caniuse Service Workers and caniuse Web App Manifest.

Create your own 3D Web App

Clone me.
Set up Web Server for Chrome, (details below).
Flip > that "Start Server" button. Click > the blue Localhost link, and the Web App pops up in your browser.
Then "Install" it with a Tap > using the (custom) "Add to Homescreen" button.
And your Progressive Web App is refreshed in NATIVE CONTEXT and saved to the "Homescreen".

6) Use BabylonJS to add your own creations.

Under the hood

In DevTools, Right Click > and Inspect Elements. Refresh > and check those cached files in the console log. It caches the skybox, 3D assets, audio and the "App Shell"! Not to mention the LocalStorage Runtime Database. We can render any cached content offline. And when we install, there is a smooth loading screen. Thank you BabylonJS! But don't forget the other gizmos like: hidden URL, SSL info, and screen orientation support. Jump back to your desktop/homescreen to find your App! Windows 10 installs the app link to the desktop, and we think that is a game changer for our 3D Apps business model.

NOTES: 
- To uninstall PWA, Click > Apps button in Chrome.
- Then Right Click > Remove (also in app header).

Chrome Web Server

The Chrome Web Server is awesome and it is finally a quick, reliable, and unobstrusive dev server.

TIPS: 
- point to 'public' folder or all your cache-paths go 404.
- separate cache-paths between Dev and Prod. And look for console messaging to see what is happening.

App Shell (Template)

PWAs have a DESIGN PATTERN called "App Shell" and it is really clever. It separates content from the app (shell), so that each cache can be updated separately. This allows for an episodic "Content Stream" to be updated in an ongoing basis, while the App Shell remains static.

Service Workers

Service Workers appear widely supported across browsers. At time of writing it says, "This is experimental technology". Great!

TIPS: 
- look under DevTools > Application tab for help on Service Workers and Manifest.
- Also the > Network tab is really good for the "Clear Site Data" button, and "Update on reload." 
- Under > Network > there is 'Offline' Mode to watch it load from cache.

"Add to Homescreen" (Web App Manifest)

"Homescreen" is the COOL new ability brought to you by the "Web App Manifest". Thank you W3C!

NOTE: 
- If you need a custom "Add to Homescreen" button for your PWA, check out the vanilla-component in the index. 
- It is a "component" made with pure HTML, CSS, and JavaScript.

LINKS to great resources on Homescreen capabilities:

Structure

├── README.md
├── MIT-LICENSE
├── curio (app curation)
└── public
    ├── 3d (mesh)
    │   └── assets
    │   └── ...
    ├── img
    │   └── logos (separate from icons)
    │   └── ...
    ├── lib
    │   └── jquery (2D)
    │   └── babylon (3D)
    │   └── materialize (CSS)
    │   └── ...
    ├── sonic
    │   └── ... (AUDIO)
    ├── app.js
    ├── index.html
    ├── manifest.json
    └── sw.js (SERVICE-WORKER)

That's it!

Performance Optimizations

Lighthouse is a tool for scoring PWA capabilities. Run it in DevTools > Audit tab. Performance optimization were made to this template after using Lighthouse, and more are needed, so please PR!

The best optimization left is outside of the template: GZIP your server. 2) Also be sure to Click > DevTools > Performance > 'backwards looking refresh icon'. Because it refreshes and profiles the PWA. Including Animations? And if we look closely into that sequence of stratified data, we can find the layers that can be optimized and help with Lighthouse. And that is why we added a skull! Use it to emulate complex matrix integrations. Thank you DK.

STATUS: we still look to lazy-load 3D mesh with scenes that re-render with new meshes. Sequenced-scenes make sense with Service Workers.

Libs

BabylonJS it's excellent.
JQuery get hybrid 2D and 3D.
Materialize. CSS boilerplate (optional).

Production

TIPS: When you push your PWA to production there are a few things to keep in mind.
- You need to change the APP 'start_url' in the manifest. 
Because in dev it is local /index.html but in prod, it is the subfolder off of main page. 

The change looks like this:
  "scope": "/",
  "start_url": "/index.html?source=pwa",
  //change to production server path
  "scope": "/DEMOPWA1/public/",
  "start_url": "/DEMOPWA1/public/index.html?source=pwa",

- The 'start_url' allows multiple apps can be hosted from the same site!

Resources

PWA - Your First Progressive Web App - Google Developers
PWA in an hour - freeCodeCamp
PWA Structure - tutorial
PWA Examples - js13kpwa
PWA Add to Homescreen
PWA - Wikipedia
chrome://inspect/#service-workers
chrome://apps

PWA Paywall?

Check out itch.io and LeadBolt. They are good.

STATUS: working on itch.io docs and support to integrate many options like embeds or JWT with Node? For paywall or subscriptions or interstitial, etc. Overall, we are looking for PWA to integrate with subscription systems or one-time payments systems.

Welcome to the world-wild-web.

Contact (DM)

afalcon