search

LouanBen / wordle-fr

"Le Mot" un Wordle en français.
https://wordle.louan.me
GNU General Public License v3.0
127 stars 40 forks source link

Add PWA capabilities #44

Open QuentinWidlocher opened 2 years ago

QuentinWidlocher commented 2 years ago

I play this game everyday and it's a shame I can't launch it from my apps like the official Wordle so I wanted to fix this.

Added a manifest.json and <meta> tags matching the brand of the app. Added icons sizes for the manifest. Added a simple service worker named sw.js that caches only icons and fonts.

Tested on a Android Chromium with https and I had the native banner prompt to install the app + it started nicely with a splashscreen as intended.

It does not work offline because I didn't cache the javascript files but it could.

netlify[bot] commented 2 years ago

Deploy Preview for wordle-fr-louan ready!

Name Link
Latest commit 8fe7590b3b554c238624f3ee8c4d27643adfe17b
Latest deploy log https://app.netlify.com/sites/wordle-fr-louan/deploys/625e6d8a7e172700082cdf26
Deploy Preview https://deploy-preview-44--wordle-fr-louan.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

davidsandoz commented 2 years ago

@QuentinWidlocher Could you consider adding the file apple-touch-icon.png for the logo resized to 180x180px?

That's the iOS way to use a specific icon when we bookmark a web app on the home screen.

I came here to see if there was any plan or discussion around this and found your PR where this icon would fit well.

We could also add

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

in the <head>, for completeness. But I understand that it works even without that.

How it looks like currently, without the apple-touch-icon.png:

IMG_7D0EB451A5E3-1

QuentinWidlocher commented 2 years ago

@davidsandoz it should be ok now ? I cannot test right now but I don't think I forgot anything

davidsandoz commented 2 years ago

@QuentinWidlocher Yes, I tested with the Netlify deploy preview, and it works 😃 Thanks!

Nit-picking: The icon appears to be a bit blurry. Checking the other versions of the image, it appears that all the icons that should be larger than 96x96 are at 96x96. Could it be that the 192x192 version was taken for the apple-touch-icon, to be down-scaled to 180x180, while it actually got up-scaled from 96x96?

IMG_B44D06A2966A-1

QuentinWidlocher commented 2 years ago

Yes, I use a smaller version of the logo and upscaled it, that's why it's a bit blurry. One should use the .svg version and generate proper sizes of icons.

I don't have tools to do that actually, and I'm not sure this PR will be merged so for now, I'll leave it like that unless it's needed.

richie3366 commented 2 years ago

We are motivated to merge this as soon as it is ready. Here is the svg file of the logo/icon. If you need anything else, I'd be glad to help. Thanks! le_mot_icon

richie3366 commented 2 years ago

I'm noticing I forgot to thank you for the great work you put into this PR, @QuentinWidlocher. And also thanks @davidsandoz for participating into the improvements. :)

davidsandoz commented 2 years ago

Thanks, @richie3366!

@QuentinWidlocher Here are the PNG files, generated from the SVG, with the matching size:

QuentinWidlocher commented 2 years ago

Thank you both, I'll edit my PR tomorrow with the right icons 😉

Now that you're here, what would you think of a PR with web sharing for the "Share" button in the game ? (Instead of just copying the emojis)

richie3366 commented 2 years ago

Thank you both, I'll edit my PR tomorrow with the right icons 😉

Alright, thanks!

Now that you're here, what would you think of a PR with web sharing for the "Share" button in the game ? (Instead of just copying the emojis)

What do you mean? Making a tweet button with a prefilled text? Some people share their result via other social media platforms, I wouldn't be surprised to see people posting them through Discord or Slack. But maybe I misunderstood your suggestion. If we do something about it, I'd at least keep the copy method as the main way to do it.

QuentinWidlocher commented 2 years ago

I was thinking of implementing the Web Share API.

It supports basic copy/paste as we can see with the official wordle.

richie3366 commented 2 years ago

Oh, right! I think it's worth a debate (with @LouanBen's input at some point) in a dedicated issue that I encourage you to create whenever you have the opportunity. Maybe it would be better if we use French to exchange our ideas/pros/cons, but you are free to decide to write it in English if you prefer to be more inclusive. And I'll give my thoughts there after some tests I'd like to make on my end. Thanks!

LouanBen commented 2 years ago

Hey there!

I may be wrong, but it seems that the Web API isn't supported enough to be implemented? Especially on Firefox. https://caniuse.com/?search=web%20share

I should also check out on the users, if they prefer the current method or the method used in the original Wordle. I feel like the users are getting used to copy/paste.

QuentinWidlocher commented 2 years ago

It's well supported on mobile (Chrome + Firefox) and it's progressive enhancement, meaning it can be added only on devices supporting the feature, old browsers will still display the copy/paste method.

I understand you don't want to change people's habit too much but I think the Web Share API is only additive and pretty straightforward to use imo

I'll create another PR tomorrow if I have time so we can speak french if you prefer 👌

davidsandoz commented 2 years ago

@richie3366 @LouanBen, do you need anything else to move forward with merging this PR?