BabylonJS - PWA AppShell Template


#1

Hello awesome people,

SOMETHING is HAPPENING on WURLD-WILD-WEB.
It is good for BabylonJS -
check it out!

TLDR; PWA is cool (exceptional) technology.

See examples and UPDATES below.

:sunny:

You heard of “Progressive Web Apps”.

… we deep-dive PWAs and are encouraged by what we find.

It is a new user interaction model for the web.

PROJECT DEMO

Here is PWA App Shell Template -> On Github -> 3D PWA APPSHELL TEMPLATE

WHY?

Use it to send BabylonJS creations directly to any user Homescreen on (any?) device - from your https site.

It is easy website to app service from your https site. You put WebGL creations on a link, on a desktop, and when user clicks… your creations pop-up there in a browser rendered as app. We think that is exceptionally cool!

INSTRUCTIONS:

  • In modern browser(Chrome or Edge) > click the “Add to Homescreen” button. Then click > “Install”.
  • Tada! > you installed a BabylonJS APPSHELL to your Desktop OR Homescreen on Mobile! Thanks MS.
  • Check your desktop (icon there).
  • Check chrome://apps (icon there) [right click to uninstall]

It gets better!

can we send many scenes through to user app with push updates???

GOAL: collectible episode with dynamic content.

NOTE: Push API is not on roadmap for Safari iOS, but Web App Manifest is “in progress”.

BULLETPOINTS:

  • PWAs are a major improvement over AppStores.
  • But there is also a new user interaction life-cycle emerging - not yet belabored by the blogs.
  • Recommended by W3C and (almost) fully supported by vendors (big thanks; Microsoft, Chrome, iOS Safari adopting Web App Manifest not PushAPI). Many links available in template readme.
  • With 2 clicks, any WebPage becomes a native app. We think that is cool!
  • ServiceWorkers - for “Offline Mode” caches files locally.
  • “Appshell” concept - renders dynamic content separate of static AppShell.
  • And greenfield for innovations… :cowboy_hat_face: :cow2: :cow:

We think that is exceptionally cool!

Happy New Year Babylon Warriors,
aFalcon

[UPDATED]


#2

My only question is how to get exposure? Store can provide visibility to a project. Is there any pwa “store” ?


#3

Yes, “PWA Store” is next step… and exposure worth measuring. We see changing trends in both.

  1. Site Listings: There are multiple “site listings”.
  1. Big Changes? More big changes going on behind the scenes?
  • Edge adopting Chromium because of PWA? Check it out…
  • Microsoft PWA strategy
  • These are the steps to get PWA on MS AppStore (for exposure):
  • we will attempt TEST APP push of PWA to MS AppStore this month and report the experience.
  1. paradigm-shift. Maybe AppStore Exposure is not what it used to be?
    The metrics for Pinterest (and others) show impressive adoption(100%+)… because of the 2Tap install, and other reasons (app store noise === obscurity). We experienced “lost in App Store oblivion” first hand. The problem is time-to-market, 1 month to get through “approval” and then there is a huge crowd.

PWA is fast to market - so that is a win - exposure or “Organic interest” would be a bonus.

  1. "Install Now" buttons in Ads. So any app can install any other app (it seems). Making exposure easier to attain? Also any web page can install any app. So there is larger visibility. Promotions target is product not appstore. Which was something $TEAM was super persnickety about … as they outlaw web links of all kind to limit developer linking to site and drawing traffic away from $team app.

  2. "Discoverability" Last, there is emphasis on SEO and NEW EXPERIMENTAL “Linking”, for example stores “scan” or “crawl” web pages for “Web App Manifest”. Then app stores automatically list PWA? Exploring in progress.

UPDATES ABOVE.

: )


#4

