View sample-sw-caching.js
/* global $VERSION, $Cache, importScripts, WorkboxSW */ | |
importScripts('https://unpkg.com/workbox-sw@1.1.0/build/importScripts/workbox-sw.prod.v1.1.0.js'); | |
// Add app shell to the webpack-generated precache list | |
$Cache.precache.push({ url: 'sw-shell.html', revision: $VERSION }); | |
// Register precache list with Workbox | |
const workbox = new WorkboxSW({ handleFetch: true, skipWaiting: true, clientClaim: true }); | |
workbox.precache($Cache.precache); |
View sample-sw-generation.js
/* Create a service worker for every locale to precache the locale bundle */ | |
const ServiceWorkerConfigs = locales.reduce((configs, locale) => { | |
return Object.assign(configs, { | |
[`mobile-${locale}`]: Object.assign({}, BaseConfig, { | |
template: path.join(__dirname, 'swTemplates/mobileBase.js'), | |
cache: { | |
template: path.join(__dirname, 'swTemplates/mobileCache.js'), | |
precache: [ | |
'vendor-mweb-.*\\.js$', | |
'entryChunk-mobile-.*\\.js$', |
View sample-webpack.js
const bundles = { | |
'vendor-mweb': [ | |
'app/mobile/polyfills.js', | |
'intl', | |
'normalizr', | |
'react-dom', | |
'react-redux', | |
'react-router-dom', | |
'react', | |
'redux' |
View sample-codesplitting.js
// Create a loader | |
const Closeup = () => import(/* webpackChunkName: "CloseupPage" */ 'app/mobile/routes/CloseupPage'); | |
// Register it to the route | |
route('/pin/:pinId', routes.Closeup, { name: 'Closeup' }), | |
// Render a react-router-v4 Route with the route bundle loader | |
<Route exact key="matched-route" path={path} render={matchProps => | |
<PageRoute | |
bundleLoader={loader} |
View Homefeed.jsx
const Homefeed = createFeed({ | |
feedKey: 'homefeed', | |
resourceName: 'UserHomefeedResource', | |
resourceOptions: () => ({ | |
field_set_key: 'mobile_grid_item', | |
}), | |
pullToRefresh: true, | |
}); | |
const HomePage = (props: Props) => ( |
View ProfilePage.js
type Props = { | |
match: { params: { username: string } }, | |
resource: { fetching: boolean }, | |
user: User, | |
}; | |
export default withResource({ | |
name: 'UserResource', | |
key: 'resource', | |
options: ({ match }: Props) => ({ |
View DeferredMount.js
/* | |
<DeferredMount ssr /> | |
This component defers rendering of its children until after mounting, good | |
for below-the-fold content. If the content should be rendered syncronously | |
on the server you can set the `ssr` prop. If `ssr` is set to true, there | |
will be a client/server mismatch unless you can somehow determine that we | |
are hydrating from the server. | |
Is there a better way than the hack below? | |
*/ |
View snapshot.js
{ | |
caches: { | |
CACHE_V1: {} | |
}, | |
clients: [], | |
notifications: [], | |
} |
View test_fetch.js
const makeServiceWorkerEnv = require('service-worker-mock'); | |
const Response = () => ({ clone: jest.fn() }); | |
const Request = () => ({ url: '/test' }); | |
describe('Service worker', () => { | |
beforeEach(() => { | |
Object.assign(global, makeServiceWorkerEnv()); | |
jest.resetModules(); | |
}); |
View test_activate.js
const makeServiceWorkerEnv = require('service-worker-mock'); | |
describe('Service worker', () => { | |
beforeEach(() => { | |
Object.assign(global, makeServiceWorkerEnv()); | |
jest.resetModules(); | |
}); | |
it('should delete old caches on activate', async () => { | |
require('../sw.js'); |
NewerOlder