Skip to content

Commit c8185aa

Browse files
TechQueryTechQuery
committed
[fix] PWA updating
[optimize] upgrade Upstream packages
1 parent 009c6d7 commit c8185aa

File tree

10 files changed

+108
-91
lines changed

10 files changed

+108
-91
lines changed

‎package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,29 @@
2020
"url": "https://github.com/EasyWebApp/EasyWebApp.github.io/issues"
2121
},
2222
"dependencies": {
23-
"boot-cell": "^1.0.0-rc.23",
23+
"boot-cell": "^1.0.0-rc.36",
2424
"cell-router": "^2.0.0-rc.8",
2525
"classnames": "^2.2.6",
26-
"github-web-widget": "^3.0.0-beta.4",
26+
"github-web-widget": "^3.0.0-beta.5",
2727
"koajax": "^0.6.2",
28-
"marked": "^1.1.0",
29-
"mobx": "^5.15.4",
30-
"mobx-web-cell": "^0.3.0",
31-
"prismjs": "^1.20.0",
32-
"web-cell": "^2.0.1",
33-
"web-utility": "^1.5.2"
28+
"marked": "^1.1.1",
29+
"mobx": "^5.15.5",
30+
"mobx-web-cell": "^0.3.1",
31+
"prismjs": "^1.21.0",
32+
"web-cell": "^2.1.3",
33+
"web-utility": "^1.7.0"
3434
},
3535
"devDependencies": {
36-
"@babel/core": "^7.10.2",
36+
"@babel/core": "^7.11.1",
3737
"@types/classnames": "^2.2.10",
38-
"autoprefixer": "^9.8.0",
38+
"autoprefixer": "^9.8.6",
3939
"husky": "^4.2.5",
40-
"less": "^3.11.3",
41-
"lint-staged": "^10.2.9",
40+
"less": "^3.12.2",
41+
"lint-staged": "^10.2.11",
4242
"parcel-bundler": "^1.12.4",
43-
"postcss-modules": "^2.0.0",
43+
"postcss-modules": "^3.2.0",
4444
"prettier": "^2.0.5",
45-
"typescript": "^3.9.5",
45+
"typescript": "^3.9.7",
4646
"workbox-cli": "^4.3.1"
4747
},
4848
"prettier": {
@@ -65,8 +65,8 @@
6565
}
6666
},
6767
"scripts": {
68-
"start": "rm -rf dist/ && parcel source/index.html --open",
6968
"test": "lint-staged",
69+
"start": "workbox generateSW && parcel source/index.html --open",
7070
"pack-dist": "parcel build source/index.html --public-url .",
7171
"pack-sw": "rm -f dist/sw.js.map && workbox generateSW",
7272
"build": "rm -rf dist/ && npm run pack-dist && npm run pack-sw"

‎source/index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,24 @@
1212
<meta name="author" content="[email protected]" />
1313

1414
<link rel="manifest" href="index.webmanifest" />
15+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js"></script>
1516
<link
1617
rel="stylesheet"
17-
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
18+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"
1819
/>
1920
<link
2021
rel="stylesheet"
21-
href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css"
22+
href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css"
2223
/>
2324
<link
2425
rel="stylesheet"
25-
href="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/themes/prism-okaidia.css"
26+
href="https://cdn.jsdelivr.net/npm/prismjs@1.21.0/themes/prism-okaidia.css"
2627
/>
2728
<link rel="stylesheet" href="index.less" />
2829

29-
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Object.fromEntries%2CArray.prototype.flat"></script>
30-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected].1/webcomponents-bundle.min.js"></script>
31-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected].1/custom-elements-es5-adapter.js"></script>
30+
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Object.fromEntries%2CArray.prototype.flat%2CIntersectionObserver%2CIntersectionObserverEntry%2CResizeObserver"></script>
31+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected].4/custom-elements-es5-adapter.js"></script>
32+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected].4/webcomponents-bundle.js"></script>
3233

3334
<script async src="index.tsx"></script>
3435
</head>

