/var/log/messages

Jun 20, 2018 - 1 minute read - Comments - misc

Github Page を PWA 化

このサイト、PWA 化してみました。

とりあえず、したことを以下に列挙。

  • HTTPS 化
  • トップで表示している画像リソースをローカルに持ってきて参照
  • config.yml 修正
  • static/manifest.json および static/service-worker.js 投入
  • themes/Hugo-Octopress/layouts/partials/header.html 修正

だったはず。

画像リソースの移動

img タグなどで参照しているリソースも https 化されてないとまずいとのことで、参照表示していたものは全て static/images 配下に投入。

config.yml 修正

baseURL も https:// で始まる URL になっていないと、なので修正。これは octopress 特有の修正なのかどうか。

static/manifest.json および static/service-worker.js 投入

以下を投入しています。

  • manifest.json
{
  "name": "PWA Sample",
  "short_name": "PWA",
  "background_color": "#fc980c",
  "icons": [{
      "src": "./icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },{
      "src": "./icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }],
  "start_url": "./?utm_source=homescreen",
  "display": "standalone"
}
  • service-worker.js
// service-worker.js
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});

最後に index.html が参照している partial を修正します。

themes/Hugo-Octopress/layouts/partials/header.html 修正

以下を追加しています。

  <link rel="manifest" href="./manifest.json">
  <script>
    window.addEventListener('load', function() {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js')
          .then(function() {
            console.log('Service Worker Registered');
          });
      }
    });
  </script>

ただ、自前端末のひとつでは popup が出ない、という現象が出てて微妙。

Testing Routing Wrapping Up

comments powered by Disqus