エンジニアスタンプラリー～フロントエンド編＃11

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

ぷろぐれっしぶうぇぶあぷり
PWAの対応。任意のスタンプだが、個人的に興味があったものを抜粋で実施。

Progressive Web Apps

Service Worker

Googleが紹介するはじめてのプログレッシブウェブアプリを参考にして、今までのサイトをPWAに対応させる。
Service Workerを追加することで、オフライン対応・インストール可能にする。

sw.js

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = ['/', '/main.js', '/assets/tenki.json'];

self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // Cache hit - return response
      if (response) {
        return response;
      }

      const fetchRequest = event.request.clone();

      return fetch(fetchRequest).then(response => {
        // Check if we received a valid response
        if (!response || response.status !== 200 || response.type !== 'basic') {
          return response;
        }

        const responseToCache = response.clone();

        caches.open(CACHE_NAME).then(cache => {
          cache.put(event.request, responseToCache);
        });

        return response;
      });
    })
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];

  event.waitUntil(
    caches.keys().then(cacheNames => Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      ))
  );
});

Using Light House

Chromeの拡張機能からLigh Houseを起動して、パフォーマンス計測を実施。
提案された項目の中から、修正可能なものをピックアップ。
主に、

• JS/CSSの分割と圧縮
• BootstrapをCDNから読み込み
• 背景とのコントラスト

成果物

デザインが変わっていないのに、裏側だけがモダンになっていく。
Nginx等でキャッシュやgzip圧縮ができれば、もっと高みを目指せたかも。
https://github.com/tonchan1216/WDR-frontend/tree/v11
https://tonchan1216.github.io/WDR-frontend/v11/