渐进式网络应用程序

    渐进式网络应用程序(progressive web application - PWA)，是一种可以提供类似于native app(原生应用程序) 体验的 web app(网络应用程序)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。

    本章将重点介绍，如何为我们的应用程序添加离线体验。我们将使用名为 的 Google 项目来实现此目的，该项目提供的工具可帮助我们更简单地为 web app 提供离线支持。

    到目前为止，我们一直是直接查看本地文件系统的输出结果。通常情况下，真正的用户是通过网络访问 web app；用户的浏览器会与一个提供所需资源（例如，, .js 和 .css 文件）的 server 通讯。

    我们通过搭建一个简易 server 下，测试下这种离线体验。这里使用 http-server package：npm install http-server --save-dev。还要修改 package.json 的 scripts 部分，来添加一个 start script：

    package.json

    1. > http-server dist
    3. 启动 http-server，serve 整个 dist 文件夹
    4. 到：
    5.   http://xx.x.x.x:8080
    6.   http://127.0.0.1:8080
    7.   http://xxx.xxx.x.x:8080
    8. 按下 CTRL-C 停止服务

    如果你打开浏览器访问 http://localhost:8080 (即 http://127.0.0.1)，你应该会看到 webpack 应用程序被 serve 到 dist 目录。如果停止 server 然后刷新，则 webpack 应用程序不再可访问。

    这就是我们为实现离线体验所需要的改变。在本章结束时，我们应该要实现的是，停止 server 然后刷新，仍然可以看到应用程序正常运行。

    添加 workbox-webpack-plugin 插件，然后调整 webpack.config.js 文件：

    webpack.config.js

    1.   const path = require('path');
    2.   const HtmlWebpackPlugin = require('html-webpack-plugin');
    3.   const CleanWebpackPlugin = require('clean-webpack-plugin');
    5.   module.exports = {
    6.     entry: {
    7.       app: './src/index.js',
    8.       print: './src/print.js'
    9.     },
    10.     plugins: [
    11.       new CleanWebpackPlugin(['dist']),
    12.       new HtmlWebpackPlugin({
    13. -       title: '管理输出'
    14. +       title: '渐进式网络应用程序'
    15. -     })
    16. +     }),
    17. +     new WorkboxPlugin.GenerateSW({
    18. +       // 这些选项帮助快速启用 ServiceWorkers
    19. +       // 不允许遗留任何“旧的” ServiceWorkers
    20. +       clientsClaim: true,
    21. +       skipWaiting: true
    22.     ],
    23.     output: {
    24.       filename: '[name].bundle.js',
    25.       path: path.resolve(__dirname, 'dist')
    27.   };

    完成这些设置，再次执行 npm run build，看下会发生什么：

    所以，值得高兴的是，我们现在已经创建出一个 Service Worker。接下来该做什么？

    接下来我们注册 Service Worker，使其出场并开始表演。通过添加以下注册代码来完成此操作：

    index.js

    1.   import _ from 'lodash';
    2.   import printMe from './print.js';
    4. + if ('serviceWorker' in navigator) {
    5. +   window.addEventListener('load', () => {
    6. +     navigator.serviceWorker.register('/service-worker.js').then(registration => {
    7. +       console.log('SW registered: ', registration);
    8. +     }).catch(registrationError => {
    9. +       console.log('SW registration failed: ', registrationError);
    10. +     });
    11. +   });

    再次运行 npm build build 来构建包含注册代码版本的应用程序。然后用 npm start 将构建结果 serve 到服务下。导航至 http://localhost:8080 并查看 console 控制台。应该看到：

    现在来进行测试。停止 server 并刷新页面。如果浏览器能够支持 Service Worker，应该可以看到你的应用程序还在正常运行。然而，server 已经停止 serve 整个 dist 文件夹，此刻是 Service Worker 在进行 serve。

    chenxsan chenxsan