一個(gè) PWA 的誕生

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

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

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

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

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

倉(cāng)庫(kù)地址：https://github.com/ssshooter/...
網(wǎng)頁(yè)地址：https://ssshooter.github.io/n...

搭建 使用 Vue-cli3

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

要生成 PWA 項(xiàng)目請(qǐng)勾上 PWA Support

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

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

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

在 vue.config.js 作以下配置

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

值得注意的配置 eslint 配置

在這里首先推薦一下尾逗號(hào)，加上尾逗號(hào)的好處只有一個(gè)，但真的十分重要，那就是 diff 會(huì)非常好看。然后 eslint-plugin-vue 插件是一些預(yù)設(shè)規(guī)則組合，分 base，essential，strongly-recommended，recommended 四級(jí)，請(qǐng)自由選擇，沒(méi)有最好的搭配，只要用得舒服就好，團(tuán)隊(duì)合作還是非常推薦定好 eslint 規(guī)則，使用盡量詳細(xì)的同一套規(guī)則，在代碼合并時(shí)感覺(jué)會(huì)非常爽快。

設(shè)置 eslint 后建議配置開(kāi)發(fā)服務(wù)器的 overlay 選項(xiàng)，在 eslint 報(bào)錯(cuò)時(shí)會(huì)覆蓋在頁(yè)面上，時(shí)刻提醒你寫(xiě)代碼得有信條。

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

資源優(yōu)化 圖片

vue-cli3 搭建的工程沒(méi)有自帶圖片優(yōu)化插件，所以請(qǐng)自行安裝。有更好的圖片壓縮插件求推薦啦，這里使用的是 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"
      }
    })
  ]
}

字體

對(duì)于中文站點(diǎn)，字體問(wèn)題可是個(gè)大問(wèn)題，因?yàn)橹形淖煮w實(shí)在太太太太大了，隨隨便便一個(gè)都 10m 了，等待這東西下載真的給用戶(hù)體驗(yàn)帶來(lái)致命打擊，但是！但是！有這么一個(gè)程序！

font-spider-plus

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

響應(yīng)式設(shè)計(jì)

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