Skip to main content ↑ ↓
PWA Progressive Web App Started by Spuds · · Read 76400 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

PWA Progressive Web App

I've been working on adding this feature to 2.0 and its now it is available for testing.

To make this work, the following things were added to elk20

  • a webmanifest file. <link rel="manifest" href="./elkManifest.php"> if you look at our page source you will see that new line towards the top.  It simply calls a php file in the site root which then builds and Outputs the json file. 
  • a new area in the Admin panel to set up several things, icons, name, colors. see attachment for an example.
  • new properly sized icons.  You need one at 192x192 and one at 512x512.  There are default ones but of course you would create your own.
  • a new service worker JavaScript file (we have had one since 1.1.x for PUSH notification, but many updates were needed)
  • a couple of theme meta data tweaks
  • addition of an offline template for times when you may launch the app (say from your phone) but not have internet access

You can enable just the manifest file, which some devices use to create better shortcuts. 
If you enable the PWA (you must have manifest enabled as well) then you can "install" the app, which will look mostly like it does in a browser tab when opened, but you can place the app on your desktop or home page or .... and then launch it immediately since the landing page is in the cache (network first with cache fallback)

I chose to employ a cache based PWA, so the app will cache static assets like CSS and JS, it will also cache Images, and lastly it will cache the site landing page and the offline page. 
There are several automatic maintenance functions which prevent the cache from growing to large.  It will also remove the app / cache when you disable it in the Admin panel.
It will clear the app cache when you clear the cache on your site. 

There are several cache strategies that our service worker uses.  Some assets are network only, others network with cache fallback,  others are cache first with network fallback and some are cache first with a network fallback/refresh. I went back on forth if to even use the cache and then how to cache items so this may change and also why there are so many types.
It also employs preload capabilities for best performance on fetch events.

I've only installed the "app" on a couple of devices, so I'm sure there are going to be a few bugs to work out as testing progresses.

For those familiar with the development tools built into browsers, you can see/monitor the service work and its caches

Re: PWA Progressive Web App

Reply #1 –

Quote from: Spuds – I've been working on adding this feature to 2.0 and its now it is available for testing.

Hmm... I remember a while back I suggested something like this, since I learned and PWA'd all my sites.
Nice to see that it'll be in the admin panel to set up. A lot simpler than making the manifest.json file and adding the code to the index.template file. :)

Re: PWA Progressive Web App

Reply #2 –

The admin interface makes creating / updating the basic manifest easy, but a manifest w/o a sw.js is ends up as pretty shortcut/bookmark.  I allowed for that option as that is all some sites may require.

Adding in a functional service worker allows one to install it, like an app from the play store, gives you some extra SEO points.

I went from a simple sw.js shell that simply allowed it to register/install/activate but really did nothing .... to what I currently have for testing where I make use of a cache so the app will at least launch a homepage even if you are offline, and then "complain" about being offline. 

Since a forum tends to be all dynamic content, its difficult to have an offline experience where one could potentially reply while offline and have it post when your network comes back, stuff like that, but that would be a large project just on its own  :shocked:

Anyway, hope folks test it out.

Re: PWA Progressive Web App

Reply #4 –

Quote from: Spuds – Since a forum tends to be all dynamic content, its difficult to have an offline experience where one could potentially reply while offline and have it post when your network comes back, stuff like that, but that would be a large project just on its own   :shocked:
If member is offline, keep it as a draft instead?

Re: PWA Progressive Web App

Reply #5 –

Quote from: ahrasis –
Quote from: Spuds – Since a forum tends to be all dynamic content, its difficult to have an offline experience where one could potentially reply while offline and have it post when your network comes back, stuff like that, but that would be a large project just on its own   :shocked:
If member is offline, keep it as a draft instead?


If you are offline, you should take advantage of that, turn off the borg tether ..



.. and go play!
Last Edit: March 27, 2024, 11:47:56 am by Steeley
// Deep inside every dilemma lies a solution that involves explosives //
 

Re: PWA Progressive Web App

Reply #7 –

Quote from: ahrasis – If member is offline, keep it as a draft instead?
Right now the draft is server dependent ... however we could save it to the PWA cache when offline.   Something to consider for the future as enhancements are made to the PWA.

Re: PWA Progressive Web App

Reply #8 –

So, if member is offline, keep it in PWA cache, but when he is back should it immediately be posted or prompt him whether he wants it to be posted or discard it?

Re: PWA Progressive Web App

Reply #9 –

I was thinking that if offline and they hit POST then it would show a message such as "You are offline, would you like me to send the message when the connection is restored" or something like that.  Otherwise it would stay as a draft, and maybe push the draft when the connection is restored.

Re: PWA Progressive Web App

Reply #10 –

Quote from: Spuds – I was thinking that if offline and they hit POST then it would show a message such as ......


"You are off line - click 'save as draft' then turn this off ...
....and go play!"

{sheesh, you thought I was making funny?} :rolling_eyes:

:stuck_out_tongue:

Quote from: ahrasis – So, if member is offline, keep it in PWA cache, but when he is back should it immediately be posted or prompt him whether he wants it to be posted or discard it?

No auto-post... but maybe a pending message flag.. invariably events will overcome the post in the meantime, the poster will think better of it, and go to edit/delete it only to discover that at some point while playing the connection was re-established and the (now outdated/unrevised) post was sent unknowingly..:face_with_symbols_over_mouth:
[/quote]
Last Edit: March 31, 2024, 06:00:36 pm by Steeley
// Deep inside every dilemma lies a solution that involves explosives //