エンジニアスタンプラリー~フロントエンド編#11
企画主旨
Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら
今回の実施内容
ぷろぐれっしぶうぇぶあぷり
PWAの対応。任意のスタンプだが、個人的に興味があったものを抜粋で実施。
Progressive Web Apps
Service Worker
Googleが紹介するはじめてのプログレッシブウェブアプリを参考にして、今までのサイトをPWAに対応させる。
Service Workerを追加することで、オフライン対応・インストール可能にする。
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/
Author And Source
この問題について(エンジニアスタンプラリー~フロントエンド編#11), 我々は、より多くの情報をここで見つけました https://qiita.com/tonchan1216/items/5bf91520b0cbd118f76e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .