Add service worker for offline access to editor

[humphd]

This is still in progress, but it's starting to work (I was able to load the editor fully offline). I'll keep iterating on it.

It's a bit different than what I had to do in Brackets because of the dynamic nature of our URLs, especially with localization adding lang info to everything. I'd like to figure out how to move more of our CSS, JS, and images to precache vs. dynamic. I don't understand why they don't seem to exist in dist/ builds.

[humphd]

I need some advice on what to do with a few things. Running the editor page 100% offline works, however, we'll need to add special cases to deal with all of this:

• Help - this opens a new tab to our github wiki. If you're offline, that's going to break. I also don't have a good way to cache that for offline use, since it lives on a separate domain. Maybe clicking Help and having it open a tab that just fails to load is OK? If it isn't, what do you want to do?
• Locale Switching - this will break if you try to switch locales. We dynamically cache the content for a locale when you load it. So if you want fr you just need to load it while online, and then it will work. But you can't switch while offline. What should we do with this menu while you're offline? Is it OK to just have it fail? If not, what should we do?
• Sign In, Create an Account - we can't reach the login server while offline, so it's impossible to do much here. We could give you an "offline login page" that just gives info when you try to load those pages (i.e., have service worker give you a different page). What should we do here?
• Publish - we can't publish while you're offline. We probably need to give a message that indicates this somehow?

It's also hard to know when you're actually offline completely. There is navigator.onLine and the online and offline events; however, these only tell you when you're connected to a network vs. whether or not you're connected to the Internet proper.

@flukeout, @gideonthomas can we discuss soon? I'd like to get this in before May.

[humphd]

Thought:

We listen for the online and offline events, and when we do, we swap the header components above for something like this:

This would solve the problem of all those external services being unavailable, but still allow you to keep working.

[flukeout]

I like your solution @humphd - makes sense. If you can just slap an .offline class around the userbar, we can do the rest with CSS. I'm assuming that the localized string for "working offline" will have been cached when you did have a connection, right? As long as it's in the DOM it gets cached?

[humphd]

OK, so if we're happy with this general direction, I think we can start by getting this PR into shape and land it, then do follow-up PRs that add the UI stuff based on the events I'm adding. I'll do a bit more work on this and get it ready for review.

[humphd]

@gideonthomas I am seriously confused at how Thimble loads, and I'm hoping you can help me fix it.

Basically, I want to do the following:

• have our requirejs build task create bundled main.js files for each of the editor, homepage, and project-list. Right now, we seem to just copy the whole src dir over, and then it loads the files separately. I want to shut off having to dynamically cache stuff like /node_modules/*
• statically generate our CSS from LESS so I can precache them. Right now I have to dynamically cache it since we seem to generate it at runtime.
• get our /img dir properly copied to dist/. Right now it's empty, and I have to dynamically cache.

Some of this we could do in new PRs vs. this one.

Another question: I've only done the service worker cache stuff for the /editor, not the homepage or project list. How should we deal with these?

[gideonthomas]

@humphd let's chat about this over a call? I'm not sure I fully understand the scope of the problems.