I’m huge fan of PWA (I created mine here: https://www.collecto.app) and I really think this is the future!

Keep us posted on the success of your PWA!


#5

Awesome DK, Collecto looks cool! We think PWA is future too.

Our FULL REVIEW of BabylonJS on AppStores (STEAM, FB, MS, Amaz0n, Goog1e) was:

App Stores are barrier of entry with minimal organic results that didn’t fit bootstrap business model.

In short - it takes to long to push to production.
So, we will do Medium Technical Blog on PWA innovations instead of $team.
And we will try to include innovations on how to quickly and easily update episodic content using bjs.

Exciting things like:

  1. ServiceWorkers, attempt rendering “Scene Sequences”.

  2. try cache Reusable Assets, render into scene for interactive adventure stories.

  3. “Celo” canvas element.

  4. attempt dynamic mesh rendering - with Push Update mechanism - and add to AppShell template for everyone.

  5. Itch.io Server Integration

UPDATE: Hold on “Push API”, from W3C, after research, not on Safari’s roadmap.
GOOD NEWS: Web App Manifest - is on Safari’s roadmap.

But first, push BabylonJS PWA to MS AppStore.

STATUS: Halfway (below)
UPDATED (above)


#6

PWA - SUCCESS!

It took the team less than 24 hours to convert BabylonJS Electron App to PWA App - using the AppShellTemplate.

Still not optimized - but is minified.


Try it out! Free Version of BOXiGON! (for @Wingnut)

Simply click “Add to Homescreen” to Install to desktop.

For comparison, publishing to App Store takes _much longer than 24 hours.
Every AppStore takes weeks - with tons of platform specific coding and always unique quirks.
And to DK’s question - on AppStore we didn’t get significant (organic) exposure anyway.
We were lost in the crowds.

PWA is lighter (custom) code and faster to deploy to market!

Granted it is still new - so maybe that means it is a great time to get in on the ground floor?

We are all in.

Team will experiment in PWA as much as possible this year with BabylonJS. : )

Please tell us your thoughts.

We see David R. @davrous wrote a great tutorial on PWA with Banana Guns!. And he has some awesome code in that service worker… aFalconTeam will experiment with different caching-patterns and put them ALL in the APPSHELLTEMPLATE for everyone (using strategy pattern).

ANOTHER SUCCESS - BOXiGON PWA works perfectly on SURFACE TABLET, as an app (after updates).


#7

Yay Boxigon! Try to unlock the box!

Ya know… I once had a girlfriend who… uhh… never-mind.

I love the app. And the free-ness fits this economy-abolitionist nicely. But…

… PLEASE don’t push members of the Professional Windsurfers Association, or they might windsurf too far from shore and enter busy, dangerous shipping lanes. :slight_smile:

(ahh, low-hanging-fruit comedy… sometimes it’s a messy thing, isn’t it?)

Congrats on your successes, new outlets, and exciting opportuna-fish, JF & Team! Well done!


#8

Thanks for your review and feedback @Wingnut

Changes made:

And yeah, ongoing naming disasters with ‘PWA’, pummeled on all sides.

It is the gauntlet we run until PWA. Discouragements abound.

We hope these efforts are (eventually) valuable to this community.

So professional websurfers association (PWA)? Yes. It is the only choice. App Stores === dreadful.

We’d like to help raise awareness, and to prove the route through, especially if none exist. Whatever we find we will share.

The beauty is in the search, that it is for everyone to decide: follow, avoid, or improve the path - and is it worth it for the web???

UPDATES: Web App Manifest is “under development” for Safari on iOS!

We will update: if the “app-crawler”, “automated app reference bot” using “manifest-scanning” technology actually works. Or not (below). It is kinda mysterious.

We see advanced experiments worth running and answering for the benefit of community(above):

UPDATE: new free version of BOXiGON -> more fun.

Please uninstall and re-install until team gets “Push Updates” working in AppShellTemplate.

UPDATE: skipping W3C PUSHAPI - Safari not implementing? And we will just do a Episode Update Btn.


#9

PWA-on-MS NOTES:

This blog is a great start.

It points out policies… which - it is really nice to see up front. An adventurous read! And helpful.

  • The two sections most technically applicable are 10.3 Product is Testable and 10.4 Usability.

There is an interesting note "

10.3.2

If your product requires access to a server, the server must be functional to verify that it’s working correctly."

  • can’t wait.

  • and time to optimize delay-load-sequences: splashcreen, 2Duishell, 3Dscene, 1Dtxt, mesh and audio.

UPDATE: the one POLICY that zinged us was a accidental XBOX Live Opt-In which caused un-decipherable errors, and policy failures for not implementing login. We eventually found the “opt-out” button.

Look a forum.

Bird :black_heart: forum. : )

But will Bird :black_heart: PWABuilder???

ANSWER: Yes, PWABuilder is Great!

It generates Appx in the UWP automatically?

Nice1. : )

Cmd-line cert signing was fun!
It just didn’t work after upload.
learned a few things about PowerShell.
Is it goodbye?

ANSWER: "two ways to work: web-based or cli
BOTH are good.
Node version is excellent. : )

