LoginSignup
0

More than 5 years have passed since last update.

GitHub Pages で Offline で WebApp を使う

Last updated at Posted at 2018-06-02

OghlinerというGitHub PagesでOfflineでWebAppsを使うnpm packageがあります。
https://hacks.mozilla.org/2015/11/offline-web-apps-on-github-pages/
これを使ってみます。

インストール

npm install oghliner

で導入できます、、、が、node-gypが必要なのでWindowsだと躓くかもしれません。
node-gypをbuildするためにwindows-build-toolsをインストールします。

npm install --global windows-build-tools

参考:https://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7
https://github.com/nodejs/node-gyp/issues/1056

さらに、これだけだと環境によってはcannot open input file 'C:\OpenSSL-Win64\lib\libeay32.libというエラーが出てnode-gypのbuildに失敗します。
Open-SSL-Win64 をインストールするか、下記を参考にして C:\OpenSSL-Win64\lib\libeay32.lib を配置します。
参考:https://github.com/ethereumjs/ethereumjs-util/issues/43
ここまでやれば oghliner のinstallに成功すると思います。

設定

GitHubリポジトリに既存のアプリがある場合は、integrateコマンドを使います。

npm bin oghliner
./node_modules/.bin/oghliner integrate

このコマンドは、オフラインmanager.jsスクリプト(サービスワーカーを登録する)をアプリにコピーし、アプリのページ/テンプレートにそのスクリプトをロードするように促します。

既存のアプリがないケースはここでは省略します。

最後に、変更をコミットして設定を完了します。

アプリケーションをオフラインにするには、オフラインコマンドを呼び出して、アプリケーションをオフラインにするサービスワーカーを生成し、オフラインにするファイルを含むディレクトリを指定します。

oghliner offline dist/

アプリケーション(サービスワーカーを含む)をGitHub Pagesにデプロイするには、deployコマンドを呼び出して、アプリのファイルを含むディレクトリを再度指定します。

oghliner deploy dist/

これにより origin/gh-pages ブランチに勝手にPushまでされます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0