BJS ~ PWA WrappShell Update

Demos and projects
1

Awesome people,

Something is happening on wurld-wild-web.
Have you seen it?

It is really good for BabylonJS -

Check it out!

TLDR; PWA is very cool technology.

We see game change. And are going for it.

Join in!

:sunny:

You’ve heard of “Progressive Web Apps”. Terrible name - great technology.

We deep-dive and are encouraged by what it enables.

We see a new user-interaction-model for the web.

So we can turn our focus back on animation methodology.

PROJECT DEMO

PWA App Shell Template now called WRAPPSHELL → On Github → 3D PWA APPSHELL TEMPLATE

UPDATE: find WRAPPSHELL link below.

TLDR; 3D BJS in PWA (with good lighthouse score)…

WHY?

Send your BabylonJS creations direct to any “Homescreen” of anyone anywhere in the world- from your https site.

As mentioned, we think that is cool. From careful prodding research - we find the barrier-to-entry into the marketplace - to be the final hurdle. Creating the app was easy. Even marketing and exposure - we have some trick up our sleve. But getting through the deadly jungles of the app stores - very nearly killed us.

App Stores are a-creative.

With a website we can now do anything. We think. WebGL creations on a link, pop-up on your Homescreen as app. We want to tell Hero Journeys, and we think that medium is exceptional (and cool).

INSTRUCTIONS:

  • In modern browser(Chrome or Edge) > click the “Add to Homescreen” button. Then click > “Install”.

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]
  • can push to traditional appstores, but also there is a whole new (better) ecosystem springing up.
  • Appscope.

QUESTIONS:

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

episode and dynamic content

UPDATE: Push API is not on roadmap for Safari iOS (boo-hiss) but Web App Manifest is “in progress” and new innovations arriving in succession like: GOOGLE PLAY STORE now with PWA…

BULLETPOINTS:

  • PWAs are a major improvement over AppStores.
  • But there is also a new user interaction life-cycle - not yet innovated.
  • Recommended by W3C and (almost) fully supported by vendors Many links available in template readme links.
  • With 2 clicks, any WebPage becomes a native app. We think that is cool.
  • ServiceWorkers - for “Offline Mode” caches files locally.

I want to update episodes years later with easter egg improvements.

  • “Appshell” concept has patterns. At the core it renders dynamic content separate of static AppShell.
  • That is why we call the enhancement of that… the WRAPPSHELL.
  • greenfield innovations all over… :cowboy_hat_face: :cow2: :cow:
  • stop by the beach front. Join in. The water is great!

Happy New Year,
aFalcon

[UPDATED]

6 Likes
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!

1 Like
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.
It will include innovations on how to quickly and easily update episodic content using bjs.

Exciting things:

  1. ServiceWorkers, attempt rendering “Scene Sequences”.

  2. try cache Reusable Assets, render into scene.

  3. 2DTxt - adventure overlays.

  4. “Celo” canvas element.

  5. dynamic mesh rendering, with Push

  6. Server Integrations

Next up, push BabylonJS PWA to MS AppStore. UPDATE: did not happen.

2 Likes
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. UPDATE: Optimized Below.

boxigonPWA1
boxigonPWA1.jpg1594×733 406 KB

Try it out! Free Version of BOXiGON!

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 immediately lost in crowds of obscurity - and we have a better way.

PWA is lighter (custom) code and faster to deploy to market!
Probably gonna integrate Twitter in a few clever ways.

Granted, still new - so 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 align in configurable FACTORY (and strategy pattern).

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

5 Likes
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!

1 Like
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???

Web App Manifest is “under development” for Safari on iOS, so we have a little time to prepare for the on coming wave. Maybe it is small, maybe a big one - either way we are paddling out! Join in!

We will update about the “app-crawler”, “automated app reference bot” using “manifest-scanning” technology. It is kinda mysterious. But we think that is where the best waves will be. : )

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

UPDATE: new free version of BOXiGON → more fun.

NEW LINKS below.

UPDATE: skipping W3C PUSHAPI - We will just do a Episode Update Btn. Which is cooler! : )

Now with less-grandpa! :cowboy_hat_face:

1 Like
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…

APPSCOPE requirements were → Good Lighthouse Score, originality, and purpose.

1 Like
10

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

wipeout3

: )

11

lol
How did you build the host for Play Store?

1 Like
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:

1 Like
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

1 Like
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…

1 Like
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):

logoPoster4_9-16_720x1080
logoPoster4_9-16_720x1080720×1080 1020 KB

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

1 Like
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!!!

1 Like