Service Workers 是针对 Application Cache 问题 的解决方案，它是一种强大而优雅的方式来实现您的 Web 应用离线功能。但它们在实现和维护方面也更加复杂。

与此同时，GitHub Pages 是一个很棒的、简单的静态托管服务，适用于 离线优先应用。但是，将应用程序部署到 GitHub Pages 需要手动配置，特别是如果您与团队合作开发、使用 GitHub Flow 的某种变体，并且想要设置持续部署。

Oghliner 是一个 npm 包，它简化了使用 Service Workers 使应用程序离线以及将应用程序部署到 GitHub Pages（包括使用 Travis CI 进行持续部署）这两个步骤。Oghliner 的目标是使离线化和部署 Web 应用程序变得尽可能简单。

要开始使用 Oghliner，请全局安装它。

> npm install --global oghliner

如果您在 GitHub 存储库中有一个现有的应用程序，请调用 integrate 命令来配置它。该命令会将一个 offline-manager.js 脚本（它会注册 Service Worker）复制到您的应用程序中，并提醒您在应用程序的页面/模板（Oghliner 还没有自动执行的少数步骤之一）中加载该脚本。

> oghliner integrate
Integrating Oghliner into the app in the current directory…

✓ Copying offline-manager.js to ./… done!

Oghliner has been integrated into the app!

The app needs to load the script offline-manager.js in order to register
the service worker that offlines the app. To load the script, add this line to 
the app's HTML page(s)/template(s):

<script src="offline-manager.js"></script>

And commit the changes and push the commit to the origin/master branch:

git commit -m"integrate Oghliner" --all
git push origin master

Then you can offline and deploy the app using the offline and deploy commands.

ℹ For more information about offlining and deployment, see:
    https://mozilla.github.io/oghliner/

如果您还没有现有的应用程序，可以通过 创建新的 GitHub 存储库、将它克隆到您的本地机器，并从它的工作目录中调用 bootstrap 命令来启动一个新的应用程序。

> git clone git@github.com:mykmelez/offline-app.git
Cloning into 'offline-app'...
…
> cd offline-app/
> oghliner bootstrap
Bootstrapping current directory as Oghliner app…

Your app's configuration is:

Name: offline-app
Repository: git@github.com:mykmelez/offline-app.git
Description: A template app bootstrapped with oghliner.
License: Apache-2.0

Would you like to change its configuration (y/N)? 

Creating files…
✓ Creating README.md
✓ Creating .gitignore
✓ Creating gulpfile.js
✓ Creating package.json
✓ Creating app/favicon.ico
✓ Creating app/fonts
✓ Creating app/index.html
✓ Creating app/robots.txt
✓ Creating app/images/apple-touch-icon-114x114.png
✓ Creating app/images/apple-touch-icon-120x120.png
✓ Creating app/images/apple-touch-icon-144x144.png
✓ Creating app/images/apple-touch-icon-152x152.png
✓ Creating app/images/apple-touch-icon-57x57.png
✓ Creating app/images/apple-touch-icon-60x60.png
✓ Creating app/images/apple-touch-icon-72x72.png
✓ Creating app/images/apple-touch-icon-76x76.png
✓ Creating app/images/favicon-128x128.png
✓ Creating app/images/favicon-16x16.png
✓ Creating app/images/favicon-196x196.png
✓ Creating app/images/favicon-32x32.png
✓ Creating app/images/favicon-96x96.png
✓ Creating app/images/mstile-144x144.png
✓ Creating app/images/mstile-150x150.png
✓ Creating app/images/mstile-310x150.png
✓ Creating app/images/mstile-310x310.png
✓ Creating app/images/mstile-70x70.png
✓ Creating app/scripts/main.js
✓ Creating app/scripts/offline-manager.js
✓ Creating app/styles/stylesheet.css

✓ Creating files… done!
✓ Installing npm dependencies… done!

Your app has been bootstrapped! Just commit the changes and push the commit
to the origin/master branch:

git add --all && git commit -m"initial version of Oghliner app"
git push origin master

Then you can build, offline, and deploy the app using gulp commands.

ℹ For more information about building, offlining and deployment, see:
    https://mozilla.github.io/oghliner/

最后，提交更改以完成配置。

> git add --all && git commit -m"initial version of Oghliner app"

现在您的应用程序已配置，您可以构建、离线化并部署它。引导的应用程序包括一个 gulpfile.js 构建脚本。要构建它们，请全局安装 Gulp。

> npm install --global gulp

然后只需调用 gulp

> gulp

要离线化您的应用程序，请调用 offline 命令生成离线化应用程序的 Service Worker，并指定包含要离线化的文件的目录。

> oghliner offline dist/
Offlining dist/ to dist/offline-worker.js…

