轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境優化：PWA

PWA可簡稱為“離線可訪問技術”。

一、下載插件

PWA： 漸進式網絡開發應用程序（離線可訪問） ，需要插件workbox-webpack-plugin的支持。
workbox --〉 workbox-webpack-plugin
這里使用workbox-webpack-plugin@5.0.0

> npm i -D workbox-webpack-plugin@5.0.0

二、核心配置

2.1、配置webpack.config.js

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/
        ……
        
// 引入PWA支持插件workbox-webpack-plugin
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

module.exports = {
    
        ……
        
    // plugins的配置
    plugins: [
        // 詳細的plugins配置

        ……

        // 離線可訪問技術PWA
        new WorkboxWebpackPlugin.GenerateSW({
        /* 
            1.豬助serviceworker快速啟動
            2.時除舊的 serviceworker
            
            生成一個 serviceworker 配罝文件~
        */
            clientsClaim: true,
            skipWaiting: true
        })
        
    ],
    
        ……
        
}

核心配置

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
    在plugins配置中加入workbox-webpack-plugin插件配置。
*/

        // 離線可訪問技術PWA
        new WorkboxWebpackPlugin.GenerateSW({
        /* 
            1.豬助serviceworker快速啟動
            2.時除舊的 serviceworker
            
            生成一個 serviceworker 配罝文件~
        */
            clientsClaim: true,
            skipWaiting: true
        })

2.2、package.json配置

eslint不認識 window. navigator全局變最
解決：需要修改package.json中eslintConfig配罝

  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true   //支持瀏覽器端全局變量
    }
  }

2.3、js入口文件注冊serviceWorker

在js入口文件中注冊打包生成的service-worker.js文件

// ./src/js/index.js

// 注冊 serviceworker
// 處理兼容性問題
if ('serviceWorker' in  navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
            .register('/service-worker.js')
            .then(() => {
                console.log('serviceworker注冊成功了~')
            })
            .catch(() => {
                console.log('serviceworker注冊失敗了~')
            })
    });
}

三、測試PWA

3.1、下載服務器支持庫

serviceworker代碼必須運行在服務器上。
為了方便測試，這里下載serve做為nodejs服務器。
這里使用serve@11.3.0版本。

> npm i -g serve@11.3.0

3.2、運行服務器

# 先打包構建生成service-worker.js文件
> npx webpack

# 啟動服務器，將build目錄下所有資源作為靜態資源暴露出去
> serve -s build

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:54551       │
   │   - On Your Network:  http://172.10.10.107:54551   │
   │                                                    │
   │   This port was picked because 5000 is in use.     │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

3.3、瀏覽器訪問

瀏覽器訪問返回的web服務器地址：http://localhost:54551

四、工程文件目錄

.
├── build     //構建打包生成的目錄
│   ├── css
│   │   └── 42c0dc2a54.css
│   ├── imgs
│   │   └── ae7bf15c0d.jpg
│   ├── index.html
│   ├── js
│   │   ├── built.6c0be554d8.js
│   │   └── built.6c0be554d8.js.map
│   ├── media
│   │   └── cffec944b5.ttf
│   ├── service-worker.js       //index.js中要注冊的service-worker.js文件
│   ├── service-worker.js.map
│   ├── workbox-bc1c2339.js
│   └── workbox-bc1c2339.js.map
├── src      //源代碼目錄
│   ├── css
│   │   ├── iconfont.css
│   │   ├── index.css
│   │   └── index.less
│   ├── imgs
│   │   ├── img.jpg
│   │   ├── img1.jpg
│   │   ├── img2.jpg
│   │   └── img3.jpg
│   ├── index.html
│   ├── js
│   │   ├── iconfont.js
│   │   ├── index.js        //添加：注冊service-worker.js文件的js代碼
│   │   └── test.js
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js       //添加 workbox-webpack-plugin插件配置