摘要：另外，單頁應(yīng)用因?yàn)閿?shù)據(jù)前置到了前端，不利于搜索引擎的抓取。所以我們需要對(duì)自己的單頁應(yīng)用進(jìn)行一些優(yōu)化。

最近秋招之余空出時(shí)間來按自己的興趣動(dòng)手做了一個(gè)項(xiàng)目，一個(gè)基于vue-cli3.0, vue，typescript的移動(dòng)端pwa，現(xiàn)在趁熱打鐵，將這個(gè)項(xiàng)目從開發(fā)到部署整個(gè)過程記錄下來，并將從這個(gè)項(xiàng)目中學(xué)習(xí)到的東西分享出來，如果大家有什么意見或補(bǔ)充也可以在評(píng)論區(qū)提出。先介紹一下這個(gè)項(xiàng)目

基于vue，typescript，pwa的一個(gè)移動(dòng)端webapp，取名叫browseExp，主要功能是瀏覽學(xué)校心理學(xué)院部分實(shí)驗(yàn)信息。（上圖是添加到桌面的一級(jí)入口）。這個(gè)項(xiàng)目已經(jīng)部署到了服務(wù)器上，我們看一下項(xiàng)目最終在客戶端運(yùn)行的樣子

可以看到我通過桌面上的一級(jí)入口，進(jìn)入了我們的webapp，并且在斷網(wǎng)的條件下進(jìn)行。這就是pwa的作用，下面開始分享這次的開發(fā)到部署的過程。

pwa 在國(guó)內(nèi)已經(jīng)火過一段時(shí)間了，但是自己還沒做過一款pwa應(yīng)用。

vue-cli 3.0 增加了對(duì)pwa的支持

vue2.5后增加了對(duì)ts的支持

想搞事情！

這個(gè)項(xiàng)目的地址為: browseExp pwa，想要查看代碼的同學(xué)可以看一下。這個(gè)項(xiàng)目要注意的點(diǎn)主要是：

在vue中使用ts

簡(jiǎn)單骨架屏的運(yùn)用

首屏加載時(shí)間和seo的優(yōu)化

pwa相關(guān)特性的實(shí)現(xiàn)

移動(dòng)端的一些問題解決

如何部署項(xiàng)目

后面的內(nèi)容也圍繞著這些點(diǎn)來展開。

使用ts主要是因?yàn)閠s給我們帶來了類型系統(tǒng)，可以讓我們寫出健壯的代碼，它的作用在大型項(xiàng)目中尤其突出，所以還是非常鼓勵(lì)大家去使用的，我們使用ts進(jìn)行開發(fā)一般是編寫基于類的vue組件，所以可以使用官方維護(hù)的vue-class-component或者vue-property-decorator，vue-cli3.0也給我們提供了開箱即用的typescript支持，開發(fā)體驗(yàn)還是相當(dāng)友好的。一個(gè)vue組件demo：

import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Name extends Vue {
  @Prop() private name!: string;
  private complete!: boolean;
  private data() {
    return {
      complete: false,
    };
  }
  private myMethod() {
    // ...
  }
  private created() {
    // ...
  }
}

另外，在vue-cli3.0提供的腳手架下，可以在shims-tsx.d.ts文件下添加全局接口或變量等，在shims-vue.d.ts定義第三方包的類型聲明。

骨架屏（skeleton screen）已經(jīng)不是什么新奇的概念，他的主要作用就是用來過渡頁面的空白狀態(tài)，提升用戶體驗(yàn)，比如頁面跳轉(zhuǎn)等待，數(shù)據(jù)加載等待等，傳統(tǒng)的骨架平實(shí)現(xiàn)方案有 服務(wù)端渲染和預(yù)渲染等，而這個(gè)項(xiàng)目中引入骨架屏主要是想過渡數(shù)據(jù)加載時(shí)頁面的局部空白狀態(tài)，所以就直接采用編寫一個(gè)骨架屏組件SkeletonExp.vue的方式來過渡。

如果你對(duì)骨架屏有更大的需求，可以在網(wǎng)上搜到更多的教程，這里就不列舉了。

