Skip to main content
Recent Posts
1
Feature Discussion / Re: PWA Progressive Web App
Last post by Steeley -
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!
5
Feature Discussion / Re: PWA Progressive Web App
Last post by Spuds -
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.
6
Feature Discussion / Re: PWA Progressive Web App
Last post by Burke Knight -
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. :)
8
Feature Discussion / PWA Progressive Web App
Last post by Spuds -
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