search

SethClydesdale / genki-study-resources

A collection of exercises for practicing what is taught in Genki: An Integrated Course in Elementary Japanese.
https://sethclydesdale.github.io/genki-study-resources/lessons-3rd/
MIT License
822 stars 280 forks source link

PWA (Progressive Web App) #154

Closed AlexApps99 closed 2 years ago

AlexApps99 commented 2 years ago

Making this site a PWA would be useful for two reasons:

If this sounds good, I could probably put together a PR at some point.

Great resource so far :+1:

AlexApps99 commented 2 years ago

Are there any sources for the icons (genki.png and genki-thumb.png) that are larger? Chrome requires icons of 512x512 for the splash screen, and 192x192 for apple-touch-icon.

As well as this, how do I edit all the pages' HTML at once? I couldn't find any templating system, so I assume I just find and replace across all files?

SethClydesdale commented 2 years ago

Hello @AlexApps99!

That does sound nice! It seems like I lost the editable version of those icons, but I was able to recreate a larger variant that you can use.

genki-alpha

The text used is Meiryo UI btw.

Ah yes, everything is setup as static HTML (without templates) so the repo could be downloaded and used offline as is, with zero setup. But for editing all pages at once, I used https://github.com/zzzprojects/findandreplace which is pretty handy.

AlexApps99 commented 2 years ago

How do I edit CSS/JS files? Need to use the same minifier so git diffs aren't too big

AlexApps99 commented 2 years ago

I have a prototype up at https://yttriferous.dev/genki-study-resources that works, but is still rough around the edges. It automatically downloads 100MB of content when you first connect, without any prompt or warning. Some of the pages also have broken CSS. I'm not sure if it's eligible to be installed as an app on homescreens yet, either. Before I make a PR, I will be sure to address those issues and make the feature a lot nicer to use.

AlexApps99 commented 2 years ago

Screenshot_20211120-211933_One UI Home.jpg Screenshot_20211120-211944_Chrome.jpg Splash screen Screenshot_20211120-211910_Chrome.jpg (This is while offline)

SethClydesdale commented 2 years ago

Nice work, it looks good so far!

For minifying JS/CSS I used clean-css and Uglify JS 3 in a minifier extension for brackets.

AlexApps99 commented 2 years ago

Sorry for the pause, I'm on holiday right now using my initial work for off grid studying and it's going well. Before I create a PR, I want to add a setting to the settings menu so it will only be downloaded when asked, and I want to add messages about the removal of voice clips stroke order etc (and maybe an option to download it)

Once I get back I'll try to sort that all out.

Thanks for the great resource

SethClydesdale commented 2 years ago

Hey! Thanks for the update. It's no rush, take your time and enjoy the holidays! :)

AlexApps99 commented 2 years ago

Sorry, I've put this off too long and I don't think it's likely I'll end up finishing it. Thanks for understanding