‎source/index.less‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
11
:global {
2-
.container {
3-
max-width: 960px;
4-
}
5-
page-router > footer img.d-block {
6-
max-width: 1.5rem;
7-
max-height: 1.5rem;
8-
}
9-
page-router > footer a {
10-
margin: auto 0.25rem;
11-
}
12-
page-router > footer li {
13-
white-space: nowrap;
2+
@media (min-width: 960px) {
3+
.container {
4+
max-width: 960px;
5+
}
146
}
157
.gitter-chat-embed {
168
top: 3.7rem;

‎source/index.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1+
import { serviceWorkerUpdate } from 'web-utility';
12
import { documentReady, render, createCell } from 'web-cell';
23

34
import { PageRouter } from './page/Router';
45

5-
if ('serviceWorker' in navigator) navigator.serviceWorker.register('./sw.ts');
6+
const { serviceWorker } = window.navigator;
7+
8+
serviceWorker
9+
?.register('/sw.js')
10+
.then(serviceWorkerUpdate)
11+
.then(worker => {
12+
if (window.confirm('检测到新版本，是否立即启用？'))
13+
worker.postMessage({ type: 'SKIP_WAITING' });
14+
});
15+
16+
serviceWorker?.addEventListener('controllerchange', () =>
17+
window.location.reload()
18+
);
619

720
documentReady.then(() =>
821
render(<PageRouter />, document.body.firstElementChild)

‎source/page/Case.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createCell, Fragment } from 'web-cell';
22
import classNames from 'classnames';
3-
import { IFrame } from 'boot-cell/source/Content/IFrame';
3+
import { Embed } from 'boot-cell/source/Media/Embed';
44

55
import style from './Case.module.less';
66
import { cases } from './data';
@@ -29,7 +29,8 @@ function Case({
2929
<h2 className="display-5">{name}</h2>
3030
<p className="lead">{description}</p>
3131
</div>
32-
<IFrame
32+
<Embed
33+
is="iframe"
3334
className={classNames(
3435
`bg-${reverse ? 'dark' : 'light'}`,
3536
'shadow-sm',

‎source/page/Main.module.less‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,24 @@
2828
background-color: #e5e5e5;
2929
}
3030

31-
.featurette-divider {
32-
margin: 5rem 0;
31+
@media (min-width: 576px) {
32+
.featurette-divider {
33+
margin: 5rem 0 !important;
34+
}
3335
}
3436
.featurette-heading {
3537
font-weight: 300;
38+
line-height: 1;
3639
letter-spacing: -0.05rem;
37-
}
38-
@media (min-width: 40em) {
39-
.featurette-heading {
40+
41+
@media (min-width: 40em) {
4042
font-size: 50px;
4143
}
4244
}
43-
@media (min-width: 62em) {
44-
.featurette-heading {
45-
margin-top: 5.5rem;
45+
@media (max-width: 767px) {
46+
.featurette-logo {
47+
display: block;
48+
width: 50%;
49+
margin: auto;
4650
}
4751
}

‎source/page/Main.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { createCell, Fragment } from 'web-cell';
22
import classNames from 'classnames';
33
import { Button } from 'boot-cell/source/Form/Button';
44
import { TooltipBox } from 'boot-cell/source/Prompt/Tooltip';
5-
import { DropMenu, DropMenuProps } from 'boot-cell/source/Navigator';
5+
import { DropMenu, DropMenuProps } from 'boot-cell/source/Navigator/DropMenu';
6+
import { Embed } from 'boot-cell/source/Media/Embed';
7+
import { Image } from 'boot-cell/source/Media/Image';
68

79
import { scaffold, feature } from './data';
810
import style from './Main.module.less';
@@ -43,9 +45,8 @@ export function MainPage() {
4345
</section>
4446

4547
<section className="container py-5" id="Demo">
46-
<iframe
47-
className="w-100 border-0 rounded"
48-
style={{ height: '90vh' }}
48+
<Embed
49+
is="iframe"
4950
title="WebCell scaffold"
5051
src="https://codesandbox.io/embed/webcell-demo-9gyll?autoresize=1&amp;fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2FClock.tsx&amp;theme=dark"
5152
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
@@ -54,35 +55,39 @@ export function MainPage() {
5455
</section>
5556

5657
<div className="container">
57-
<h2 className="text-center display-4">核心特性</h2>
58+
<h2 className="text-center display-4 mb-5">核心特性</h2>
5859

5960
{feature.map(({ title, summary, link, logo }, index) => (
6061
<Fragment>
6162
<section
6263
className={classNames(
63-
'd-flex',
64-
'align-items-center',
65-
'justify-content-between',
64+
'row',
65+
'align-items-end',
6666
index % 2 && 'flex-row-reverse'
6767
)}
6868
>
69-
<div>
69+
<div className="col-md-10">
7070
<h2 className={style['featurette-heading']}>
7171
{title}
7272
</h2>
7373
<p className="lead">{summary}</p>
7474
</div>
75-
<a
76-
className="w-25 mx-3"
77-
target="_blank"
78-
href={link}
79-
>
80-
<img className="img-fluid" src={logo} />
75+
<a className="col-md-2" target="_blank" href={link}>
76+
<Image
77+
fluid
78+
className={style['featurette-logo']}
79+
src={logo}
80+
/>
8181
</a>
8282
</section>
8383

8484
{index + 1 < feature.length ? (
85-
<hr className={style['featurette-divider']} />
85+
<hr
86+
className={classNames(
87+
'my-5',
88+
style['featurette-divider']
89+
)}
90+
/>
8691
) : null}
8792
</Fragment>
8893
))}

‎source/page/Router.tsx‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { component, createCell, Fragment } from 'web-cell';
22
import { observer } from 'mobx-web-cell';
33
import { HTMLRouter } from 'cell-router/source';
4-
import { NavBar } from 'boot-cell/source/Navigator';
4+
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
55
import { isXDomain } from 'web-utility';
66

77
import { history } from '../model';
@@ -29,8 +29,12 @@ export class PageRouter extends HTMLRouter {
2929
renderCopyright() {
3030
return (
3131
<Fragment>
32-
<img title="WebCell" src={WebCell_0} className="d-block mb-2" />
33-
32+
<img
33+
className="d-block mb-2"
34+
style={{ maxWidth: '1.5rem' }}
35+
title="WebCell"
36+
src={WebCell_0}
37+
/>
3438
<small className="d-block mb-3 text-muted">
3539
&copy; 2018 - {new Date().getFullYear()}
3640
<a target="_blank" href="https://github.com/EasyWebApp">
@@ -91,36 +95,31 @@ export class PageRouter extends HTMLRouter {
9195
);
9296
}
9397

94-
renderFooterMenu() {
95-
return (
96-
<div className="row">
97-
{footer.map(({ title, menu }) => (
98-
<div className="col-4 col-md">
99-
<h5>{title}</h5>
100-
<ul className="list-unstyled text-small">
101-
{menu?.map(({ href, title }) => (
102-
<li>
103-
<a
104-
className="text-muted"
105-
target={isXDomain(href) ? '_blank' : ''}
106-
href={href}
107-
>
108-
{title}
109-
</a>
110-
</li>
111-
))}
112-
</ul>
113-
</div>
98+
renderFooterList = ({ title, menu }: typeof footer[0]) => (
99+
<div className="col-4 col-md">
100+
<h5>{title}</h5>
101+
<ul className="list-unstyled text-small">
102+
{menu?.map(({ href, title }) => (
103+
<li>
104+
<a
105+
className="text-muted"
106+
target={isXDomain(href) ? '_blank' : ''}
107+
href={href}
108+
>
109+
{title}
110+
</a>
111+
</li>
114112
))}
115-
</div>
116-
);
117-
}
113+
</ul>
114+
</div>
115+
);
118116

119117
render() {
120118
return (
121119
<Fragment>
122120
<NavBar
123121
narrow
122+
menuAlign="around"
124123
menu={header}
125124
brand={
126125
<img
@@ -146,9 +145,7 @@ export class PageRouter extends HTMLRouter {
146145
>
147146
<img src={EasyWebApp_QQ} title="QQ 群" />
148147
</a>
149-
<div className="col-12 col-md">
150-
{this.renderFooterMenu()}
151-
</div>
148+
{footer.map(this.renderFooterList)}
152149
</div>
153150
</footer>
154151
</Fragment>

‎source/sw.ts‎

Whitespace-only changes.

‎workbox-config.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
module.exports = {
22
globDirectory: 'dist/',
3-
globPatterns: ['**/*.{css,js,ico,gif,png,jpg,jpeg,webp}'],
3+
globPatterns: [
4+
'**/*.{html,css,js,json,webmanifest,ico,gif,jpg,jpeg,png,webp}'
5+
],
46
swDest: 'dist/sw.js',
57
importWorkboxFrom: 'disabled',
68
importScripts: [
79
'https://cdn.jsdelivr.net/npm/[email protected]/build/workbox-sw.min.js'
8-
]
10+
],
11+
clientsClaim: true,
12+
cleanupOutdatedCaches: true
913
};

0 commit comments

Comments
 (0)