Progressive Web App on CentOS / Apache

[csdude55]

I'm just now starting to play with this new-to-me technology, so bear with me. The info from Google starts with installing Web Server for Chrome:

[codelabs.developers.google.com...]

But I'm running an Apache web server on my semi-managed virtual CentOS server. Any clue on how to get started with that? I'm not having any luck finding info on Google, everything just eventually points me back to that page.

[csdude55]

Or do I just need Web Server for Chrome for development, and when it's done I publish it to my CentOS server?

[NickMNS]

Just for messing around and doing the tutorials all you need is a simple webserver that can run locally. I use the default webserver that comes with Python Bottle.py framework. But you can use anything and then simply run it off of your localhost. The Chrome server they link to should be fine, but you may want a PHP server if you want to use PHP to build the pages and route requests on the server side.

[csdude55]

I'm confused by the whole concept, then.

It came to my attention when I went to CNN and it suggested downloading their app. Then I did, and all it does is open a page that says "CNN Progressive Web App" for a few seconds, and then it loads their homepage.

This is exactly what I want... I don't need the user to cache my pages because they're all dynamic and change constantly. I just need an easy way for them to simply access my site.

I don't have a local webserver, and never have; I just code directly to a sandbox subdomain on my server, and when everything is good I copy it to the main /www/ directory. Everything is written in PHP and Perl... am I going to need to install a Windows version of PHP and Perl, rebuild everything locally, and then upload it back to my regular server?

[NickMNS]

I don't have a local webserver, and never have; I just code directly to a sandbox subdomain on my server

If you have the sandbox, just use the sandbox. The reason the tutorial requires a webserver is simply so that actual requests can be sent between a server and client. A big part of PWA's is that the service worker that lives on the user's device intercepts the requests and decides whether new content/data from the server is required or whether existing content/data stored locally is sufficient and still valid.

This is exactly what I want... I don't need the user to cache my pages because they're all dynamic and change constantly. I just need an easy way for them to simply access my site.

PWA's can be used for many things, you can take what you need and forget the rest. A PWA can provide push notification, that alerts a user to new content without the user needing to access your website or it can be used to simply make your website available when offline.

The functionality that you are alluding to provides the user with a desktop icon (manifest) that will allow the user to click and directly access the website's content. This can easily be done. But it is of limited benefit and interest by itself. Knowing your situation (the poor connectivity of your users) I would urge you to consider caching content. The idea is that first you cache all static content, as such the user only ever needs to get dynamic data from the server, this reduces bandwidth. Secondly, if the user is not connected to the network they may still want to access the information you provide. Then if the user does find a connection the content can be automatically update with the latest information. Again, if your PWA is only transferring data and the static content is stored locally the update can happen quickly so in an area with spotty internet coverage a weak signal may be sufficient to get the user what they need, whereas, a typical website would be consuming band width downloading fully formed html files and may never be able to get the complete page successfully downloaded.

[csdude55]

Well shoot, man, that sounds perfect! The Google tutorial doesn't even hint towards that, though. And push notifications would be awesome; I was about to start sending a text to users but there's a fee for each one, so I was nervous about the expense.

I see you've been messing with PWA for a year or so... can you point me to a tutorial or something on how to do what you're talking about?

[NickMNS]

I followed the weather-app tutorial that you linked above, it is pretty complete except for the push notification part. I haven't yet implemented push notifications it is on my list of things to do in the coming days and weeks. There is a specific tutorial for that [codelabs.developers.google.com...] I haven't followed it, so I can't really comment about how good or bad it is.

From my research the difficulty with push-notification is the server side implementation because your server needs to push data to the clients. Typically the server gets a request and responds but push is the opposite the server sends data to the client without any requests, which means that your server has to keep threads open to communicate with the client. The beauty of it is that the client doesn't need to continuously poll the server to check for new content. If my description sounds confusing it is because I haven't fully grasped it. I'll report back once I've figured it out.

For now I'm messing around trying to figure out how to convert emojis from unicode to utf-8 to utf-16 and back... aarrgh! I've spent the last three day messing with this trying every single permutation and combination, and that in Python, Javascript, and JSON ...

[csdude55]

For now I'm messing around trying to figure out how to convert emojis from unicode to utf-8 to utf-16 and back... aarrgh!

I went down that road for a bit, too, and then discovered that they wouldn't work on computers using Windows 7 :-( So I went a different route.

First, I downloaded the "Appl" of all of these as one single sprite image:

[unicode.org...]

Then I set up a CSS that I load at the bottom of the homepage (I actually set up an overly complicated system so that it sets a cookie once it's loaded, then I test for that cookie on each page to try and reload it if necessary), and in it I created a class for each unicode name; eg, .u1f600 { background... }.

I'm saving the unicode in my database, then in PHP I just convert the it to an <img> tag where the source is a 1x1.gif with the appropriate sprite classes.

From my testing, as long as the initial CSS has been loaded then it loads just as fast as using the unicode, but without worrying about compatibility. Eventually I'll go through their user agent and only use PHP's str_replace if they're using something older than Win10, and in a few years I hope that it will be completely unnecessary.

[NickMNS]

That's interesting I'll have to think about that. I'm not sure if it will work in my case as the emojis are being used in text messages and/or read from text messages.

[csdude55]

Ahh, I see... I don't think any of the text readers would have problem with modern emojis, then, so my backup plan wouldn't be necessary, and probably wouldn't work at all. I'm not even sure you have to code it, you could probably copy and paste the emoji image in to place.

Like this (go to "Using the Emoji Directly"):

[kirupa.com...]

[NickMNS]

Here is the link to the full Google PWA ressource including video tutorials.
[developers.google.com...]

I'm starting on the push notification now. I'll let you know how it goes.

I managed to get my emoji issue sorted. I'm just using the characters no images, the issue is that the encoding changes depending on where the characters are coming from or going to.