fusionjs / fusion-plugin-service-worker Goto Github PK
View Code? Open in Web Editor NEWMigrated to https://github.com/fusionjs/fusionjs
License: MIT License
Migrated to https://github.com/fusionjs/fusionjs
License: MIT License
We want browser to default to downloading sw.js each time
Edit: looks life default has changed so SW is no cache by default. Will manually add ctx.set('Cache-Control', 'max-age=0')
in case any non-compliant implementations still out there.
Feature
Expose Logger to SW rather than just logging to console
Feature
Servicer workers are the new hotness. However, introducing them to an entire web app can be too spicy. It would be great if to test the SW, we could apply it only on particular routes, instead of an entire app. This feature could be through a configuration when registering the service worker. Maybe, the configuration could accept a whitelist of certain routes that the webapp has.
I think it would be helpful to have the service worker attempt to unregister itself if there's a JS error. Helps stop people from shooting themselves in the foot. I'm open to taking this assuming it's possible / you agree it would be helpful.
fusion-plugin-service-worker version:
Node.js version (node --version
):
npm version (npm --version
):
Operating System:
On registry https://registry.yarnpkg.com/
, the "latest" version (v3.6.0) of dependency @types/redux
has the following deprecation notice:
This is a stub types definition for Redux (https://github.com/reactjs/redux). Redux provides its own type definitions, so you don't need @types/redux installed!
Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.
Affected package file(s): package.json
If you don't care about this, you can close this issue and not be warned about @types/redux
's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:
"suppressNotifications": ["deprecationWarningIssues"]
precachePaths
is an array of core asset paths (usually main.js and vendor.js)cacheablePaths
is a concatenation of precachePaths
and all other static assets (could just be JS bundles for phase 1)If not, polyfill.
This suggests not supported in safari and opera but in fact it does work correctly in latest desktop version of these browsers. Need to verify latest mobile versions. IE doesn't matter as no SW support.
Edit: forgot Edge which above doc claims might not be supported, but it appears to be: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5666523/
fusion-plugin-service-worker version:
Node.js version (node --version
):
npm version (npm --version
):
Operating System:
Update webpack config so that module imports from src/sw.js
point to the browser and not node.
We want to be populate src/sw.js in apps like this:
import {getHandlers} from "fusion-plugin-service-worker";
export default (assetInfo) => {
const {onFetch, onInstall} = getHandlers(assetInfo);
self.addEventListener("install", onInstall);
self.addEventListener("fetch", onFetch);
}
Currently it has to be long hand like this
// @flow
/* global self, location, fetch, caches, URL */
const cacheName = '0.0.0'; // we don't expect this to change
export default assetInfo => {
const {cacheablePaths, precachePaths} = assetInfo;
self.addEventListener('install', event => {
self.skipWaiting();
event.waitUntil(
// remove old cache
caches
.open(cacheName)
.then(cache => {
return cache
.addAll(precachePaths)
.then(() =>
getOutdatedKeys(cache, cacheablePaths).then(outdatedKeys =>
removeKeys(cache, outdatedKeys)
)
);
})
.catch(e => {
throw new Error('sw: error updating cache' + cacheName + e);
})
);
});
self.addEventListener('fetch', event => {
const HTML_TTL = 1 * 24 * 60 * 60 * 1001; // 1 day
const expectsHtml = requestExpectsHtml(event.request);
if (
!expectsHtml &&
!cacheablePaths.includes(new URL(event.request.url).pathname)
) {
// bypass service worker, use network
return;
}
event.waitUntil(
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
if (expectsHtml) {
const responseCreated = new Date(
cachedResponse.headers.get('date')
).valueOf();
if (Date.now() - responseCreated > HTML_TTL) {
// html expired: use the cache, but refresh cache for next time
self.fetchNCache(event.request, expectsHtml);
}
}
return cachedResponse;
}
return fetchNCache(event.request, expectsHtml);
})
)
);
});
function getOutdatedKeys(cache) {
return cache.keys().then(requests =>
requests.filter(request => {
return !cacheablePaths.find(key => {
return location.origin + key === request.url;
});
})
);
}
function removeKeys(cache, keys) {
return Promise.all(keys.map(key => cache.delete(key)));
}
function fetchNCache(request, expectsHtml) {
return fetch(request).then(resp => {
if (resp.status !== 200) {
return Promise.resolve(resp);
}
const clonedResponse = resp.clone();
caches.open(cacheName).then(cache => {
if (expectsHtml) {
// check we got html before caching
if (!responseIsHtml(clonedResponse)) {
return Promise.resolve(resp);
}
}
cache.put(request.url, clonedResponse);
});
return Promise.resolve(resp);
});
}
function requestExpectsHtml(request) {
if (!request || !request.headers) {
return false;
}
const acceptHeader = request.headers.get('Accept');
return acceptHeader && acceptHeader.indexOf('html') > -1;
}
function responseIsHtml(response) {
if (!response || !response.headers) {
return false;
}
const contentType = response.headers.get('content-type');
return contentType && contentType.indexOf('html') > -1;
}
};
Include a daily (or configurable) force-update for users that have long-running sessions? I could see this being an issue for some ubereats.com users
https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#manual_updates
Feature request
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.