Service Workerで簡単なオフライン対応サイトを作ってみた

Posted on2017年6月4日 Edit on by misumi_takuma
Service Worker

Service Workerで簡単なオフライン対応サイトを作ってみました。

ここ数年、勉強会で名刺を用意してなくて、そろそろ用意しようと思った時に、名刺に載せるポートフォリオサイトやプロフィールサイトあった方がいいよなと思ったのがきっかけで、どうせならオフライン対応ページを作ってみようと思いつくりました。

サンプルのコードを適当に拾ってきてやったので、正しくできてるか分かりませんが。ネットを切っても見れるはず。オフライン対応をやりたいのがメインだったので、サイトはめっちゃ適当です。

https://mismithportfolio.com/

コードについてはこのGoogleのサンプルを自分用にちょっと変えただけです。

ウェブアプリへの Service Worker とオフラインの追加

JavaScriptのファイルにこの記述を追加して

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js', { scope: './' }).then(function(reg) {
 
    if(reg.installing) {
      console.log('Service worker installing');
    } else if(reg.waiting) {
      console.log('Service worker installed');
    } else if(reg.active) {
      console.log('Service worker active');
    }
 
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

sw.jsというファイルを作り、以下のように書きました。

let version = '0.57';
 
self.addEventListener('install', e => {
  let timeStamp = Date.now();
  e.waitUntil(
    caches.open('mismith').then(cache => {
      return cache.addAll([
        `/`,
        `/index.html?timestamp=${timeStamp}`,
        `/bundle.js?timestamp=${timeStamp}`
      ])
      .then(() => self.skipWaiting());
    })
  )
});
 
self.addEventListener('activate',  event => {
  event.waitUntil(self.clients.claim());
});
 
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
  );
});

参考サイト

Service Workerの基本とそれを使ってできること

Qiita @y_fujieda

ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る

Qiita @horo

第1回 Service Workerとは

Code Grid

さいごに

オフライン対応するだけなら、そんなに難しいコードではありませんでした。ちゃんとやるならもっと書かないとダメだと思いますが。

Service Workerの触りはできたので、ちゃんと理解できるように情報収集していこうと思います。


See Also