Good Intro:
“PWAs in the Microsoft Store. Looking forward, we’re excited about the potential of PWA principles to bring the best of the web to native apps, … between the browser and the desktop. We look forward to… feedback on our initial implementation and experimenting further in future releases.

~6 months out of the gate. Perfect.

Important BULLETPOINTS from blog above:

  • when given the choice, we choose: “Publish PWA As is”. A rocky road but worth it.

  • every store drastically different graphic requirements!!!

UPDATE: new icon sizes requested in certification.

  • PDA Rocks requests SVG (2kb), which is cool, so rocking BOXiGON Inkscape (slowly).

  • AppScope will have a different GRAPHIC-REQUIREMENT… just wait!

boxiLevels16

All good though…


#10

AppStore “submission” process got me thinkin of my favorite show…

wipeout3

: )


#11

lol
How did you build the host for Play Store?


#12

Thanks

For PWA attempt (yesterday) was with “PWA Builder”, using “Web-Based” option. RESULT: XML error(above) on dashboard upload - which was:

UPDATE: MY FAULT FOR EXPERIMENTING WITH XBOX. --> Wipeout!

I’d do it again I guess.

UPDATE: don’t touch any XBox Buttons! “opt-out” - but it is an option…

: )


#13

you can ping jeffburt@microsoft.com to get help on PWA builder :slight_smile:


#14

ROCK AND ROLL!!! :sunglasses:

We have a solution to an apparent USER-ERRRORR… ?

Lessons Learned:

  • try out CMD V1.0.0.0 - Node based (below) - it is good.

UPDATE: :black_heart: on the NODE version of PWA-BUILDER!
Git - ManifoldJS - three years ago!
WAT - this code is great
Nice.


#15

It’s a puzzle!

Need to fill out manifest.xml with corresponding names from dashboard:

<Identity Name="INSERT-YOUR-PACKAGE-IDENTITY-NAME-HERE" Publisher="CN=INSERT-YOUR-PACKAGE-IDENTITY-PUBLISHER-HERE" Version="1.0.0.0" ProcessorArchitecture="neutral"/>

Piece of cake. WIN!


#16

please work with Jeff he will help you


#17

SOLUTION to the XML error - obscure.

SOLUTION - seems like a bug related to XBOX (after opting in and not doing anything).

Thankful for this SINGLE posting… microsoft blog

It describes the following steps:

  1. Go down into XBOX SETTINGS (in a separate location):

  2. Services > XBOX LIVE >

  3. Scroll half way down the page…

  4. There is a button called “TEST”

  5. Click it

  6. Go back to Submission > “Submit to Store” button

RESULT: XML error gone!

OR find the “opt-out” button.

For anyone else on the web who might find this. I hope so. Those are the ways to solve this error:

Document: accesspolicies.xmlDocument: accesspolicies.xml

Error: AccessPoliciesRequired

Moving on. Round 2.

roundtwo

Submission :heavy_check_mark: Certification! :checkered_flag:

Updating a couple blogs with the same feedback to hopefully help others…


#18

MS App Store Certification Results:

  1. Opt out of XBox Live (apparently I opted in - and it has consequences. But, now we know, and…

    • TESTING BabylonJS PWA to XBOX??? Seems plausible. :heavy_check_mark:

    • FAILURE: XBox Live needs a login API integration - makes sense. :heavy_check_mark:

  2. Add 7 new Image Dimensions (below), and 10 screenshots. :heavy_check_mark:

  3. Review Icons. :heavy_check_mark: (there are icon issues - remote).


~LAW OF APPS: Always more images.


SUCCESS: itch io API - NodeJS Server Template. :black_heart:

… open-source soon.

RESULT: itch-io API is gr8

NEXT UP: OAuth. :cowboy_hat_face:


Wish I was working on BabylonJS ART not a BabylonJS content-pipeline.

“Poster 720x1080” - image results (ok for now):

Work in progress… (removed “dramatic question” - for various reasons - “may have visual overlays on bottom 25%” and other things…).


#19

Check it out!

BabylonJS App:

Get BOXiGON on Itch.io: BOXiGON Free! by NetCinematics

//TIME TO PRODUCTION  - _on Itch.io_ -> 1 DAY.

//TIME TO PRODUCTION  - _on MS Store_ -> 32 DAYS (overall - and counting).

UPDATE: this is the PWA wrapped in iframe option - but iframe blocks the “beforeinstallprompt” event - so PWA cannot install. We are working on that.

GOAL: small web-apps like candy.


#20

I finally managed to get mine on win10 store!!!