單頁應(yīng)用（single page web application，SPA）一個(gè)缺點(diǎn)就是首次加載需要加載較多的內(nèi)容，所以首屏加載時(shí)間就會(huì)比較長(zhǎng)。另外，單頁應(yīng)用因?yàn)閿?shù)據(jù)前置到了前端，不利于搜索引擎的抓取。所以我們需要對(duì)自己的單頁應(yīng)用進(jìn)行一些優(yōu)化。這里我們使用了prerender-spa-plugin這個(gè)webpack插件，他的作用就是將我們指定的路由進(jìn)行預(yù)渲染到html，進(jìn)而解決首次加載白屏?xí)r間長(zhǎng)問題，以及一定程度上解決seo問題。在vue-cli3.0中，我們的相關(guān)配置是被隱藏起來的，我們可以通過vue.config.js來將我們的配置合并到默認(rèn)配置中。

// vue.config.js

const path = require("path")
const PrerenderSPAPlugin = require("prerender-spa-plugin")

module.exports = {
  configureWebpack(config) {
    if (process.env.NODE_ENV !== "production") return;
    return  {
      plugins: [
        new PrerenderSPAPlugin({
          // Required - The path to the webpack-outputted app to prerender.
          staticDir: path.join(__dirname, "dist"),
          // Required - Routes to render.
          routes: ["/"],
        })
      ]
    }
  },
}

效果：

上圖是該app在網(wǎng)絡(luò)環(huán)境為slow 3G下首次打開時(shí)的效果，可以看到整個(gè)過程，先由谷歌頁面跳至browseExp，首先引入眼簾的是我們的預(yù)渲染頁面，它代替我網(wǎng)址跳轉(zhuǎn)后應(yīng)用加載的白屏?xí)r間，（前面的小段白屏是頁面跳轉(zhuǎn)的白屏，不是應(yīng)用加載的白屏）然后加載完畢后就會(huì)去請(qǐng)求我們的數(shù)據(jù)，這時(shí)候骨架屏就出現(xiàn)了，過渡這段頁面局部白屏的時(shí)間，最后為真實(shí)的頁面。
預(yù)渲染也有它的缺點(diǎn)：那就是預(yù)渲染的頁面內(nèi)容可能與真實(shí)內(nèi)容由一定出入，而且還無法交互。所以如果應(yīng)用的內(nèi)容具有很強(qiáng)的實(shí)時(shí)性和交互性的話，可以考慮采用骨架屏的方式來進(jìn)行首屏加載的白屏過渡，但是這樣就無法優(yōu)化seo了，所以按自己的實(shí)際場(chǎng)景來做選擇。

另外對(duì)于首屏加載速度還可以通過組件懶加載的方式，對(duì)組件進(jìn)行懶加載，只有當(dāng)需要默寫組件的時(shí)候才去加載他們，也可以減少首屏加載需要加載的文件大小，提高首屏加載速度，也有利于service worker對(duì)app shell進(jìn)行顆粒度更小的緩存。結(jié)合Vue的異步組件和webpack的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載，例如

// router.js通過動(dòng)態(tài)import來引入組件，其他
import Vue from "vue";
import Router from "vue-router";
//這里用home組件做例子
const Home = () => import("./views/Home/Home.vue");

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
  ],
});

這樣就可以對(duì)我們的路由組件進(jìn)行懶加載了，你會(huì)發(fā)現(xiàn)我們的代碼會(huì)按組件為單位打包成了多個(gè)js文件。

在我們的項(xiàng)目基本成型之后，可以考慮將其升級(jí)為pwa了。關(guān)于pwa是什么，我相信大家都知道，這玩意在國(guó)外已經(jīng)火了幾百年了，但國(guó)內(nèi)除了幾家大公司，貌似沒多少人去嘗試它，不過在上一年開始，pwa在國(guó)內(nèi)還是熱了一下的。pwa是我們?cè)谧非體ebapp便捷和原生應(yīng)用良好體驗(yàn)結(jié)合的過程中的產(chǎn)物，目前兼容性是最大障礙，但相信它在國(guó)內(nèi)的前景還是明朗的。pwa的特性有可離線、添加到桌面（一級(jí)入口）、后臺(tái)同步、服務(wù)端推送等等，這個(gè)項(xiàng)目的話實(shí)現(xiàn)了可離線和添加到桌面這兩個(gè)功能。起初聽聞pwa時(shí)以為會(huì)很復(fù)雜，實(shí)踐后發(fā)現(xiàn)很簡(jiǎn)單。

