PWA Introduction

#1 · February 29, 2020, 5:42 pm

Progressive Web Apps (PWA) are web applications based on standard web technologies with the addition of the newest javascript features. With such a combination, it is possible to create very fast web pages with PWA, that provides improved user experience, better visitor engagement, and increased conversion rates.

Since version 20.2.29 VisualNEO Web can compile PWA just be checking the appropiated checkbox in Project > Properties > Platform Options > Web menu. PWA are deployed by hosting them in a Web Hosting Service, such as CloudNEO, under a secure https connection (SSL certificate required). Most hostings provide the basic certificate for free.

When a user visits your PWA through a compatible web browser (Chrome, Edge, Firefox mobile...) a "Install now" button offers him the possibility to install your PWA as a traditional application (on mobile or desktop).

Once uploaded to your hosting service, the PWA can also be published on app stores by using the free packaging service provided by Microsoft pwabuilder.com site.

Compatibility with this new web application model is very wide and increasing day after day.

Important: while creating your PWA don't forget to add your app icon, name, description, verion etc. in Project > Properties.
The Google Chrome Lighthouse Extension is very much recommended in order to fine tune your PWA.
Althoug PWAs require a secure https connection to work, Google Chrome accepts "http://localhost" (as provided with the included neoPHP server tool) as an acceptable URL for testing purposes.

VisualNEO Web generated PWA's include a Service Worker to help your application work offline by caching the app assets on the local device.

Uploaded files:

You need to login to have access to uploads.

#2 · February 29, 2020, 6:07 pm

hi , @luishp

Thank you for your efforts.

regards

#3 · February 29, 2020, 9:14 pm

Hi Luis,
Using your example "MessageBox.neoapp" with PWA option checked in properties, complile as a web...

Installation succeed on my Windows PC with CHROME 80.x...(...once.)

I try the option to uninstall the PWA...Ok, but I launch again the URL where I copied the example files, (I cleared the navigator cache), but now the installation is no more proposed in the right menu of CHROME...

Any idea why ?

Installation works on EDGE. (even after uninstall, like above)
Installation works on CHROME Mobile (ANDROID) (even after uninstall, like above)
No installation proposed on FIREFOX (windows)
No installation proposed on FIREFOX Mobile (ANDROID)
No installation proposed on OPERA
No installation proposed on CHROME Mobile (IOS 13.x)
No installation proposed on FIREFOX Mobile (IOS 13.x)
Installation proposed on SAFARI (IOS 13.x)
Installation proposed on SAFARI (IPADOS 13.x)

Can't read the URL ( https://www.media44.fr ) on TOR...

Happy to try this new release ! Thank you !

Best regards,

#4 · February 29, 2020, 10:38 pm

Hi @cdy44-2, please install the Lighthouse extension in Chrome so you can do an easy and quick report: just load your uploaded app into Chrome and click the upper right Lighthouse icon.
After doing it with your app it points to this error: Installable PWA's require an icon with a minimum size of 192px.
Also keep in mind not all web browsers currently support PWA install. You can take a look here for reference:
https://caniuse.com/#feat=web-app-manifest

Regards.

CDY@44 has reacted to this post.

#5 · March 1, 2020, 2:24 pm

Hi Luis,
I immediately installed this extension which is really a great tool in addition to VisualNeo Web. I am so excited by VNW that I have renewed my support for your company by paying for the update. He really deserves it !!!
Best regards,
Denis

luishp has reacted to this post.

#6 · March 2, 2020, 2:49 am

I have "error" messages with LightHouse (missing icons 192px and 512px...), I must study this deeper...

#7 · March 2, 2020, 2:56 am

Thanks Luis, this is a cool tutorial. Without it, I don't know where would I start.

Keep on helping us!

Roger :)

#8 · March 2, 2020, 4:40 am

But, for localhost testing, how do I test my application when compile.

I have install Google Chrome browser on my PC and tried http://localhost but it is a microsoft web page that come up. Looks like a web page example only.

I understand it is local, but I should be able to put my application into that localhost folder to make it work? I can't find the localhost folder on my computer. I have configure windows 10 to have Localhost service already.

Is there something that I'm missing or doing wrong?

Thanks!

Roger

#9 · March 2, 2020, 10:09 am

Hi @rocote, it's easier that it seems (would try to record a video as soon as possible)

Compile your app.
Open Tools > neoPHP Server menu
Uncheck "Copy config.php..." as we are not going to use neoPHP plugin.
Press "Start"
Open Chrome Web Browser
Navigate to http://localhost

neoPHP is a local web server. It works as if it was a web hosting service for testing purpouses.
I hope it helps.

Vadim, CDY@44 and rocote have reacted to this post.

#10 · March 2, 2020, 4:01 pm

Thank you so much Luis!

Roger :)

#11 · March 8, 2020, 4:35 pm

Hi Luis, I tried what you told me; (see the attached picture for result)

I always have the same result. I don't know what I am doing wrong. sorry...

