一個 PWA 的誕生

蘇丹發(fā)布于2019-08-23 12:00 / 577人閱讀

摘要：不是一個新名詞，早在年已經(jīng)提出這個思想，但是直到的發(fā)布，終于可以在中添加到主屏，只有安卓和都能使用的基本功能，它才算是真的開始走近大眾。

原文鏈接：https://ssshooter.com/2018-09...

PWA（Progressive Web Apps）雖然是網(wǎng)頁應用，但是可以帶來媲美原生的用戶體驗，其中包含離線可用，后臺推送等功能。PWA 不是一個新名詞，早在 2015 年已經(jīng)提出這個思想，但是直到 iOS12 的發(fā)布，PWA 終于可以在 iOS 中添加到主屏，只有安卓和 iOS 都能使用 PWA 的基本功能，它才算是真的開始走近大眾。想了解 PWA，可以看看百度的 LAVAS 官網(wǎng)，在國內(nèi)網(wǎng)站中 LAVAS 官網(wǎng)會有比較完整的 PWA 資料。

本文可以提前讓大家熟悉 PWA 搭建，文中提到的配置來自一個 Redesign 的 nipponcolors，最近才做好的，使用的各種庫都是現(xiàn)在（2018.09.14）最新的，可用的，另外本文不討論應用功能，單純講講 PWA 的搭建。

倉庫地址：https://github.com/ssshooter/...
網(wǎng)頁地址：https://ssshooter.github.io/n...

搭建 使用 Vue-cli3

Vue-cli3 與 2 的區(qū)別挺大的，3 默認搭建工程并非像 2 一樣拉取模板，而是自己選擇需要的 feature 生成項目。

要生成 PWA 項目請勾上 PWA Support

Vue-cli3 的一個關(guān)于 HMR 的已知問題

Issue 地址
假設大家都知道 HMR（熱模塊更新）是什么了，vue-cli3 的某些版本可能會有這么一個問題，HMR 無法使用，控制臺就一直顯示 waiting 連接，文件一改直接顯示連接斷開。解決方案有二：

如果你的依賴使用 cnpm 安裝，嘗試刪掉 node_modules 后使用 npm 下載。

在 vue.config.js 作以下配置

chainWebpack: config => {
    config.resolve.symlinks(true)
    return config
},

值得注意的配置 eslint 配置

在這里首先推薦一下尾逗號，加上尾逗號的好處只有一個，但真的十分重要，那就是 diff 會非常好看。然后 eslint-plugin-vue 插件是一些預設規(guī)則組合，分 base，essential，strongly-recommended，recommended 四級，請自由選擇，沒有最好的搭配，只要用得舒服就好，團隊合作還是非常推薦定好 eslint 規(guī)則，使用盡量詳細的同一套規(guī)則，在代碼合并時感覺會非常爽快。

設置 eslint 后建議配置開發(fā)服務器的 overlay 選項，在 eslint 報錯時會覆蓋在頁面上，時刻提醒你寫代碼得有信條。

  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },

資源優(yōu)化 圖片

vue-cli3 搭建的工程沒有自帶圖片優(yōu)化插件，所以請自行安裝。有更好的圖片壓縮插件求推薦啦，這里使用的是 imagemin-webpack-plugin，基本配置如下：

var ImageminPlugin = require("imagemin-webpack-plugin").default
// Or if using ES2015:
// import ImageminPlugin from "imagemin-webpack-plugin"

module.exports = {
  plugins: [
    // Make sure that the plugin is after any plugins that add images
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== "production", // Disable during development
      pngquant: {
        quality: "95-100"
      }
    })
  ]
}

字體

對于中文站點，字體問題可是個大問題，因為中文字體實在太太太太大了，隨隨便便一個都 10m 了，等待這東西下載真的給用戶體驗帶來致命打擊，但是！但是！有這么一個程序！

font-spider-plus

之前一直知道 font-spider，它的功能是獲取使用到的字體，然后分析出使用了改字體的字符，最后把字符抽離出來。這大大減少了中文字體的體積，但是缺不能用于 js 渲染的網(wǎng)頁，后來才找到 font-spider-plus，雖然要手動操作一下（最簡單的方法：發(fā)布網(wǎng)頁之后用 fsp 把用到的字爬出來），但是得到的優(yōu)化真的很大哦！

響應式設計

PWA 給了我們一個很簡單的跨平臺方法，不只有移動端可以添加到首屏，PC 端也同樣可以，所以響應式設計對 PWA 可以說是必須的。
PC 端的添加方法在 F12 里，至于更加方便的方法...好像是要改 flag 才能用，那么也談不上多方便了，所以不介紹了，等到此項技術(shù)更加成熟，想必這個按鈕就會出現(xiàn)在顯眼的位置