It works. Thanks Harbs.
The following steps are to be done to convert an app to pwa
1. Create a manifest.json file. Place it in the root folder in
src/main/resources where the index template html file is.
2. Modify the index template html file to reference the manifest.json.
3. Implement a serviceWorker.js file. This will be in the same root folder
in src/main/resources
4. In the main mxml file of the project create an init method then add the
below snippets
if ("serviceWorker" in window.navigator) {
window.navigator.serviceWorker
.register("/serviceWorker.js")
.then(function(res):void{trace("service worker registered")})
.catch(function(err):void{trace("service worker not registered: "+
err)})
}
Then compile the project and deploy to the web server. Once you launch the
url the web browser will ask you if want to install it as an app. If you
click yes, it will install the app locally and put an icon for launching it.
On Mon, 14 Mar 2022, 12:51 Harbs, <[email protected]> wrote:
> I’d add it to the init stage of the application.
>
> Actually, in ActionScript, you can get rid of the “load” event listener:
>
> if ("serviceWorker" in window.navigator) {
> window.navigator.serviceWorker
> .register("/serviceWorker.js")
> .then(function(res):void{trace("service worker registered")})
> .catch(function(err):void{trace("service worker not registered: "+
> err)})
> }
>
>
>
> On Mar 14, 2022, at 1:14 PM, Roman Isitua <[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]> wrote:
>
>> Wow ! I will definitely try this and provide an update on the outcome.
>>
>> On Mon, 14 Mar 2022, 08:42 Harbs, <[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]> 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]> 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]>
>>>> 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/
>>>>
>>>>
>>>> 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]> wrote:
>>>>
>>>>> No. Why would you need to modify the js file?
>>>>>
>>>>> On Mar 13, 2022, at 7:47 PM, Roman Isitua <[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]> 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]>
>>>>>> 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/
>>>>>>
>>>>>>
>>>>>> 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,
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>
