Skip to content

Commit

Permalink
feat: implement workbox
Browse files Browse the repository at this point in the history
yong-asial committed Jan 22, 2019
1 parent 190e094 commit 1f3e3d8
Showing 7 changed files with 1,690 additions and 78 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -5,4 +5,5 @@
*.swp
.vscode/
typings/
node_modules
node_modules
www/service-worker.js
15 changes: 15 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Installation

```
npm install monaca -g
git clone git@github.com:yong-asial/my-first-pwa.git
cd my-first-pwa
npm install
```

# Preview

```
cd my-first-pwa
monaca preview
```
1,512 changes: 1,489 additions & 23 deletions package-lock.json

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -3,10 +3,13 @@
"displayName": "Monaca PWA Template Minimum",
"dependencies": {},
"scripts": {
"monaca:preview": "npm run dev",
"monaca:preview": "npm run build && npm run dev",
"monaca:transpile": "npm run build",
"build": "workbox injectManifest workbox-config.js",
"dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
},
"devDependencies": {
"browser-sync": "^2.24.5"
"browser-sync": "^2.24.5",
"workbox-cli": "^3.6.3"
}
}
54 changes: 54 additions & 0 deletions service-worker-src.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.skipWaiting();
workbox.clientsClaim();

// cache name
workbox.core.setCacheNameDetails({
prefix: 'My-awesome-cache',
precache: 'precache',
runtime: 'runtime',
});

// runtime cache
// 1. stylesheet
workbox.routing.registerRoute(
new RegExp('\.css$'),
workbox.strategies.cacheFirst({
cacheName: 'My-awesome-cache-Stylesheets',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 7, // cache for one week
maxEntries: 20, // only cache 20 request
purgeOnQuotaError: true
})
]
})
);
// 2. images
workbox.routing.registerRoute(
new RegExp('\.(png|svg|jpg|jpeg)$'),
workbox.strategies.cacheFirst({
cacheName: 'My-awesome-cache-Images',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 7,
maxEntries: 50,
purgeOnQuotaError: true
})
]
})
);

// 3. cache news articles result
workbox.routing.registerRoute(
new RegExp('https://newsapi.org/v2/top-headlines'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'My-awesome-cache-news-headline',
cacheExpiration: {
maxAgeSeconds: 60 * 30 //cache the news content for 30mn
}
})
);

workbox.precaching.precacheAndRoute([]);
8 changes: 8 additions & 0 deletions workbox-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
"globDirectory": "www/",
"globPatterns": [
"**/*.{css,html,js,png}"
],
"swDest": "www/service-worker.js",
"swSrc": "service-worker-src.js"
};
169 changes: 117 additions & 52 deletions www/service-worker.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,123 @@
var CACHE_NAME = 'my-cache-v1';
var urlsToCache = [
'/',
'/css/style.css',
'/script/main.js'
];
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
workbox.skipWaiting();
workbox.clientsClaim();

self.addEventListener('activate', function (event) {
var cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames.map(function (cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
// cache name
workbox.core.setCacheNameDetails({
prefix: 'My-awesome-cache',
precache: 'precache',
runtime: 'runtime',
});

// runtime cache
// 1. stylesheet
workbox.routing.registerRoute(
new RegExp('\.css$'),
workbox.strategies.cacheFirst({
cacheName: 'My-awesome-cache-Stylesheets',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 7, // cache for one week
maxEntries: 20, // only cache 20 request
purgeOnQuotaError: true
})
]
})
);
});

self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
return response;
}

var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function (response) {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
);
// 2. images
workbox.routing.registerRoute(
new RegExp('\.(png|svg|jpg|jpeg)$'),
workbox.strategies.cacheFirst({
cacheName: 'My-awesome-cache-Images',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 7,
maxEntries: 50,
purgeOnQuotaError: true
})
]
})
);

var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function (cache) {
cache.put(event.request, responseToCache);
});
return response;
// 3. cache news articles result
workbox.routing.registerRoute(
new RegExp('https://newsapi.org/v2/top-headlines'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'My-awesome-cache-news-headline',
cacheExpiration: {
maxAgeSeconds: 60 * 30 //cache the news content for 30mn
}
);
})
);
});
);

workbox.precaching.precacheAndRoute([
{
"url": "components/loader.css",
"revision": "93899d9053b17d836ecad563970fcd79"
},
{
"url": "components/loader.js",
"revision": "91dc91ff38b6c8a3fa5bc604f4ef1448"
},
{
"url": "components/monaca-cordova-loader/cordova-loader.js",
"revision": "f95edd85998fa97a31cd7c36b8c9e911"
},
{
"url": "components/monaca-core-utils/monaca-core-utils.js",
"revision": "5135d67955a47fd60ef18617f0de38fd"
},
{
"url": "css/style.css",
"revision": "a04a8117ae087880ca305446a746de3f"
},
{
"url": "images/icons/icon-128x128.png",
"revision": "32418e55eeab53d89f451189032196e5"
},
{
"url": "images/icons/icon-144x144.png",
"revision": "0a74124a45f0419e4bfcf4b1e409132f"
},
{
"url": "images/icons/icon-152x152.png",
"revision": "bcaf41e37ba54a3f6f887da33e29c425"
},
{
"url": "images/icons/icon-168x168.png",
"revision": "604edc7754c3db4d2e20ce7fe517ae0e"
},
{
"url": "images/icons/icon-192x192.png",
"revision": "d3ed840ac444493f7978bcdceb2f87bf"
},
{
"url": "images/icons/icon-256x256.png",
"revision": "93012638cf3a7f142d6ac32046b9026e"
},
{
"url": "images/icons/icon-48x48.png",
"revision": "df7323759ba57b1cd54245e7956a2fc6"
},
{
"url": "images/icons/icon-72x72.png",
"revision": "17ce26f01364a397e7f935733eb8275c"
},
{
"url": "images/icons/icon-96x96.png",
"revision": "0db7a34fb4e410a34d29d85a06478f7e"
},
{
"url": "images/no-image-icon.png",
"revision": "f98b32ceb4e65ec11ae685fc4b6d5a15"
},
{
"url": "index.html",
"revision": "991b5a32aa18e91a47153a4b83dd8c8f"
},
{
"url": "script/main.js",
"revision": "d2550dc38d6aa583325427adf3de21a8"
}
]);

0 comments on commit 1f3e3d8

Please sign in to comment.