search

insin / react-hn

React-powered Hacker News client
https://insin.github.io/react-hn
Other
2.18k stars 330 forks source link

Upgrade to be a Progressive Web App #20

Closed addyosmani closed 8 years ago

addyosmani commented 8 years ago

I've been investigating how we could turn ReactHN into a Progressive Web App with some offline support using Service Workers.

Some of the specific benefits this would bring include quicker time-to-interactive (if I make a few architectural changes), faster first paint/load for subsequent visits and a slightly more pleasant 'add to homescreen' experience for folks using react-hn on mobile (e.g Chrome on Android). The latter can be accomplished using a Web App Manifest. I'd be happy to PR one in (they look like this).

There's https://github.com/GoogleChrome/sw-precache for generating a Service Worker of files to precache so we can move towards instant loading on repeat visits and offline support. I've used this successfully in a bunch of projects. Given we're using WebPack here, we could also use offline-plugin by @nekr to ease some support for SW in. I guess that's something you could try incorporating into https://github.com/insin/nwb/blob/master/src/createWebpackConfig.js if interested via the webpack config object.

Happy to chat more if interested in the updates needed to make this happen.

Btw: Because we're using Firebase as the backend, we'll need to spend a while figuring out how to properly make those responses work offline as Firebase is currently limited to offline providing offline support for the current session - not once the user has returned to the app or launched the fullscreen PWA.

NekR commented 8 years ago

I guess that's something you could try incorporating into https://github.com/insin/nwb/blob/master/src/createWebpackConfig.js if interested.

If people here are interested in it, I'll be happy make a PR for it.

addyosmani commented 8 years ago

Thanks @nekr! :) Let's see if we can convince @insin these changes are worth bringing in. They'd definitely increase my ability to use this client daily.

insin commented 8 years ago

I'd love to make it into a Progressive Web App - it's something I've been meaning to investigate in general for a while now, but my own free time for programming is down to a few hours a week at the moment.

Definitely interesting in a PR for this, and any changes necessary to support it :+1:

addyosmani commented 8 years ago

Fantastic :) I started hacking on a prototype of this last night and will try to PR in a piece at a time.

So far I have caching for a lot of the UI working and you can view story pages you've previously viewed offline.

Comment threads do not yet work offline and I didn't want to try approaching it without checking what you thought first :) Would HNService or the stores be the best place to try layering in caching for comments?

NekR commented 8 years ago

I'll be able to make a PR tomorrow (Monday). But not sure what exactly you want to cache in SW. @addyosmani do you cache dynamic pieces from main thread? If so, SW just for app-shell might be enough.

addyosmani commented 8 years ago

@NekR I've filed two PRs for a webapp manifest and SW support using sw-precache and sw-toolbox for now. I'd be interested in seeing what SW support using offline-plugin would look like (if you have time).

When I tried to get offline-plugin working with this project locally, I ran into a few issues (probably because I'm dumb) :)

My (lack of) knowledge of offline-plugins internals is probably showing, so I just went ahead and used the libraries/build tools I do know how to use for this problem (sw-precache and sw-toolbox). Because they don't need to work directly with webpack is was quick to get those working. Thoughts welcome on the offline-plugin bits!

NekR commented 8 years ago

@addyosmani Thanks for detailed info :)

Yes, I'll try to provide offline-plugin's version of SW.

My plugin is kind of new tool, in compression to sw-toolbox or sw-precache, so it lacks a lot of important functionalities right now, but I am working on. More people use it, more info I get about what is needed to be done. I am working on a v3 release at a moment (v3 branch) which should solve most important issues/features missed in offline-plugin.

Once I'd added the webpack plugin config for it to the project, ...

There is a way to cache external assets ('external' relatively to webpack's build output), but it cannot handle CORS requests in a v2, v3 will support it. Also you are using fastest network strategy for such resources and I am currently focusing only on cache-first strategy.

Changing the scope of files offline-plugin looked at still resulted in it ...

Yeah, it's a bit complicated there. Basically, what you need is a relativePaths option, which generates paths to SW relatively to build folder. Also depends on webpack.config itself, I didn't looked yet at this project's config, so cannot say for sure what is needed there.

Anyway, I think I still have to do some more work on improving offline-plugin to make it ready for more complex PWA than I have at a moment :-)

Also, if you are interested, here I track progress of v3: https://github.com/NekR/offline-plugin/blob/v3/CHANGELOG.md

insin commented 8 years ago

I've added you both as collaborators, as I won't be around to merge PRs due to family stuff.

addyosmani commented 8 years ago

@insin Completely missed your last comment :) That's awfully kind of you. Thanks for adding us!

insin commented 8 years ago

And thanks in kind for using react-hn for this - my time for open source has almost completely disappeared due to emigrating and working nights.

I've been using what time I have for nwb as I started using it in a few projects at work. Once I get time to review what it takes to set up a Progressive Web App, I'd like to make it easier to build them using nwb by moving as much of the repetitive work and config as possible over to it.

insin commented 8 years ago

@addyosmani I should be able to build and release v1.4.11 via insin.github.com/react-hn when I get home later, or give you collaborator access if you want to do it yourself - your call.

addyosmani commented 8 years ago

@insin If you could do a deployment that would be fantastic. I'm also more than happy to push if that's more convenient for you.

I've been using what time I have for nwb as I started using it in a few projects at work. Once I get time to review what it takes to set up a Progressive Web App, I'd like to make it easier to build them using nwb by moving as much of the repetitive work and config as possible over to it.

I think that would be very valuable. Tooling for PWAs are still somewhat in their infancy and a lot of folks would benefit from the friction in getting them setup being lowered. Would love to see how nwb could help there.

addyosmani commented 8 years ago

Another addition to this work over in https://github.com/insin/react-hn/issues/25 now. After this I'd like to see what we can do about support for universal/isomorphic rendering and what perf improvements can be achieved with that path.

addyosmani commented 8 years ago

With the latest version now up on the repo, let's close this one and focus on some smaller iterative improvements :)