mirror
/
hometown
mirror of https://github.com/hometown-fork/hometown.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Replace to `workbox-webpack-plugin` from `offline-plugin` (#18409)

pull/1253/head
Yamagishi Kazutoshi 4 years ago committed by GitHub
parent
55bef1e34f
commit
81e1cc5fec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 1059 additions and 445 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      app/javascript/mastodon/main.js
  2. 81
      app/javascript/mastodon/service_worker/entry.js
  3. 7
      app/javascript/mastodon/service_worker/web_push_notifications.js
  4. 27
      app/javascript/mastodon/storage/db.js
  5. 211
      app/javascript/mastodon/storage/modifier.js
  6. 84
      config/webpack/production.js
  7. 7
      package.json
  8. 2
      public/sw.js
  9. 1
      public/sw.js.map
  10. 1058
      yarn.lock

26
app/javascript/mastodon/main.js
Unescape View File

@ -1,9 +1,9 @@
import * as registerPushNotifications from './actions/push_notifications';
import { setupBrowserNotifications } from './actions/notifications';
import { default as Mastodon, store } from './containers/mastodon';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ready from './ready'; import * as registerPushNotifications from 'mastodon/actions/push_notifications';
import { setupBrowserNotifications } from 'mastodon/actions/notifications';
import Mastodon, { store } from 'mastodon/containers/mastodon';
import ready from 'mastodon/ready';
const perf = require('./performance'); const perf = require('./performance');
@ -24,10 +24,20 @@ function main() {
ReactDOM.render(<Mastodon {...props} />, mountNode); ReactDOM.render(<Mastodon {...props} />, mountNode);
store.dispatch(setupBrowserNotifications()); store.dispatch(setupBrowserNotifications());
if (process.env.NODE_ENV === 'production') {
// avoid offline in dev mode because it's harder to debug if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
require('offline-plugin/runtime').install(); import('workbox-window')
store.dispatch(registerPushNotifications.register()); .then(({ Workbox }) => {
const wb = new Workbox('/sw.js');
return wb.register();
})
.then(() => {
store.dispatch(registerPushNotifications.register());
})
.catch(err => {
console.error(err);
});
} }
perf.stop('main()'); perf.stop('main()');
}); });

81
app/javascript/mastodon/service_worker/entry.js
Unescape View File

@ -1,20 +1,59 @@
// import { freeStorage, storageFreeable } from '../storage/modifier'; import { ExpirationPlugin } from 'workbox-expiration';
import './web_push_notifications'; import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { handleNotificationClick, handlePush } from './web_push_notifications';
// function openSystemCache() { const CACHE_NAME_PREFIX = 'mastodon-';
// return caches.open('mastodon-system');
// }
function openWebCache() { function openWebCache() {
return caches.open('mastodon-web'); return caches.open(`${CACHE_NAME_PREFIX}web`);
} }
function fetchRoot() { function fetchRoot() {
return fetch('/', { credentials: 'include', redirect: 'manual' }); return fetch('/', { credentials: 'include', redirect: 'manual' });
} }
// const firefox = navigator.userAgent.match(/Firefox\/(\d+)/); precacheAndRoute(self.__WB_MANIFEST);
// const invalidOnlyIfCached = firefox && firefox[1] < 60;
registerRoute(
/locale_.*\.js$/,
new CacheFirst({
cacheName: `${CACHE_NAME_PREFIX}locales`,
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
maxEntries: 5,
}),
],
}),
);
registerRoute(
({ request }) => request.destination === 'font',
new CacheFirst({
cacheName: `${CACHE_NAME_PREFIX}fonts`,
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
maxEntries: 5,
}),
],
}),
);
registerRoute(
({ request }) => ['audio', 'image', 'track', 'video'].includes(request.destination),
new CacheFirst({
cacheName: `m${CACHE_NAME_PREFIX}media`,
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
maxEntries: 256,
}),
],
}),
);
// Cause a new version of a registered Service Worker to replace an existing one // Cause a new version of a registered Service Worker to replace an existing one
// that is already installed, and replace the currently active worker on open pages. // that is already installed, and replace the currently active worker on open pages.
@ -52,26 +91,8 @@ self.addEventListener('fetch', function(event) {
return response; return response;
})); }));
} /* else if (storageFreeable && (ATTACHMENT_HOST ? url.host === ATTACHMENT_HOST : url.pathname.startsWith('/system/'))) { }
event.respondWith(openSystemCache().then(cache => {
return cache.match(event.request.url).then(cached => {
if (cached === undefined) {
const asyncResponse = invalidOnlyIfCached && event.request.cache === 'only-if-cached' ?
fetch(event.request, { cache: 'no-cache' }) : fetch(event.request);
return asyncResponse.then(response => {
if (response.ok) {
cache
.put(event.request.url, response.clone())
.catch(()=>{}).then(freeStorage()).catch();
}
return response;
});
}
return cached;
});
}));
} */
}); });
self.addEventListener('push', handlePush);
self.addEventListener('notificationclick', handleNotificationClick);

