wordle-fr icon indicating copy to clipboard operation
wordle-fr copied to clipboard

Add PWA capabilities

Open QuentinWidlocher opened this issue 3 years ago • 15 comments

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.

QuentinWidlocher avatar Feb 11 '22 13:02 QuentinWidlocher

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.

netlify[bot] avatar Feb 11 '22 13:02 netlify[bot]

@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

davidsandoz avatar Apr 14 '22 10:04 davidsandoz

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

QuentinWidlocher avatar Apr 14 '22 11:04 QuentinWidlocher

@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

davidsandoz avatar Apr 14 '22 14:04 davidsandoz

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.

QuentinWidlocher avatar Apr 15 '22 10:04 QuentinWidlocher

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 avatar Apr 18 '22 18:04 richie3366

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. :)

richie3366 avatar Apr 18 '22 18:04 richie3366

Thanks, @richie3366!

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

davidsandoz avatar Apr 18 '22 19:04 davidsandoz

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)

QuentinWidlocher avatar Apr 18 '22 21:04 QuentinWidlocher

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.

richie3366 avatar Apr 18 '22 21:04 richie3366

I was thinking of implementing the Web Share API.

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

QuentinWidlocher avatar Apr 18 '22 21:04 QuentinWidlocher

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!

richie3366 avatar Apr 18 '22 21:04 richie3366

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.

LouanBen avatar Apr 18 '22 21:04 LouanBen

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 👌

QuentinWidlocher avatar Apr 18 '22 22:04 QuentinWidlocher

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

davidsandoz avatar Jul 24 '22 06:07 davidsandoz