ps: 開發(fā)過程在控制臺(tái)的Application中可調(diào)試對(duì)應(yīng)內(nèi)容

workbox 是pwa的一個(gè)工具集合，圍繞它的還有一些列工具，如 workbox-cli、gulp-workbox、workbox-webpack-plagin 等等，workbox本身相當(dāng)于service worker的一個(gè)框架，封裝了各種api，和緩存策略，可以讓我們更加便捷的使用service worker。vue-cli3.0集成的是workbox-webpack-plagin，我們可以通過vue.config.js的pwa配置項(xiàng)進(jìn)行配置
首先，在vue.config.js文件中的進(jìn)行配置，更詳細(xì)的配置項(xiàng)

// vue.config.js

module.exports = {
  pwa: {
    // 一些基礎(chǔ)配置
    name: "Browsing-Exp",
    themeColor: "#6476DB",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",

/*
* 兩個(gè)模式，GenerateSW（默認(rèn)）和 InjectManifest
* GenerateSW 在我們build項(xiàng)目時(shí)候，每次都會(huì)新建一個(gè)service worker文件
* InjectManifest 可以讓我們編輯一個(gè)自定義的service worker文件，實(shí)現(xiàn)更多的功能，并且可以
* 拿到預(yù)緩存列表
*/
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // 自定義的service worker文件的位置
      swSrc: "src/service-worker.js",
      // ...other Workbox options...
    }
}

然后我們需要在src文件目錄下面新建一個(gè)service-worker.js，這里拿此項(xiàng)目做例子，workbox的常用接口有：

workbox.precaching 對(duì)靜態(tài)支援進(jìn)行緩存

workbox.routing 進(jìn)行路由控制

workbox.strategies 提供緩存策略

等等

更詳細(xì)的 接口和配置教程

// src/service-worker.js

// 設(shè)置相應(yīng)緩存的名字的前綴和后綴
workbox.core.setCacheNameDetails({
  prefix: "browse-exp",
  suffix: "v1.0.0",
});
// 讓我們的service worker盡快的得到更新和獲取頁面的控制權(quán)
workbox.skipWaiting();
workbox.clientsClaim();

/*
* vue-cli3.0通過workbox-webpack-plagin 來實(shí)現(xiàn)相關(guān)功能，我們需要加入
* 以下語句來獲取預(yù)緩存列表和預(yù)緩存他們，也就是打包項(xiàng)目后生產(chǎn)的html，js，css等* 靜態(tài)文件
*/
workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

// 對(duì)我們請(qǐng)求的數(shù)據(jù)進(jìn)行緩存，這里采用 networkFirst 策略
workbox.routing.registerRoute(
  new RegExp(".*experiments?.*"), 
  workbox.strategies.networkFirst()
);
workbox.routing.registerRoute(
  new RegExp(".*experiments/d"),
  workbox.strategies.networkFirst()  
)
workbox.routing.registerRoute(
  new RegExp(".*experiment_types.*"),
  workbox.strategies.networkFirst()
)

在這里，首先通過workbox.precaching.precacheAndRoute配置app shell的預(yù)緩存，然后就是通過workbox.routing.registerRoute對(duì)請(qǐng)求數(shù)據(jù)的緩存，因?yàn)閷?duì)于請(qǐng)求的數(shù)據(jù)有一定的實(shí)時(shí)性要求，所以采用網(wǎng)絡(luò)優(yōu)先策略 networkFirst ，這里隨便提一下相關(guān)的策略：

網(wǎng)絡(luò)優(yōu)先策略，優(yōu)先嘗試通過網(wǎng)絡(luò)請(qǐng)求來獲取數(shù)據(jù)，拿到數(shù)據(jù)后將數(shù)據(jù)返回給用戶，并更新緩存，獲取數(shù)據(jù)失敗就使用緩存中的數(shù)據(jù)。

