Make required changes to allow Progressive Web App functionality

[mpember]

After seeing you have made some changes to the code, I had another look at what I was trying to do with the copy on my server.

This is not so much a pull request as it is an FYI submission. I don't expect all changes to be accepted / merged.

The PWA functionality means the code can be installed to run like an "app" on a mobile device (and even some desktops).

As part of the changes, I also took the chance to clean up some of the file naming syntax. e.g. the JS files are now named to match the relative PHP file that references them. I also created a simple favicon using this flat icon. By removing the reference to the favicon on your non-HTTPS URL, it removes the security-related issues that result from mixing secure and insecure URL.

Technically, it is possible to amend the serviceworker.js file to include the urls of each recipe (and any images). From there, a change of version number in the manifest.json file would cause the 'app' on the phone to sync any new recipes and cache them locally. In the current setup, no caching of recipes is done.

BTW, you have two recipe templates, with a slight difference between the two.

Note: the URL in my serviceworker.js include the subdirectory that is in the URL for my copy of the code. It would need to be removed at your end.

[jeffThompson]

Oh wow! PWAs are new to me, really interesting.

A few questions:

• If I understand this right, this means the site will still run as usual in the browser, but your additional code allows it to be installed on mobile devices?
• I'd love to test this out – can you point me to a tutorial on how to use PWAs?
• I noticed a file whose name included raspberry pi – is your version specifically targeted to RPi? Would there be any issues on another system or additional files needed?

I really appreciate you adding this code! I'll need to think on this a bit to decide if this should be automatically included in the official release. If it doesn't add a ton of overhead and can easily be maintained (ex: if PWAs are well adopted and aren't just a niche thing) then it might be a really great addition. If not, like you say this might be better as your own fork – I can point to that in the readme for folks who want that functionality.

PS: thanks for pointing out the two template files! The _template.md was supposed to be hidden – it's my personal copy for quickly making new recipes :)

[mpember]

The Raspberry Pi reference is because I cut-n-paste the code segments from an existing project. The correct URL should be the icon in the images folder (in this case images/cookbook-192.png). That's my mistake. None of my changes are not Pi-specific.

The PWA update should perform the same as if you had opened the website in a browser on your phone. It uses none of the PWA-specific functionality that would impact desktop functionality. For those on a Windows environment, Chrome and Edge both support installing the PWA to the desktop. It will then look like an application and run from an installed icon on the start menu.

https://www.tigren.com/examples-progressive-web-apps-pwa/

PWAs are gaining steam. Both major mobile platforms are either currently or will soon support the 'release' of PWAs via their app store.

Here's a quick tutorial: https://www.geeksforgeeks.org/making-a-simple-pwa-under-5-minutes/

If you want to see the code in action, I can email you a link to the version running on my server. I can't promise the same variety of recipes ☺