✓ Caching "dist/favicon.ico" (384 B)
✓ Caching "dist/images/apple-touch-icon-114x114.png" (278 B)
✓ Caching "dist/images/apple-touch-icon-120x120.png" (285 B)
✓ Caching "dist/images/apple-touch-icon-144x144.png" (321 B)
✓ Caching "dist/images/apple-touch-icon-152x152.png" (320 B)
✓ Caching "dist/images/apple-touch-icon-57x57.png" (242 B)
✓ Caching "dist/images/apple-touch-icon-60x60.png" (242 B)
✓ Caching "dist/images/apple-touch-icon-72x72.png" (247 B)
✓ Caching "dist/images/apple-touch-icon-76x76.png" (247 B)
✓ Caching "dist/images/favicon-128x128.png" (298 B)
✓ Caching "dist/images/favicon-16x16.png" (216 B)
✓ Caching "dist/images/favicon-196x196.png" (380 B)
✓ Caching "dist/images/favicon-32x32.png" (232 B)
✓ Caching "dist/images/favicon-96x96.png" (269 B)
✓ Caching "dist/images/mstile-144x144.png" (323 B)
✓ Caching "dist/images/mstile-150x150.png" (316 B)
✓ Caching "dist/images/mstile-310x150.png" (411 B)
✓ Caching "dist/images/mstile-310x310.png" (610 B)
✓ Caching "dist/images/mstile-70x70.png" (246 B)
✓ Caching "dist/index.html" (3.08 kB)
✓ Caching "dist/robots.txt" (102 B)
✓ Caching "dist/scripts/main.js" (151 B)
✓ Caching "dist/scripts/offline-manager.js" (1.1 kB)
✓ Caching "dist/styles/stylesheet.css" (107 B)
Total precache size is about 10.41 kB for 24 resources.

要将应用程序（包括 Service Worker）部署到 GitHub Pages，请调用 deploy 命令，同样指定包含应用程序文件的目录。

> oghliner deploy dist/
Deploying "initial version of Oghliner app" to GitHub Pages…

✓ Cloning git@github.com:mykmelez/offline-app.git into .gh-pages-cache… done!
✓ Cleaning… done!
✓ Fetching origin… done!
✓ Checking out origin/gh-pages… done!
✓ Removing files… done!
✓ Copying files… done!
✓ Adding all… done!
✓ Committing… done!
✓ Pushing… done!

所有 Oghliner 命令也可以通过模块接口使用，因此您可以使用 Grunt 和 Gulp 等工具将它们集成到您的 Node-based 构建脚本中。如果您使用 Oghliner 启动了应用程序，它的 gulpfile.js 已经包含 offline 和 deploy 任务（您也可以将它们用作前面命令的替代方法）。

最后，调用 configure 命令来配置应用程序，使其在您将更改合并到应用程序的 master 分支时自动部署到 GitHub Pages（当然，前提是构建成功完成并且测试通过！）。

> oghliner configure

Configuring Travis to auto-deploy to GitHub Pages…

Your repository has a single remote, origin.
Ok, I'll configure Travis to auto-deploy the origin remote (mykmelez/offline-app).

To check the status of your repository in Travis and authorize Travis to push
to it, I'll create GitHub personal access tokens, for which I need your GitHub
username and password (and two-factor authentication code, if appropriate).

ℹ For more information about GitHub personal access tokens, see:
    https://github.com/settings/tokens

Username: mykmelez
Password: 

× Checking credentials… error!

You're using two-factor authentication with GitHub.
Please enter the code provided by your authentication software.

Auth Code: 123456

✓ Checking credentials… done!
✓ Creating temporary GitHub token for getting Travis token… done!
✓ Getting Travis token… done!
✓ Deleting temporary GitHub token for getting Travis token… done!
  Creating permanent GitHub token for Travis to push to the repository…
✓ Creating permanent GitHub token for Travis to push to the repository… done!

ℹ You had an existing token for this app, so we deleted and recreated it.

✓ Checking the status of your repository in Travis… done!

Good news, your repository is active in Travis!

✓ Encrypting permanent GitHub token… done!
✓ Writing configuration to .travis.yml file… done!

⚠ You didn't already have a .travis.yml file, so I created one for you.
  For more information about the file, see:
    https://docs.travis-ci.cn/user/customizing-the-build/

You're ready to auto-deploy using Travis!  Just commit the changes
in .travis.yml and push the commit to the origin/master branch:

git add .travis.yml
git commit -m"configure Travis to auto-deploy to GitHub Pages" .travis.yml
git push origin master

Then visit https://travis-ci.org/mykmelez/offline-app/builds to see the build status.

然后，Travis 会部署成功的构建（在 master 分支上）。

需要注意一些注意事项

• 部署有时需要几分钟才能在 GitHub Pages 上显示。
• Service Workers 要求您通过加密的 (HTTPS) 连接加载应用程序。所有 GitHub Pages 都可以通过这种连接加载，即使 GitHub 并没有正式支持它。
• Service Workers 在 Chrome、Opera 和 Firefox 开发者版中可用。它们将在 Firefox 44 中发布。

Mozilla 的 Web 应用程序开发者计划 工程团队创建了 Oghliner，因为我们认为 Service Workers 是离线化 Web 应用程序的好方法，而 GitHub Pages 是部署它们的好方法，所以我们想看看将两者结合在一起能有多好。

我们在自己的项目中使用了 Oghliner，比如 这个演示 和 Platatus，我们希望您能发现它很令人愉快。所以，了解更多信息，试用一下，让我们知道它对您有什么作用吧！