緩存優(yōu)先策略，優(yōu)先獲取緩存中的資源，如果緩存中沒有相關(guān)資源，那么就發(fā)起網(wǎng)絡(luò)請(qǐng)求。

顧名思義，只使用網(wǎng)絡(luò)請(qǐng)求獲取的資源

顧名思義，只使用緩存中的資源

此策略會(huì)直接返回緩存中的資源，確保獲取資源的速度，然后再發(fā)起網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)去更新緩存中的資源。如果緩存中沒有對(duì)應(yīng)資源的話就會(huì)發(fā)起網(wǎng)絡(luò)請(qǐng)求，并緩存資源。

這些配置可以讓我們的得以在離線環(huán)境下運(yùn)行，但是這些配置都是相對(duì)于打包出來的項(xiàng)目文件的，也就是dist文件里的內(nèi)容。我們?cè)陂_發(fā)過程的dev模式是體驗(yàn)不到效果的，我們?cè)趺床榭葱Ч兀?/p>

方案1：編寫一個(gè)后臺(tái)服務(wù)，我們可以通過node.js等編寫一個(gè)后臺(tái)服務(wù)去訪問我們的應(yīng)用，service worker本來需要在https環(huán)境下運(yùn)行，但是如果是本地 localhost 環(huán)境的話，service worker可以在http協(xié)議上運(yùn)行。

方案2：借助google提供的chrome擴(kuò)展應(yīng)用Web Server for Chrome為我們的應(yīng)用啟動(dòng)一個(gè)服務(wù)，比較靈活，所以我采用了這種方式。

點(diǎn)擊choose foloer選擇我們的dist文件夾，勾選Automatically show index.html開啟服務(wù)，我們就可以通過下面的鏈接訪問應(yīng)用了，通過勾選Accessible on local network還可以生成另一個(gè)地址，可以讓我們?cè)谑謾C(jī)端訪問應(yīng)用。

manifest.json 提供了將webapp 添加到設(shè)備主屏幕的功能，更詳細(xì)的配置內(nèi)容在此查看。我們可以通過它給我們的應(yīng)用設(shè)置圖標(biāo)，啟動(dòng)動(dòng)畫，背景顏色等等。它在我們項(xiàng)目的public下：

// public/manifest.json
// 最基本的配置內(nèi)容

{
  "name": "瀏覽我們的實(shí)驗(yàn)吧！",
  "short_name": "BrowseExp",
  "icons": [
    {
      "src": "/img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

當(dāng)瀏覽器（支持此功能的瀏覽器）檢測(cè)到目錄中的manifest.json文件時(shí)，就會(huì)讀取其中的內(nèi)容。在適當(dāng)?shù)臅r(shí)機(jī)彈出詢問框，詢問是否將應(yīng)用添加到桌面。注意它不會(huì)在第一次訪問就彈出，而是發(fā)現(xiàn)用戶在一定時(shí)間內(nèi)多次訪問該網(wǎng)站時(shí)才會(huì)彈出。在開發(fā)過程中我們可以點(diǎn)擊Application -> Manifest -> Add to homescreen 觸發(fā)彈框彈出。

作為移動(dòng)端web app，我們需要解決一些常見的小問題，比如：

各瀏覽器間樣式統(tǒng)一問題

移動(dòng)端點(diǎn)擊300ms延遲問題

點(diǎn)透事件

rem的運(yùn)用

常見做法就是引入normalize.css重置我們?cè)O(shè)備的默認(rèn)樣式，使得各瀏覽器的默認(rèn)樣式高度一致，避免我們的布局出現(xiàn)意想不到的情況。

因?yàn)槲覀兊囊苿?dòng)端的瀏覽器需要判斷用戶是否想要雙擊放大，所以會(huì)有一個(gè)300ms的延遲來查看用戶是否雙擊屏幕；點(diǎn)透事件就是當(dāng)我們混用touch和click事件的時(shí)候，在touch事件響應(yīng)后，如果該元素隱藏掉，那么300ms后同一位置的底層元素的click事件就會(huì)被觸發(fā)。對(duì)于它們常用的解決方法就是引入 fastclick.js ，這個(gè)庫的原理就是：修改瀏覽器的touch事件來模擬一個(gè)click事件，并把瀏覽器在300ms之后的click事件阻止掉。讓前端開發(fā)人員可以以熟悉的click來書寫代碼

