added webmanifest to improve mobile (shortcut) experience

[Hanser]

On our kitchen tablet (android), we want to use Recipes. To enable easy access, I created a shortcut on the homescreen. On opening, this just opens the browser with all other open tabs -- not as nice as it could be...

By applying the proposed patch, you can specify how the shortcut should be created. In this case I chose "standalone" to make it look like any other app, which means:

• having a splash screen on startup
• opening in a fresh browser window but like after pressing F11 on desktop -- so without the url-bar, the tabs and the menu buttons -- free space for the recipe!
• closable like an app via the app-switcher-screen

The "fullscreen"-setting would be a little too much I think -- but would also be possible

For further reading, I can recommend https://web.dev/add-manifest/
This site also states the two required resolutions 192x192 and 512x512 of the logo, therefore I added them -- hoping not to bloat the repository with binary data.

Tested on an android tablet with Chrome browser

[vabene1111]

This is extremly cool, i use android browsers basically all the time with recipes and this definitly improves things, i did not know that this was possible 🤔

I will test it out asap and include it in the next update. There are definitly also plans for an android app to support some features like offline caching of recently opened recipes but there are first more imporant things to be done in the applcation itself.

[vabene1111]

ok so i have tested it an really like it.
I only see aone issue: it is no longer possibel to open multiple recipes in different tabs to lookup stuff.
I use that somewhat regularly but its not important for me, just not sure how others see this.

I guess a good solution would be to make a different navigation on mobile devices where "recently vied" recipes are included 🤔

Since you are a little more into the topic: do you know of any way to make it up to the user which shortcut is added ?

[Hanser]

First of all thanks for merging my PR!

You are right, I did not think of multiple tabs being used for one meal.
Haha, Since you are a little more into the topic -- Maybe two hours of googling ahead of you ;)
My thoughts on this:

• You could make the json manifest-file dynamic and make the user select, which type of shortcut should be generated the next time he makes one (fullscreen/standalone/minimal-ui/browser). This is probably the easiest way. If you ask me, the user should be asked for the preferred type everytime he makes a shortcut and the website's choice should only be the predefined but changeable setting. But for this you would need to talk to the android guys and they probably want to leave the decision to the website owner.
• The other option would be to use the website without a home screen shortcut. When you open it e.g. via a bookmark in the browser, you can still have the multitab experience. This is a little less userfriendly, thinking of grandma...
• The third option is the big one but maybe with a lot of potential. ;) I personally don't like "recent views" too much, since it can get confusing quickly. You could instead introduce a meal model. It could be either generated manually by draging recipes together or automatically by using the "plan for the day". The meal would be a combination of recipes to cook for e.g. "lunch today". This combination could then be cached offline and displayed in a special way. You could for example use tabs on the website itself to quickly switch between them, not the browser tabs. Or you display them in columns side by side. Because of the fine granularity of the recipes with waiting times and preparation times you could even make suggestions for the order in which the meal should be made. I mean merging the timeslots of the different recipes for an optimal workflow (e.g. preparing a step of the next recipe while the first one is baking). Of course the cook should be able to shift the timeslots easily to match the personal preferences. But at least you would have a starting point and take some time management calculation off the cooks head. This would then also automatically lead to the starting time preparing the meal with respect to the time it should be ready to eat.

[vabene1111]

The third option sounds really cool but is probably too much work right now as other features have priority.
The user setting sounds like the way to go and it should be pretty easy to generate/change the manifest fiel depending on a user setting.

I am currently playing around with some vue stuff but will take a look at a setting afterwards but this feature will definitely be in the next release. Thanks for the detailed feedback and consideration of different options!