Responses inline… From: Roman Isitua <romanisi...@gmail.com> Reply-To: "users@royale.apache.org" <users@royale.apache.org> Date: Saturday, March 19, 2022 at 9:07 PM To: "users@royale.apache.org" <users@royale.apache.org> Subject: Re: Royale support for progressive web apps (pwa)
Actually the goal is to be able to leverage the new browser api's. AJH: OK, but in what way? That’s why I’m asking about the 3 levels of integration. One way to think of it is as a spectrum where on the “none” end, the goal is to re-use as much example code from MDN and other JS sources as possible. Then their recipes for how to install and setup and their “Getting Started” examples have a better chance of working, but yoo don’t get to use MXML or type-checking. At the “full” end, you’ll probably end up writing a “Getting Started” for Royale that leverages MXML. Which should reduce the steps and amount of typing to get the example up and running. Is there online Documentation about the three levels of integration that you just listed ? AJH: There is a need for documentation in many areas, including this Or at least if you can point to some simple examples in the royale sdk that use the three ways of integration that will be helpful. I can study the source code and learn how it is done. AJH: . Most of the SWCs for 3rd party libraries in frameworks/libs, like CreateJS, JQuery, Material, are full integration SWCs because the goal was to use MXML as much as possible. ACE might be the middle. There won’t be frameworks/libs SWCs for “none” integration as then you would code directly against the typedefs SWCs and not use MXML at all. Last question, (since you mentioned air.) Does royale support deploying to adobe air for mobile devices ? If yes. How can I leverage air mobile sdk functionality in a royale app. AJH: Theoretcially, Royale can output running SWF code, and we have one automated test that proves that some basic functionality works, but I don’t think most components currently work as well on SWF. AIR supposedly has a JS engine, but I haven’t tried it. And then there are desktop runtimes for JS that are similar to AIR like Electron and I think some Cordova-related options ,and I think someone recently got Royale working in Electron. HTH, -Alex On Sun, 20 Mar 2022, 00:23 Alex Harui, <aha...@adobe.com<mailto:aha...@adobe.com>> wrote: (If you read my thoughts in the “Implementing JS Renderer” thread, you can skip the next 6 paragraphs) AFAIK, there is no current "Royale way" of creating PWAs. However, the whole point of Royale is to improve developer productivity for common patterns. New patterns become popular every day and it is "just" a matter of identifying what parts of those patterns can be made easier via declarative syntax (MXML) or strong typing (AS) and updating Royale accordingly. And while the Basic and especially MXRoyale and SparkRoyale libraries are intended to emulate Flex patterns. There is no requirement for all SWCs to emulate Flex patterns. New patterns might require more compiler changes, but are possible. Also, IMO, there are 3 "levels" of Royale integration for external libraries: Full, partial, and none. Full integration generally involves wrapping external in AS classes. Most of the current SWCs do that. An AS Class is instantiated and its APIs do things to some JS library. That generally provides the most developer productivity because the library supports MXML (no constructor parameters, more get/set APIs instead of functions/methods) and AS (strong typing). However, that means more code runs since you are essentially wrapping a library in a library. Partial integration involves creating a few AS classes to talk to the JS library. I think the ACE SWC does is an example of partial integration. And "none" means that you are writing code that pretty much calls the typedefs directly. As you can hopefully see, there is a tradeoff between how much work you put into wrapping up external libraries and how easy it is to then write code against it. If you only need to do something once, then it might be easier to just hack something to talk to the typedefs. Specific to PWAs, I am definitely not an expert on PWAs, but IMO, the link posted was for an example of some of the related PWA APIs but didn’t really produce anything Progressive. Reading the MDN articles on PWAs was a bit more informative, especially about the two places where the word “Progressive” showed up, which was 1) providing progressively more functionality based on device capability, and 2) progressively loading the application. I could argue that Flex and Royale already provide a way of creating PWAs, but don’t use the new browser APIs. AIR-based apps, for example, provide offline capabilities. Proper use of view states provide a different way of managing what UI is presented to the users. And modules provide a way to progressively load your app. What is missing might be capability detection, although some of that may already be available by detecting OS or via some Cordova libraries. But if the goal is to leverage these new browser APIs in Royale, then it comes down to picking the level of integration and creating any wrapping code if desired. It would be interesting to see if Royale view states and MXML would make it much more efficient to create PWAs. However, I don’t have the time to work on that these days. My 2 cents, -Alex From: Roman Isitua <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> Reply-To: "users@royale.apache.org<mailto:users@royale.apache.org>" <users@royale.apache.org<mailto:users@royale.apache.org>> Date: Monday, March 14, 2022 at 11:17 AM To: "users@royale.apache.org<mailto:users@royale.apache.org>" <users@royale.apache.org<mailto:users@royale.apache.org>> Subject: Re: Royale support for progressive web apps (pwa) Yes. It should be in a similar section to where cordova is. On Mon, 14 Mar 2022, 12:23 Andrew Wetmore, <cottag...@gmail.com<mailto:cottag...@gmail.com>> wrote: Roman, when you get this sorted out, let's figure out where in the documentation we should explain how to use Royale to create progressive web apps. I presume it would go alongside explaining how to prepare a Royale app for use with Cordova to achieve a similar goal. a On Mon, Mar 14, 2022 at 8:16 AM Roman Isitua <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> wrote: One question. At which point in the code should the below actionscript code be added. Is it in the sp:Application (assuming I am using spectrum) area ? I.e In the fx script portion of the mxml ? On Mon, 14 Mar 2022, 08:45 Roman Isitua, <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> wrote: Wow ! I will definitely try this and provide an update on the outcome. On Mon, 14 Mar 2022, 08:42 Harbs, <harbs.li...@gmail.com<mailto:harbs.li...@gmail.com>> wrote: Yes. You can put that in a script tag in the html. Here’s an ActionScript equivalent of that code: if ("serviceWorker" in window.navigator) { window.addEventListener("load", function():void { window.navigator.serviceWorker .register("/serviceWorker.js") .then(function(res):void{trace("service worker registered")}) .catch(function(err):void{trace("service worker not registered: "+ err)}) }) } If there’s no typedef support for serviceWorker you might need to use: window.navigator[“serviceWorker”] On Mar 14, 2022, at 1:00 AM, Roman Isitua <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> wrote: From the tutorial the code to register the service worker is as follows: if ("serviceWorker" in navigator) { window.addEventListener("load", function() { navigator.serviceWorker .register("/serviceWorker.js") .then(res => console.log("service worker registered")) .catch(err => console.log("service worker not registered", err)) }) } To implement the main entry point js file was modified. So your saying it possible to do same in the index.html or actionscript ? If yes my next question is how ? On Sun, 13 Mar 2022, 20:19 Harbs, <harbs.li...@gmail.com<mailto:harbs.li...@gmail.com>> wrote: If you want it to work offline with Cache, you will need a service worker, but that is a _SEPARATE_ js file. You don’t need to modify the main JS file. You do need to register the service worker, but that can be done either in the index html file, or in your ActionScript code. On Mar 13, 2022, at 8:24 PM, Roman Isitua <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> wrote: From the below link https://www.google.com/amp/s/www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/amp/<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.google.com%2Famp%2Fs%2Fwww.freecodecamp.org%2Fnews%2Fbuild-a-pwa-from-scratch-with-html-css-and-javascript%2Famp%2F&data=04%7C01%7Caharui%40adobe.com%7C2de406a4f86e4d46fcae08da0a273352%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637833460731724903%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=EyrAD%2FSo4egYram%2FYCLj8TJ3sxcy4rOOBAogq6fScgs%3D&reserved=0> The following steps are to be done to convert an app to pwa 1. Create a manifest.json file. 2. Modify the index.html file to reference the manifest.json. 3. Implement a ServiceWorker.js file. This will be in the same root folder as the generated main entry point js file. 4. Register the ServiceWorker.js file by modifying for the generated entry point js file. If I am coding my web app using plain html, css and javascript it will not be a problem doing the above 4 tasks. But as I am using royale task three and four look challenging. I think the royale sdk and compiler might need to be tweaked to support those tasks. On Sun, 13 Mar 2022, 19:04 Harbs, <harbs.li...@gmail.com<mailto:harbs.li...@gmail.com>> wrote: No. Why would you need to modify the js file? On Mar 13, 2022, at 7:47 PM, Roman Isitua <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> wrote: So I am free to modify the generated entry point js file as well ? This does not really look like an ideal solution because each time I recompile the project the generated js file will be overwritten. An ideal solution will be to add support for it in royale sdk. On Sun, 13 Mar 2022, 18:36 Harbs, <harbs.li...@gmail.com<mailto:harbs.li...@gmail.com>> wrote: It shouldn’t be any different than a regular web app. You can add whatever you want to the template index.html file. On Mar 12, 2022, at 11:53 AM, Roman Isitua <romanisi...@gmail.com<mailto:romanisi...@gmail.com>> wrote: I just stumbled on a tutorial on how to create a pwa app using plain html, javascript and css (i.e. no framework). I am now forced to ask the question. How can i do this in royale ? Here is the link https://www.google.com/amp/s/www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/amp/<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.google.com%2Famp%2Fs%2Fwww.freecodecamp.org%2Fnews%2Fbuild-a-pwa-from-scratch-with-html-css-and-javascript%2Famp%2F&data=04%7C01%7Caharui%40adobe.com%7C2de406a4f86e4d46fcae08da0a273352%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637833460731724903%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=EyrAD%2FSo4egYram%2FYCLj8TJ3sxcy4rOOBAogq6fScgs%3D&reserved=0> How can I register all the generated javascript files ? Is modifying the main entry point js file in my royale project allowed ? From the tutorial this file will need to be modified to register the service worker. Has someone created a pwa in royale before ? Pwa's are rapidly being adopted it will be nice if I can package my responsive web application to be a pwa with little effort. Regards, -- Andrew Wetmore Editor, Moose House Publications<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fmoosehousepress.com%2F&data=04%7C01%7Caharui%40adobe.com%7C2de406a4f86e4d46fcae08da0a273352%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637833460731724903%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=zqnC8KH0bE9UnMDTac4mnScppkx%2FxzPHt5D5CtR%2Bs60%3D&reserved=0> Editor-Writer, The Apache Software Foundation<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapache.org%2F&data=04%7C01%7Caharui%40adobe.com%7C2de406a4f86e4d46fcae08da0a273352%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637833460731724903%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=AYCgoh52cVWv8ZP9BovsW0G8Y%2Fv6VcKtEFOGAkz9IFs%3D&reserved=0>
