Automation with Webstorm File Watchers

Automatically update the cache.manifest file whenever you edit other project files.

HTML5 sites can run offline by using Application Cache. If you haven’t used this before here’s a good introduction to AppCache.  The main point you’ll need to understand for this post is that there is a manifest file that lists out the resources to cache for offline use.  The browser checks the manifest before getting any file updates so it’s necessary to modify the manifest if you change your site.  This is a tedious chore.  And as any good, lazy developer, I wanted to automate this process.  The below Bash script could be used to modify the file in any tool, but I’ve been working in Webstorm 8 on a Mac recently, so that’s what’s in this example.

Using: Webstorm 8 on a Mac (OSX, Mavericks) and the Bash Shell

Here’s the full script, there’s a download at the end of the post. The file is named updateCacheManifestTimestamp.sh. It’s not very long but it’s got a bunch of stuff going on.

[code lang=”bash”]
#!/bin/bash
# open cache.manifest and replace line 2 with the output of DATE as a manifest comment
# save that output to a temp file
# rename the temp file back to cache.manifest overwriting the original
sed -e "2s|.*|# `date`|g" "cache.manifest" > "cache.manifest.tmp" && mv cache.manifest.tmp cache.manifest
[/code]

First off, it uses sed to update a file.  Sed is kind of a complicated thing to call so let’s break it down.

-e appends the lists of commands

"2s|.*|# `date`|g" does the work. The first part, 2s|, says that on the second line do a substitute, also set the delimiter to a pipe (|). This is important. The pipe will separate the commands that sed will use.

.* is a regular expression and says replace the whole line.

# `date` says insert a hash (#), a space, and then the output of the date command. The backtick (`) characters around date are how we get bash to output date into our replacement string for sed.  It’s important that these are backticks and not single quotes.  If you’re like me and you haven’t used this before, it’s under the tilde (~) on your keyboard.

The next few commands are simpler. They say to open cache.manfest in sed and send the output to cache.manifest.tmp. The && say to then run the next command. mv moves the temp file to a new name, effectively renaming it back to cache.manifest.

Clear as mud? Great!  Let’s move on…

Running it with Bash

Open up your terminal on the Mac or in Webstorm and cd into the directory that holds updateCacheManifestTimestamp.sh. Type this and hit enter:

[code lang=”bash”]bash updateCacheManifestTimestamp.sh[/code]

Using it as a Webstorm File Watcher

File Watchers in Webstorm are used to watch for changes in files. They’re used to compile SASS or to minify JS.  You can also use them to call your own things and that’s what we’re going to do.

To create a File Watcher, open the Preferences window with CMD-,. It’s also in Webstorm > Preferences. And search the settings for “watcher” or just scroll down until you see File Watchers. Click the + under the list of File Watchers (CMD-N) and use the custom template.

Fill in the fields to match the screenshot:

After hitting OK, you can edit any file and the cache.manifest will automagically update.  Upload it to the server and your users will be able to get the latest version of your app.  By the way, and this is the way AppCache workds, they’ll need to open their app TWICE. Yes. Twice. The first time to get the latest version in the background and the second time to actually use it.  Not too bad a price to have an offline app.

Download

download the example bash script