Add PWA capabilities #44
Conversation
✅ Deploy Preview for wordle-fr-louan ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| </head> | ||
| <body> | ||
| <body style="background-color: #0E0E0F"> |
There was a problem hiding this comment.
This makes the app load the first time with a dark background, a bit nicer to the eyes imo 😌
LouanBen
added
the
PR : waiting for review
|
@QuentinWidlocher Could you consider adding the file 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 How it looks like currently, without the
|
|
@davidsandoz it should be ok now ? I cannot test right now but I don't think I forgot anything |
|
@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?
|
|
Yes, I use a smaller version of the logo and upscaled it, that's why it's a bit blurry. 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. |
|
We are motivated to merge this as soon as it is ready. Here is the svg file of the logo/icon. |
|
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. :) |
|
Thanks, @richie3366! @QuentinWidlocher Here are the PNG files, generated from the SVG, with the matching size: |
|
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) |
Alright, thanks!
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. |
|
I was thinking of implementing the Web Share API. It supports basic copy/paste as we can see with the official wordle. |
|
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. |
|
Hey there! I may be wrong, but it seems that the Web API isn't supported enough to be implemented? Especially on Firefox. 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. |
|
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 👌 |
|
@richie3366 @LouanBen, do you need anything else to move forward with merging this PR? |
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.jsonand<meta>tags matching the brand of the app.Added icons sizes for the manifest.
Added a simple service worker named
sw.jsthat 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.