Feature Request: Make Crosswordle a Progressive Web App!

nik3daz commented 2 years ago

This basically makes Crosswordle "officially" installable and various browsers will varingly promote it as being so. I currently have Crosswordle as an 'Add to Homescreen' shortcut on Android which is Fine but comes with a tacky-ass Chrome logo and other suboptimal behaviors.

All you need to do to get started is add

<link rel="manifest" href="manifest.json">

inside the <head>.

A manifest.json might look like:

{
  "short_name": "Crosswordle",
  "name": "Crosswordle",
  "display": "standalone",
  "icons": [
    {
      "src": "img/icon-48.png",
      "sizes": "48x48",
      "type": "image/png"
    }
  ],
  "start_url": "index.html?launcher=true",
  "theme_color": "#a040a0",
  "background_color": "#EEEEEE"
}

Also, since you have all the puzzles in archive, we can work towards some awesome offline support.

WDYT?

PS: This is one of the features that I work on in Chrome! =D

mmmewk commented 2 years ago

@nik3daz Already have a manifest.json that looks pretty similiar to that, just the default one that create-react-app sets up.

What does launcher=true do?

I don't have an android device so can only see what it looks like with safari on IOS. Has the progressive web app been working for you? I imagine it doesn't refresh with the new puzzle every day and I haven't yet implemented pull to refresh

mmmewk commented 2 years ago

Also after making the first guess its should work offline. Thats because it loads the wordlist async when you make the first guess. After that everything should be stored in indexDB so it all works offline.

nik3daz commented 2 years ago

Sorry to leave you hanging, I've been on a climbing holiday.

I think you're probably missing a Service Worker to become a "real PWA". I think this might be a reasonable minimal one?

The Application pane in Chrome Devtools should help figure out if it's working right.

Once it works, you'll see an install icon even on desktop Chrome.

mmmewk / crosswordle

Feature Request: Make Crosswordle a Progressive Web App! #33