Skip to content

Commit fdab8eb

Browse files
src/content/guides/progressive-web-application.md 翻译 (#441)
* update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * update contributors * update /content/loaders & /content/plugins * fix LinkDropdown * 修复 npm 命令错误导致编译不成功的问题 * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * docs(plugins): fix typo in module-concatenation-plugin.md (#1683) * docs(concepts): simplify the introduction (#1673) Make the `index` page more beginner friendly with less technical lingo and complex details. Resolves #1416 * docs(plugins): add “scope hoisting” intro in module-concatenation-plugin (#1684) This adds a link between “concatenation behavior” and “scope hoisting”. Without this, a new person might be confused what exactly “scope hoisting” is (because it appears without any visible connection to the previous content). * docs(api): fix some method signatures in loaders.md (#1685) In actual fact the parameters passed to `emitWarning` / `emitError` must be an instance of Error. * update /content/loaders & /content/plugins * docs(guides): consistent quoute use in typescript.md (#1687) * docs(api/guides): document new --concatenate-modules flag (#1686) Document the new `--concatenate-modules` flag in both the CLI documentation and production guide. Add section on the `ModuleConcatenationPlugin` in the production guide (as we include this plugin under `-p`, it also makes sense to mention it in this guide. * docs(guides): fix issues with examples in shimming.md (#1680) Rename plugin identifier and require webpack when it is used in the configuration examples. * docs(guides): add middleware tip to the hmr guide Resolves #1682 * Revert "A new --concatenate-modules flag" (#1692) * update master * update /content/loaders & /content/plugins * docs(concepts): fix grammar in output.md (#1694) * docs(contribute): update writing-a-loader (#1691) Use normal function instead of arrow function to fix scope in loader example. * docs(plugins): add external example in SourceMapDevToolPlugin (#1676) Demonstrate how one might use the plugin to host source maps externally. * docs(config): update dev-server open option (#1693) State the ability to open in specific browser. * fix bugs * update /content/loaders & /content/plugins * docs(api): improve formatting and grammar in loaders.md * docs(api): clarify fourth parameter of `this.callback` in loaders.md Add some lead in descriptions to the `Examples` section and clarify that meta data can be passed along via the fourth parameter to `this.callback` and accepted as the third parameter to a loader function. Resolves #1607 * docs(api): populate missing link in loaders.md * docs(plugins): correct example in html-webpack-plugin (#1698) * docs(guides): update an example in production.md (#1696) Switch to shortened form when using the `DefinePlugin` to define the `process.env.NODE_ENV` value. This avoids a bug which is mentioned in the plugin's documentation: https://webpack.js.org/plugins/define-plugin/#feature-flags * fix(markdown): fix overflowing inline code (#1701) Change the css to fix the text inside code tag which was overflowing the parent div. * docs(concepts): update concepts wording (#1702) Add "static" to "module bundler". Some feedback here was given to me on twitter to make sure we are clear with what these terms mean. * update /content/loaders & /content/plugins * docs(config): fix dead link to webpack-dev-server example (#1704) * docs(concepts): use fragment links in usage instructions (#1705) This is just a quality of life adjustment that updates the list of ways to use loaders with fragment links to the relevant section in the docs. In their current state, the section feels like a dead end, abruptly cutting off with three bullet points and no examples. While one can read on and figure it out, there is a break in focus that is quite distracting. * docs(guides): add windows usage tip in getting-started (#1671) * doc(guides): fix grammatical error in build-performance (#1709) Change "less" to "fewer". * docs(guides): correct two small typos * docs(api): remove inadvertent double verb (#1714) * docs(contribute): fix grammar in writing-a-plugin (#1715) * docs(config): add semicolon for consistency (#1716) The final code block was missing a semicolon from the end of the first line; added it in to match the other require statements. * docs(contributing): add note about debian OS (#1721) Related issue: #1718 * docs(guides): add output example to shimming doc (#1720) * docs(plugins): use `.includes` over `.indexOf` (#1719) Really minor but I think `.includes` is more readable to the unfamiliar with javascript. * docs(guides): use `npx` in getting-started (#1708) Keep the mention the webpack binary's path but use the `npx` utility now that it ships with Node. Fix some punctuation and grammar. Clarify why npm scripts are still useful even over `npx`. * update /src/content/loaders & /src/content/plugins * docs(contribute): link compiler docs in writing-a-plugin (#1700) While authoring plugins the list of hooks is essential knowledge, so a link to hooks documentation page should be accessible in the top of writing a plugin guide. * docs(guides): fix `source-map` discrepancy in production.md (#1711) The `webpack.prod.js` code example in the "Specify the Evironment" section shows `cheap-module-source-map` for the `devtool` field which is not recommended for production. This section should show `source-map` to be consistent with the webpack.prod.js in the previous "Source Mapping" section. * docs(guides): rename 'runtime' to 'manifest' in caching.md (#1713) Preserve CommonsChunkPlugin boilerplate naming consistency as referenced in the CommonsChunkPlugin documentation (see below) when extracting webpack runtime and manifest boilerplate. https://webpack.js.org/plugins/commons-chunk-plugin#manifest-file * docs(guides): update output to webpack 3.9.1 (#1724) * docs(plugins): update the source-map-devtool-plugin (#1707) Clean up formatting a bit and add undocumented options from webpack/webpack#5986. Update the external source maps example to demonstrate path stripping. * docs(contribute): correct an example in the writers-guide (#1727) In a section which states the properties must be sorted alphabetically, sort the examples alphabetically. * docs(config): improve formatting and add note about library entry points in output.md * docs(guides): mention complex entry point configuration in author-libraries Note that `entry` arrays are not recommended, provide a way to properly expose stylesheets, and add a link to an `entry` object example. * docs(config): improve formatting and clarify the string usage in externals Resolves #1726 * docs(config): fix minor proselint error in externals * docs(api): clarify the `pitch` method and how it can be used in loaders.md Resolves #449 Resolves webpack#116 Refactored and enhanced the existing section using much of @sokra's explanation from: webpack/webpack#360 * docs(contribute): fix `import` statement in writing-a-loader.md (#1732) `validateOptions` is exported as a default module. * docs(config): update devtool production recommendations * docs(api): remove obsolete cli flag (#1733) The `--save` option has been removed from webpack's CLI. See the following pull request for reference: webpack/webpack#3896 * docs(concepts): add warning about incompatible `import` statements Resolves #1736 * docs(config): fix typescript setup in configuration-languages (#1734) Resolves #1735 * docs: use full `npm install` over `npm i` (#1740) Most of the guides use the full command, so it's best to stay consistent. * docs(guides): fix diff display for webpack.config.js entry object Resolves #1743 * docs: fix typos * docs: add tbroadley to contributor lists * docs(contribute): correct schema example in `writing-a-loader.md` (#1753) * docs(guides): add pwa guide (#1737) Add `progressive-web-application.md` guide which documents how to use the `workbox-webpack-plugin` to build an offline app. More on PWAs in webpack can be added here by future contributors. Resolves #1145 * docs(guides): highlight css splitting in production Resolves #1741 * docs(plugins): use `.includes` over `.indexOf` Consistent usage of `.includes` * docs(config): omit invalid `detailed` option in stats.md (#1757) * fix(mobile): correctly sort pages in mobile sidebar (#1759) * chore(vote): port voting app, update deps, and simplify config (#1717) Port the voting app to a it's own repository and expose that section of the site more prominently (in the header). This commit also... - Simplifies the webpack config slightly and allows external styles. - Updates issue template to highlight content from other repositories. - Updates some outdated dependencies. * docs(readme): reformat at 80 characters and include browserstack link By including this, _BrowserStack_ will allow us to do free testing of the site on their platform. * refactor(notification): simplify notification message and bump the version * fix(splash): fix visualization artifacts (#1762) Rebuild and clean up visualization in Sketch. Include via an inline SVG rather than an `<img>` tag. Add a `TODO` in regards to an even cleaner setup post build refactoring. Resolves #1752 * chore: pick up vote fix and update yarn lock file * chore(vote): pick up another vote patch * Update index.md (#423) * update: git merge -> git rebase * Update index.md * Update README.md * Update .travis.yml * docs: fix formatting and grammar (#1765) Fix typos, improve grammar, and change `&nbsp;` to a normal space character. * docs(concepts): change loader order from chonological to reverse (#1767) When one starts to learn about loaders it's very confusing. [This](https://webpack.js.org/contribute/writing-a-loader/#complex-usage) explains the behaviour much better. * update UPDATE.md * #422 * https://github.com/webpack-china/webpack.js.org/issues/40 * 您 -> 你 & 统一为:本指南继续沿用[xxx](/guides/xxx)中的代码示例 * src/content/guides/progressive-web-application.md 翻译
1 parent b2174fa commit fdab8eb

File tree

1 file changed

+28
-24
lines changed

1 file changed

+28
-24
lines changed

src/content/guides/progressive-web-application.md

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ contributors:
77

88
T> 本指南继续沿用[管理输出](/guides/output-management)中的代码示例。
99

10-
Progressive Web Applications (or PWAs) are web apps that deliver an experience similar to native applications. There are many things that can contribute to that. Of these, the most significant is the ability for an app to be able to function when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/).
10+
渐进式网络应用程序(Progressive Web Application - PWA),是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是,在__离线(offline)__时应用程序能够继续运行功能。这是通过使用名为 [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/) 的网络技术来实现的。
1111

12-
This section will focus on adding an offline experience to our app. We'll achieve this using a Google project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support for web apps easier to setup.
12+
本章将重点介绍,如何为我们的应用程序添加离线体验。我们将使用名为 [Workbox](https://github.com/GoogleChrome/workbox) 的 Google 项目来实现此目的,该项目提供的工具可帮助我们更轻松地配置 web app 的离线支持。
1313

1414

15-
## We Don't Work Offline Now
15+
## 现在我们并没有离线环境下运行过
1616

17-
So far, we've been viewing the output by going directly to the local file system. Typically though, a real user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets (e.g. `.html`, `.js`, and `.css` files).
17+
到目前为止,我们一直是直接查看本地文件系统的输出结果。通常情况下,真正的用户是通过网络访问网络应用程序;用户的浏览器会与一个提供所需资源(例如,`.html`, `.js` `.css` 文件)的__服务器__通讯。
1818

19-
So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script:
19+
那么让我们来使用一个简易服务器,搭建出我们所需的离线体验。我们将使用 [http-server](https://www.npmjs.com/package/http-server) package 包:`npm install http-server --save-dev`。还要修改 `package.json` `scripts` 部分,来添加一个 `start` 脚本:
2020

2121
__package.json__
2222

@@ -32,27 +32,27 @@ __package.json__
3232
}
3333
```
3434

35-
If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm start`. This should produce the following output:
35+
如果你之前没有操作过,请运行命令 `npm run build` 来构建你的项目。然后运行命令 `npm start`。这应该输出以下:
3636

3737
``` bash
3838
> http-server dist
3939

40-
Starting up http-server, serving dist
41-
Available on:
40+
启动 http-server,服务目录是 dist
41+
可以访问:
4242
http://xx.x.x.x:8080
4343
http://127.0.0.1:8080
4444
http://xxx.xxx.x.x:8080
45-
Hit CTRL-C to stop the server
45+
按下 CTRL-C 停止服务
4646
```
4747

48-
If you open your browser to `http://localhost:8080` (i.e. `http://127.0.0.1`) you should see your webpack application being served up from the `dist` directory. If you stop the server and refresh, the webpack application is no longer available.
48+
如果你打开浏览器访问 `http://localhost:8080` ( `http://127.0.0.1`),你应该会看到在 `dist` 目录创建出服务,并可以访问 webpack 应用程序。如果停止服务器然后刷新,则 webpack 应用程序不再可访问。
4949

50-
This is what we aim to change. Once we reach the end of this module we should be able to stop the server, hit refresh and still see our application.
50+
这就是我们最终要改变的现状。在本章结束时,我们应该要实现的是,停止服务器然后刷新,仍然可以查看应用程序正常运行。
5151

5252

53-
## Adding Workbox
53+
## 添加 Workbox
5454

55-
Let's add the Workbox webpack plugin and adjust the `webpack.config.js` file:
55+
添加 workbox-webpack-plugin 插件,并调整 `webpack.config.js` 文件:
5656

5757
``` bash
5858
npm install workbox-webpack-plugin --save-dev
@@ -79,8 +79,8 @@ __webpack.config.js__
7979
- })
8080
+ }),
8181
+ new WorkboxPlugin({
82-
+ // these options encourage the ServiceWorkers to get in there fast
83-
+ // and not allow any straggling "old" SWs to hang around
82+
+ // 这些选项帮助 ServiceWorkers 快速启用
83+
+ // 不允许遗留任何“旧的” ServiceWorkers
8484
+ clientsClaim: true,
8585
+ skipWaiting: true
8686
+ })
@@ -92,7 +92,7 @@ __webpack.config.js__
9292
};
9393
```
9494

95-
With that in place, let's see what happens when we do an `npm run build`:
95+
有了 Workbox,我们再看下执行 `npm run build` 时会发生什么:
9696

9797
``` bash
9898
clean-webpack-plugin: /mnt/c/Source/webpack-follow-along/dist has been removed.
@@ -117,14 +117,14 @@ Child html-webpack-plugin for "index.html":
117117
+ 2 hidden modules
118118
```
119119

120-
As you can see, we now have 2 extra files being generated; `sw.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `sw.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `sw.js` requires so it can run. Your own generated files will likely be different; but you should have an `sw.js` file there.
120+
现在你可以看到,生成了 2 个额外的文件:`sw.js` 和体积很大的 `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js``sw.js` Service Worker 文件,`precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` `sw.js` 引用的文件,所以它也可以运行。可能在你本地生成的文件会有所不同;但是你那里应该会有一个 `sw.js` 文件。
121121

122-
So we're now at the happy point of having produced a Service Worker. What's next?
122+
所以,值得高兴的是,我们现在已经创建出 Service Worker 的高兴点。接下来该做什么?
123123

124124

125-
## Registering Our Service Worker
125+
## 注册我们的 Service Worker
126126

127-
Let's allow our Service Worker to come out and play by registering it. We'll do that by adding the registration code below:
127+
让我们将注册 Service Worker,使其出场并开始表演。通过添加以下注册代码来完成此操作:
128128

129129
__index.js__
130130

@@ -143,15 +143,19 @@ __index.js__
143143
+ }
144144
```
145145

146-
Once more `npm run build` to build a version of the app including the registration code. Then serve it with `npm start`. Navigate to `http://localhost:8080` and take a look at the console. Somewhere in there you should see:
146+
再次运行 `npm build build` 来构建包含注册代码版本的应用程序。然后用 `npm start` 启动服务。访问 `http://localhost:8080` 并查看 console 控制台。在那里你应该看到:
147147

148148
``` bash
149149
SW registered
150150
```
151151

152-
Now to test it. Stop your server and refresh your page. If your browser supports Service Workers then you should still be looking at your application. However, it has been served up by your Service Worker and __not__ by the server.
152+
现在来进行测试。停止服务器并刷新页面。如果浏览器能够支持 Service Worker,你应该可以看到你的应用程序还在正常运行。然而,服务器已经__停止__了服务,此刻是 Service Worker 在提供服务。
153153

154154

155-
## Conclusion
155+
## 结论
156156

157-
You have built an offline app using the Workbox project. You've started the journey of turning your web app into a PWA. You may now want to think about taking things further. A good resource to help you with that can be found [here](https://developers.google.com/web/progressive-web-apps/).
157+
你已经使用 Workbox 项目构建了一个离线应用程序。开始进入将 web app 改造为 PWA 的旅程。你现在可能想要考虑下一步做什么。在这里的[谷歌文档](https://developers.google.com/web/progressive-web-apps/)中可以找到一些不错的资源。
158+
159+
***
160+
161+
> 原文:https://webpack.js.org/guides/progressive-web-application/

0 commit comments

Comments
 (0)