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
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.
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.