7
app/javascript/mastodon/service_worker/web_push_notifications.js
Unescape View File

@ -75,7 +75,7 @@ const formatMessage = (messageId, locale, values = {}) =>
const htmlToPlainText = html => const htmlToPlainText = html =>
unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, '')); unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, ''));
const handlePush = (event) => { export const handlePush = (event) => {
const { access_token, notification_id, preferred_locale, title, body, icon } = event.data.json(); const { access_token, notification_id, preferred_locale, title, body, icon } = event.data.json();
// Placeholder until more information can be loaded // Placeholder until more information can be loaded
@ -189,7 +189,7 @@ const openUrl = url =>
return self.clients.openWindow(url); return self.clients.openWindow(url);
}); });
const handleNotificationClick = (event) => { export const handleNotificationClick = (event) => {
const reactToNotificationClick = new Promise((resolve, reject) => { const reactToNotificationClick = new Promise((resolve, reject) => {
if (event.action) { if (event.action) {
if (event.action === 'expand') { if (event.action === 'expand') {
@ -211,6 +211,3 @@ const handleNotificationClick = (event) => {
event.waitUntil(reactToNotificationClick); event.waitUntil(reactToNotificationClick);
}; };
self.addEventListener('push', handlePush);
self.addEventListener('notificationclick', handleNotificationClick);

27
app/javascript/mastodon/storage/db.js
Unescape View File

@ -1,27 +0,0 @@
export default () => new Promise((resolve, reject) => {
// ServiceWorker is required to synchronize the login state.
// Microsoft Edge 17 does not support getAll according to:
// Catalog of standard and vendor APIs across browsers - Microsoft Edge Development
// https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?q=specName%3Aindexeddb
if (!('caches' in self && 'getAll' in IDBObjectStore.prototype)) {
reject();
return;
}
const request = indexedDB.open('mastodon');
request.onerror = reject;
request.onsuccess = ({ target }) => resolve(target.result);
request.onupgradeneeded = ({ target }) => {
const accounts = target.result.createObjectStore('accounts', { autoIncrement: true });
const statuses = target.result.createObjectStore('statuses', { autoIncrement: true });
accounts.createIndex('id', 'id', { unique: true });
accounts.createIndex('moved', 'moved');
statuses.createIndex('id', 'id', { unique: true });
statuses.createIndex('account', 'account');
statuses.createIndex('reblog', 'reblog');
};
});

211
app/javascript/mastodon/storage/modifier.js
Unescape View File

@ -1,211 +0,0 @@
import openDB from './db';
const accountAssetKeys = ['avatar', 'avatar_static', 'header', 'header_static'];
const storageMargin = 8388608;
const storeLimit = 1024;
// navigator.storage is not present on:
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.100 Safari/537.36 Edge/16.16299
// estimate method is not present on Chrome 57.0.2987.98 on Linux.
export const storageFreeable = 'storage' in navigator && 'estimate' in navigator.storage;
function openCache() {
// ServiceWorker and Cache API is not available on iOS 11
// https://webkit.org/status/#specification-service-workers
return self.caches ? caches.open('mastodon-system') : Promise.reject();
}
function printErrorIfAvailable(error) {
if (error) {
console.warn(error);
}
}
function put(name, objects, onupdate, oncreate) {
return openDB().then(db => (new Promise((resolve, reject) => {
const putTransaction = db.transaction(name, 'readwrite');
const putStore = putTransaction.objectStore(name);
const putIndex = putStore.index('id');
objects.forEach(object => {
putIndex.getKey(object.id).onsuccess = retrieval => {
function addObject() {
putStore.add(object);
}
function deleteObject() {
putStore.delete(retrieval.target.result).onsuccess = addObject;
}
if (retrieval.target.result) {
if (onupdate) {
onupdate(object, retrieval.target.result, putStore, deleteObject);
} else {
deleteObject();
}
} else {
if (oncreate) {
oncreate(object, addObject);
} else {
addObject();
}
}
};
});
putTransaction.oncomplete = () => {
const readTransaction = db.transaction(name, 'readonly');
const readStore = readTransaction.objectStore(name);
const count = readStore.count();
count.onsuccess = () => {
const excess = count.result - storeLimit;
if (excess > 0) {
const retrieval = readStore.getAll(null, excess);
retrieval.onsuccess = () => resolve(retrieval.result);
retrieval.onerror = reject;
} else {
resolve([]);
}
};
count.onerror = reject;
};
putTransaction.onerror = reject;
})).then(resolved => {
db.close();
return resolved;
}, error => {
db.close();
throw error;
}));
}
function evictAccountsByRecords(records) {
return openDB().then(db => {
const transaction = db.transaction(['accounts', 'statuses'], 'readwrite');
const accounts = transaction.objectStore('accounts');
const accountsIdIndex = accounts.index('id');
const accountsMovedIndex = accounts.index('moved');
const statuses = transaction.objectStore('statuses');
const statusesIndex = statuses.index('account');
function evict(toEvict) {
toEvict.forEach(record => {
openCache()
.then(cache => accountAssetKeys.forEach(key => cache.delete(records[key])))
.catch(printErrorIfAvailable);
accountsMovedIndex.getAll(record.id).onsuccess = ({ target }) => evict(target.result);
statusesIndex.getAll(record.id).onsuccess =
({ target }) => evictStatusesByRecords(target.result);
accountsIdIndex.getKey(record.id).onsuccess =
({ target }) => target.result && accounts.delete(target.result);
});
}
evict(records);
db.close();
}).catch(printErrorIfAvailable);
}
export function evictStatus(id) {
evictStatuses([id]);
}
export function evictStatuses(ids) {
return openDB().then(db => {
const transaction = db.transaction('statuses', 'readwrite');
const store = transaction.objectStore('statuses');
const idIndex = store.index('id');
const reblogIndex = store.index('reblog');
ids.forEach(id => {
reblogIndex.getAllKeys(id).onsuccess =
({ target }) => target.result.forEach(reblogKey => store.delete(reblogKey));
idIndex.getKey(id).onsuccess =
({ target }) => target.result && store.delete(target.result);
});
db.close();
}).catch(printErrorIfAvailable);
}
function evictStatusesByRecords(records) {
return evictStatuses(records.map(({ id }) => id));
}
export function putAccounts(records, avatarStatic) {
const avatarKey = avatarStatic ? 'avatar_static' : 'avatar';
const newURLs = [];
put('accounts', records, (newRecord, oldKey, store, oncomplete) => {
store.get(oldKey).onsuccess = ({ target }) => {
accountAssetKeys.forEach(key => {
const newURL = newRecord[key];
const oldURL = target.result[key];
if (newURL !== oldURL) {
openCache()
.then(cache => cache.delete(oldURL))
.catch(printErrorIfAvailable);
}
});
const newURL = newRecord[avatarKey];
const oldURL = target.result[avatarKey];
if (newURL !== oldURL) {
newURLs.push(newURL);
}
oncomplete();
};
}, (newRecord, oncomplete) => {
newURLs.push(newRecord[avatarKey]);
oncomplete();
}).then(records => Promise.all([
evictAccountsByRecords(records),
openCache().then(cache => cache.addAll(newURLs)),
])).then(freeStorage, error => {
freeStorage();
throw error;
}).catch(printErrorIfAvailable);
}
export function putStatuses(records) {
put('statuses', records)
.then(evictStatusesByRecords)
.catch(printErrorIfAvailable);
}
export function freeStorage() {
return storageFreeable && navigator.storage.estimate().then(({ quota, usage }) => {
if (usage + storageMargin < quota) {
return null;
}
return openDB().then(db => new Promise((resolve, reject) => {
const retrieval = db.transaction('accounts', 'readonly').objectStore('accounts').getAll(null, 1);
retrieval.onsuccess = () => {
if (retrieval.result.length > 0) {
resolve(evictAccountsByRecords(retrieval.result).then(freeStorage));
} else {
resolve(caches.delete('mastodon-system'));
}
};
retrieval.onerror = reject;
db.close();
}));
});
}

84
config/webpack/production.js
Unescape View File

@ -1,29 +1,16 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect // Note: You must restart bin/webpack-dev-server for changes to take effect
const path = require('path'); const { createHash } = require('crypto');
const { URL } = require('url'); const { readFileSync } = require('fs');
const { resolve } = require('path');
const { merge } = require('webpack-merge'); const { merge } = require('webpack-merge');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const OfflinePlugin = require('offline-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin');
const { output } = require('./configuration'); const { InjectManifest } = require('workbox-webpack-plugin');
const sharedConfig = require('./shared'); const sharedConfig = require('./shared');
let attachmentHost; const root = resolve(__dirname, '..', '..');
if (process.env.S3_ENABLED === 'true') {
if (process.env.S3_ALIAS_HOST || process.env.S3_CLOUDFRONT_HOST) {
attachmentHost = process.env.S3_ALIAS_HOST || process.env.S3_CLOUDFRONT_HOST;
} else {
attachmentHost = process.env.S3_HOSTNAME || `s3-${process.env.S3_REGION || 'us-east-1'}.amazonaws.com`;
}
} else if (process.env.SWIFT_ENABLED === 'true') {
const { host } = new URL(process.env.SWIFT_OBJECT_URL);
attachmentHost = host;
} else {
attachmentHost = null;
}
module.exports = merge(sharedConfig, { module.exports = merge(sharedConfig, {
mode: 'production', mode: 'production',
@ -52,47 +39,28 @@ module.exports = merge(sharedConfig, {
openAnalyzer: false, openAnalyzer: false,
logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
}), }),
new OfflinePlugin({ new InjectManifest({
publicPath: output.publicPath, // sw.js must be served from the root to avoid scope issues additionalManifestEntries: ['1f602.svg', 'sheet_13.png'].map((filename) => {
safeToUseOptionalCaches: true, const path = resolve(root, 'public', 'emoji', filename);
caches: { const body = readFileSync(path);
main: [':rest:'], const md5 = createHash('md5');
additional: [':externals:'],
optional: [ md5.update(body);
'**/locale_*.js', // don't fetch every locale; the user only needs one
'**/*_polyfills-*.js', // the user may not need polyfills return {
'**/*.woff2', // the user may have system-fonts enabled revision: md5.digest('hex'),
// images/audio can be cached on-demand url: `/emoji/${filename}`,
'**/*.png', };
'**/*.jpg', }),
'**/*.jpeg', exclude: [
'**/*.svg', /(?:base|extra)_polyfills-.*\.js$/,
'**/*.mp3', /locale_.*\.js$/,
'**/*.ogg', /mailer-.*\.(?:css|js)$/,
],
},
externals: [
'/emoji/1f602.svg', // used for emoji picker dropdown
'/emoji/sheet_10.png', // used in emoji-mart
],
excludes: [
'**/*.gz',
'**/*.map',
'stats.json',
'report.html',
// any browser that supports ServiceWorker will support woff2
'**/*.eot',
'**/*.ttf',
'**/*-webfont-*.svg',
'**/*.woff',
], ],
ServiceWorker: { include: [/\.js$/, /\.css$/],
entry: `imports-loader?additionalCode=${encodeURIComponent(`var ATTACHMENT_HOST=${JSON.stringify(attachmentHost)};`)}!${encodeURI(path.join(__dirname, '../../app/javascript/mastodon/service_worker/entry.js'))}`, maximumFileSizeToCacheInBytes: 2 * 1_024 * 1_024, // 2 MiB
cacheName: 'mastodon', swDest: resolve(root, 'public', 'packs', 'sw.js'),
output: '../assets/sw.js', swSrc: resolve(root, 'app', 'javascript', 'mastodon', 'service_worker', 'entry.js'),
publicPath: '/sw.js',
minify: true,
},
}), }),
], ],
}); });

7
package.json
Unescape View File

@ -82,7 +82,6 @@
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
"object-fit-images": "^3.2.3", "object-fit-images": "^3.2.3",
"object.values": "^1.1.5", "object.values": "^1.1.5",
"offline-plugin": "^5.0.7",
"path-complete-extname": "^1.0.0", "path-complete-extname": "^1.0.0",
"pg": "^8.5.0", "pg": "^8.5.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
@ -136,6 +135,12 @@
"webpack-cli": "^3.3.12", "webpack-cli": "^3.3.12",
"webpack-merge": "^5.8.0", "webpack-merge": "^5.8.0",
"wicg-inert": "^3.1.2", "wicg-inert": "^3.1.2",
"workbox-expiration": "^6.5.3",
"workbox-precaching": "^6.5.3",
"workbox-routing": "^6.5.3",
"workbox-strategies": "^6.5.3",
"workbox-webpack-plugin": "^6.5.3",
"workbox-window": "^6.5.3",
"ws": "^8.8.1" "ws": "^8.8.1"
}, },
"devDependencies": { "devDependencies": {

2
public/sw.js
Unescape View File

@ -1 +1 @@
assets/sw.js packs/sw.js

1
public/sw.js.map
Unescape View File

@ -0,0 +1 @@
packs/sw.js.map

1058
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save