(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 <[email protected]> Reply-To: "[email protected]" <[email protected]> Date: Monday, March 14, 2022 at 11:17 AM To: "[email protected]" <[email protected]> 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, <[email protected]<mailto:[email protected]>> 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 <[email protected]<mailto:[email protected]>> 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, <[email protected]<mailto:[email protected]>> wrote: Wow ! I will definitely try this and provide an update on the outcome. On Mon, 14 Mar 2022, 08:42 Harbs, <[email protected]<mailto:[email protected]>> 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 <[email protected]<mailto:[email protected]>> 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, <[email protected]<mailto:[email protected]>> 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 <[email protected]<mailto:[email protected]>> 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%7Cab1cddab4d0b48e3edae08da05e6eee4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637828786655879622%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=HE2ZLP3a4xtS9ylqr19Az13Wbp4jNPIY35%2FqCVZhw9I%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, <[email protected]<mailto:[email protected]>> wrote: No. Why would you need to modify the js file? On Mar 13, 2022, at 7:47 PM, Roman Isitua <[email protected]<mailto:[email protected]>> 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, <[email protected]<mailto:[email protected]>> 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 <[email protected]<mailto:[email protected]>> 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%7Cab1cddab4d0b48e3edae08da05e6eee4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637828786656035836%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=PIQzsk9GO3fCXzO%2B2a%2BQ8WyGrDmadUN%2BFDOVX82U9jE%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%7Cab1cddab4d0b48e3edae08da05e6eee4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637828786656035836%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=wCQy8Dvq%2FfNO7e3NcoNvzLkJViuR7sdjx9CAJpwS2zk%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%7Cab1cddab4d0b48e3edae08da05e6eee4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C637828786656035836%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=r1tuVnxdGrpfyMZbROPti77gjgGuWreB9Bj2cExO%2BAE%3D&reserved=0>