Compile your app.
Open Tools > neoPHP Server menu
Uncheck "Copy config.php..." as we are not going to use neoPHP plugin.
Press "Start"
Open Chrome Web Browser
Navigate to http://localhost
neoPHP is a local web server. It works as if it was a web hosting service for testing purpouses.

Uploaded files:

You need to login to have access to uploads.

#12 · March 8, 2020, 4:42 pm

@rocote, you have a web servers conflict. You have two web servers, both running on the same port: 80 (default one).
Just stop Internet Information Server before running neoPHP server or start neoPHP server using port 8080 instead of 80 and then use http://localhost:8080 instead of http://localhost

I hope to explain myself fine enough.

#13 · March 8, 2020, 5:01 pm

Thanks! It is working now.

I didn't have to stop the internet information Server.

What I have done is change the default Port # in NeoPHP server to 8080

But have to add this line in Google Chrome localhost:8080 to work.

So when I test my app, it is like testing it on a web hosting service, right?

Now I still have to understand how to use NW.JS - I didn't found out how it is working yet.

Also, about PWA, I can't see what is the benefit to use use because I still don't know how to use it.

I know how to compile an app in PWA but really can't see what is the difference with the .exe compilation.

I think I need a video for the new features.

Thanks for helping.

#14 · March 8, 2020, 6:56 pm

Thanks! It is working now.

Great @rocote!

Now I still have to understand how to use NW.JS - I didn't found out how it is working yet.

Didn't you want MacOS X compatibility? I have recently published a NW.js FAQ here:
https://visualneo.com/forum/topic/nw-js-faq

Also, about PWA, I can't see what is the benefit to use use because I still don't know how to use it.
I know how to compile an app in PWA but really can't see what is the difference with the .exe compilation.

Multiplatform (Windows, Linux, MacOS, Android, iOS), easy deployment, latest web technologies, security, posibility to publish in App Stores, minimum file size... will try to publish a FAQ about PWA soon but there is a lot of information on the web.

Best regards.

Vadim has reacted to this post.

#15 · March 9, 2020, 7:43 pm

So, if I understand well Luis, when I put nwjs file into my application compile folder and double click the NWJS file, my application run as a standalone application. But if I double click the index.html, my application will run in my web browser (Google Chrome in my case.)

Is it the way to do it?

#16 · March 9, 2020, 7:58 pm

So, if I understand well Luis, when I put nwjs file into my application compile folder and double click the NWJS file, my application run as a standalone application. But if I double click the index.html, my application will run in my web browser (Google Chrome in my case.)

@rocote, yes more or less... but you should move your whole compiled application into a folder called package.nw (or compile directly there) where the nw.exe is located, and not the opposite. This way your app is not a single .exe but, as VisualNEO itself, a collection of files. I hope you understand fully the possibilities, as this way will eliminate most of the web apps limitations regarding Desktop apps.

Regards.

#17 · March 9, 2020, 8:39 pm

Yes I understand. As a resume...

So I compile my app into a folder called "package.nw" in PWA format. Than I run my app by executing NWJS.exe (windows) or NWJS.app (Mac) included in the same folder (package.nw).

The result was a standalone application running on my computer.

But what happening if all the files are send to a web host service. I know the file (index.html) will be execute automatically. But what about the nwjs.exe now?

Will that be possible to use it as standalone application?

You understand that all the files will be on the web server.

Roger

#18 · March 10, 2020, 9:56 am

Hi @rocote, although it is possible to compile for PWA and NWjs at the same time, the deployment method is quite different in both cases. It has no sense to upload a NWjs application to a web server as it can not be executed from there (although you can zip the whole project to allow your users to download it).

In general:

If you want a web application running within a web browser and easy to install: use PWA (no file system accesss)
If you want a Desktop app (like a .exe): use NWjs (allows system access through NodeJS, and VisualNEO Web plugins in the future)
If you want a mobile app and access to device plugins: use PhoneGap (mobile)

Right now, VisualNEO Web offers a lot of deployment possibilities each one with its own pros and cons. Although there will be common core commands, NWjs and PhoneGap will have their own plugins to help us getting the best functionalities from each one. Note that the web is plenty of information about PWA, NWjs and PhoneGap. VisualNEO Web is just a very convenient way to use them.

Regards.

Vadim has reacted to this post.

#19 · March 11, 2020, 12:09 am

First, thank you very much Luis for your kind support and taking the time to explain all things that are necessary to understand and know about for any beginners.

-- Hi @rocote, although it is possible to compile for PWA and NWjs at the same time, the deployment method is quite different in both cases. --

You are right, i have experimented both compilation method. I can see the difference now Luis.

I have been looking for 'How to lock objects in position'. I probably didn't find the way to do it. Maybe it is in the tutorial.

Luis, thanks you're the best!

asmat and luishp have reacted to this post.

#20 · March 11, 2020, 2:27 pm

Thank you @rocote, I'm glad you are getting comfortable using VisualNEO Web!

PWA Introduction - Forum

PWA Introduction