移動(dòng)端我們常常會(huì)使用到rem來進(jìn)行響應(yīng)式的布局，我們通常會(huì)將html的font-size設(shè)置為 62.5%，那么我們的 1rem = 10px，便于我們的單位轉(zhuǎn)換。

開發(fā)完畢后，就需要把我們的項(xiàng)目部署到自己的服務(wù)器上面去

首先我們編寫一個(gè)后端服務(wù)，讓我們可以訪問到項(xiàng)目的index.html文件，這里采用express起個(gè)服務(wù)。

// browse-exp.js
const fs = require("fs")
const path = require("path")
const express = require("express")

const app = express();

app.use(express.static(path.resolve(__dirname, "./dist")))
app.get("*", function(req, res) {
  const html = fs.readFileSync(path.resolve(__dirname, "./dist/index.html"), "utf-8")
  res.send(html)
})

app.listen(3002, function() {
  console.log("server listening on port 3002!")
})

然后將項(xiàng)目通過比如ftp等工具上傳到服務(wù)器，我用的服務(wù)器是nginx，它的特點(diǎn)就是輕量級(jí)，高并發(fā)，可配置反向代理。然后需要配置個(gè)代理將我們對(duì)服務(wù)器的訪問代理到該項(xiàng)目。在etc/nginx/conf.d目錄下創(chuàng)建我們的配置文件 holyzheng-top-3002.conf

# etc/nginx/conf.d/holyzheng-top-3002.conf

# 實(shí)例，代表我們的應(yīng)用
upstream browseexp {
  server 127.0.0.1:3002; 
}
# 將以http協(xié)議對(duì)我們項(xiàng)目的訪問轉(zhuǎn)到https協(xié)議
server {
  listen 80; # http監(jiān)聽的端口
  server_name browseexp.holyzheng.top; # 我要使用的ip域名
  error_page 405 =200 @405; # 允許對(duì)靜態(tài)資源進(jìn)行POST請(qǐng)求
  location @405 {
    proxy_pass http://browseexp;
  }
  rewrite ^(.*) https://$host$1 permanent;
}

# 配置代理，將對(duì)域名browseexp.holyzheng.top的訪問代理到服務(wù)端的127.0.0.1:3002
# 也就是我們的應(yīng)用
server {
  listen 443;
  server_name browseexp.holyzheng.top;
# 跟證書有關(guān)的配置，在申請(qǐng)證書的時(shí)候會(huì)有提示這部分配置
  ssl on;
  ssl_certificate /etc/nginx/cert/1538045542271.pem;
  ssl_certificate_key /etc/nginx/cert/1538045542271.key;
  ssl_session_timeout 5m;
  ssl_protocols SSLv2 SSLv3 TLSv1;
  ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
  ssl_prefer_server_ciphers on;

  if ($ssl_protocol = "") { # 判斷用戶是否輸入?yún)f(xié)議
    rewrite ^(.*) https://$host$1 permanent;
  }

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;

    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;

    proxy_pass http://browseexp; # 要代理的實(shí)例
  }
}

這樣我們就可以通過對(duì)于域名來訪問了來訪問該項(xiàng)目了。這里給出對(duì)應(yīng)二維碼，可以進(jìn)行訪問查看：

下面是在安卓端UC瀏覽器訪問的結(jié)果（因?yàn)閁C對(duì)pwa的支持十分好），在幾次訪問我們的應(yīng)用后就彈出了相關(guān)的提示，點(diǎn)擊“好的”就可以添加到主屏幕了。

我非常享受嘗試新事物（自己沒做過）的這個(gè)過程，這次記錄下來并分享給大家，希望對(duì)大家有幫助，如果大家看后有什么補(bǔ)充或意見的話，歡迎評(píng)論區(qū)提出。項(xiàng)目地址：browse-Exp