feat: Add shortcuts for PWA

[boc-the-git]

What type of PR is this?

• feature

What this PR does / why we need it:

Add "shortcuts" to the PWA. Effectively this enables you to open the app on your phone and head to either Meal Planner or Shopping Lists, as opposed to always to the home page. I imagine people are familiar with this concept from other apps, with a long press on the icon.

Production PWA:

Dev/PR PWA:

Which issue(s) this PR fixes:

None.

Special notes for your reviewer:

Icons unfortunately don't work with the Nuxt PWA functionality. Hell, even the shortcuts attribute is undocumented by Nuxt..
There is a years old open issue where people are asking about the icon support, nuxt-community/pwa-module#309

Testing

Manual, on my phone. Confirmed that adding an "icons" attribute to the shortcut breaks the PWA (you can see it in the original commit) so removed that :(

[michael-genson]

Looks good to me. I tried looking into how to make this translatable, but the closest thing I could find was this issue with no updates: nuxt-community/pwa-module#312. So I guess we're stuck with English-only support

[janssenvdh]

I am unable to get the PWA shortcuts to work on iOS. I reinstalled the PWA as instructed in the release notes for v1.3.0. I am using iOS 17.4.1 and I am running Mealie v1.7.0 in Docker.

[michael-genson]

I have an Android phone, however one issue I had was getting the newest version of the PWA after updating my docker image. Try uninstalling the PWA, clearing all of your Mealie-related site data on the browser that launches/installs your PWA, then re-installing the PWA

[janssenvdh]

Thanks for the reply. Clearing the browser history while the PWA was uninstalled did not enable the shortcuts.