Skip to content

Commit 23ad975

Browse files
EugeneHlushkomontogeek
EugeneHlushko
authored and
montogeek
committed
feat(site) reduce maintenance amount of PWA files by using a plugin (webpack#3115)
* feat(manifest) reduce maintenance amount of PWA files by using a plugin; fix majority of potential issues with adding to homescreens across devices * feat(manifest) pwa plugin to produce 150px mstile icon
1 parent 770ddbf commit 23ad975

14 files changed

+243
-67
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@
170170
"react-router-dom": "^4.2.2",
171171
"react-tiny-popover": "3.4.2",
172172
"react-visibility-sensor": "^5.0.2",
173+
"webpack-pwa-manifest": "^4.0.0",
173174
"webpack.vote": "^0.1.2",
174175
"whatwg-fetch": "^2.0.3"
175176
}

‎src/assets/PWA/images/icons/icon-128x128.png

-2.76 KB
Binary file not shown.

‎src/assets/PWA/images/icons/icon-144x144.png

-3.06 KB
Binary file not shown.

‎src/assets/PWA/images/icons/icon-152x152.png

-3.06 KB
Binary file not shown.

‎src/assets/PWA/images/icons/icon-192x192.png

-3.66 KB
Binary file not shown.

‎src/assets/PWA/images/icons/icon-384x384.png

-10.4 KB
Binary file not shown.

‎src/assets/PWA/images/icons/icon-72x72.png

-1.91 KB
Binary file not shown.

‎src/assets/PWA/images/icons/icon-96x96.png

-2.32 KB
Binary file not shown.

‎src/assets/PWA/manifest.json

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎src/assets/PWA/images/icons/icon-512x512.png renamed to ‎src/assets/icon-pwa-512x512.png

File renamed without changes.

‎src/server.jsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function isPrintPage(url) {
3434
// Export method for `SSGPlugin`
3535
export default locals => {
3636
let { assets } = locals.webpackStats.compilation;
37+
3738
let title = getPageTitle(locals.content, locals.path);
3839
let description = 'webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.';
3940

@@ -62,9 +63,16 @@ export default locals => {
6263
))}
6364
<link rel="manifest" href="/manifest.json" />
6465
<link rel="canonical" href={`https://webpack.js.org${enforceTrailingSlash(locals.path)}`} />
65-
<link rel="apple-touch-icon" href="/images/icons/icon-192x192.png" />
66-
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/icon-152x152.png" />
67-
<link rel="icon" sizes="192x192" href="/images/icons/icon-192x192.png" />
66+
<meta name="mobile-web-app-capable" content="yes" />
67+
<link rel="icon" sizes="192x192" href="/icon_192x192.png" />
68+
<link rel="icon" sizes="512x512" href="/icon_512x512.png" />
69+
<meta name="apple-mobile-web-app-capable" content="yes" />
70+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
71+
<meta name="apple-mobile-web-app-title" content="webpack" />
72+
<link rel="apple-touch-icon-precomposed" href="/icon_180x180.png" />
73+
<link rel="mask-icon" href={ Logo } color="#465e69" />
74+
<meta name="msapplication-TileImage" content="/icon_150x150.png" />
75+
<meta name="msapplication-TileColor" content="#465e69" />
6876
</head>
6977
<body>
7078
<div id="root">

‎webpack.prod.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = env => merge(common(env), {
2828
// make sure to cache homepage and app shell as app shell for the rest of the pages.
2929
// externals also re-validate on sw update (releases)
3030
externals: ['/app-shell/', '/', '/manifest.json', ...hashedAssetsBySSGRun],
31-
excludes: ['/images/icons/**', '/**/printable/', '/robots.txt'],
31+
excludes: ['/icon_*.png', '/**/printable/', '/robots.txt'],
3232
AppCache: {
3333
publicPath: '/'
3434
}

‎webpack.ssg.js

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
// Import External Dependencies
2+
const WebpackPwaManifest = require('webpack-pwa-manifest');
3+
const path = require('path');
24
const merge = require('webpack-merge');
35
const SSGPlugin = require('static-site-generator-webpack-plugin');
46
const RedirectWebpackPlugin = require('redirect-webpack-plugin');
@@ -77,10 +79,6 @@ module.exports = env => merge(common(env), {
7779
}
7880
}),
7981
new CopyWebpackPlugin([
80-
{
81-
from: './assets/PWA',
82-
to: './'
83-
},
8482
{
8583
from: './assets/icon-square-small-slack.png',
8684
to: './assets/'
@@ -94,6 +92,31 @@ module.exports = env => merge(common(env), {
9492
to: './'
9593
},
9694
'CNAME'
97-
])
95+
]),
96+
new WebpackPwaManifest({
97+
name: 'webpack Documentation',
98+
short_name: 'webpack',
99+
description: 'webpack documentation web application',
100+
background_color: '#2b3a42',
101+
theme_color: '#2b3a42',
102+
display: 'fullscreen',
103+
inject: false,
104+
fingerprints: false,
105+
ios: true,
106+
scope: '/',
107+
start_url: '/',
108+
orientation: 'omit',
109+
icons: [
110+
{
111+
src: path.resolve('src/assets/icon-pwa-512x512.png'),
112+
sizes: [72, 96, 128, 144, 150, 192, 384, 512],
113+
},
114+
{
115+
src: path.resolve('src/assets/icon-pwa-512x512.png'),
116+
sizes: [120, 152, 167, 180],
117+
ios: true,
118+
},
119+
],
120+
}),
98121
]
99122
});

0 commit comments

Comments
 (0)