PWA入門：手把手教你製做一個PWA應用

時間  2019-11-06
標籤 pwa 入門 手把手 製做 一個 應用 简体版
原文   原文鏈接

image

簡介

Web前端的同窗是否想過學習app開發，以彌補本身移動端能力的不足？但在面對一衆的選擇時不少同窗略感迷茫，是學習ios仍是android開發？是學習原生開發、混合開發（好比：Ionic)，仍是使用react native或者flutter這樣的跨平臺框架？而app開發的學習週期長、學習成本高也讓一部分人望而卻步。得益於前端技術的飛速發展、瀏覽器性能的不斷提升，使用網頁技術開發出接近原生體驗的應用得以變爲現實，PWA就在這樣的背景下應運而生。能夠用本身熟悉的HTML、CSS、Javascript開發出媲美原生app的網站，不只擁有接近原生app的流暢程度，而且具有一些原生app纔有的特性，好比：a. 能夠在主屏上安裝應用圖標，b. 離線狀態下訪問，c. 獲取消息通知，等等。。PWA的出現讓你們看到了但願！css

對比原生應用

那PWA和原生應用相比到底有何競爭力呢？咱們分別看一下原生應用和PWA的特色：html

原生應用：前端

  • 使用原生SDK和開發工具開發
  • 須要考慮跨平臺，不一樣系統每每須要獨立開發
  • 須要發佈到應用商店才能下載使用
  • 能夠安裝到手機主屏，生成應用圖標
  • 直接運行於操做系統上，訪問系統資源方便
  • 能夠離線使用
  • 能夠獲取消息通知

PWA應用：vue

  • 使用HTML，CSS，JS開發
  • 無需考慮跨平臺，只須要考慮瀏覽器兼容性
  • 經過url訪問，無需發佈到應用商店
  • 能夠安裝到手機主屏，生成應用圖標
  • 運行於瀏覽器中，可訪問系統資源
  • 能夠離線使用
  • 能夠獲取消息通知

能夠發現PWA具有了原生應用的主要能力，可是開發流程卻比原生應用更加簡潔：a. html/css/js的羣衆基礎更好，開發效率更高；b. 省去了爲不一樣系統開發獨立版本的大量成本；c. 省去了上架到應用市場的繁瑣流程；d. 無需前往應用商店下載，用戶使用起來也更加方便。可是值得注意的是，PWA仍是相對比較新的技術，實現規範還有不少調整的空間，部分瀏覽器對PWA的支持也還不完善，可是PWA是一個趨勢，因此如今學習正合適！react

本文將經過一個簡單的列子（一個簡單的郵編查詢app）向你們展現PWA的開發流程，項目參考：Traversy Media - Build a PWA With Vue & Ionic4。完成後的效果是 這樣的 。android

建立項目

項目使用Vue + Ionic的組合進行開發。本文主要關注PWA的搭建，所以vue、ionic等技術不作過多描述。使用VSCode的同窗，建議安裝Vetur插件增長開發效率。webpack

1. 首先全局安裝 @vue/cli：ios

npm install -g @vue/cli

2. 初始化vue項目：git

vue create vue-ionic-pwa

3. 由於ionic的路由依賴於vue-router，因此接下來安裝 vue-router：github

vue add router

4. 安裝 @ionic/vue

npm install @ionic/vue

5. 在 src/main.js 中添加對ionic的引用：

...
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'

Vue.use(Ionic)
...

6. 在 src/router.js 中使用 IonicVueRouter 替換默認的vue router：

import Vue from 'vue'
import { IonicVueRouter } from '@ionic/vue';
import Home from './views/Home.vue'

Vue.use(IonicVueRouter)

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

7. 將 src/App.vue 內容修改成：

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router/>
    </ion-app>
  </div>
</template>

8. 將 src/views/Home.vue 內容修改成：

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          ZipInfo
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">My App</ion-content>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {}
}
</script>

最後，咱們運行yarn serve看下效果：

1

App功能實現

App主要有三部分組成：1. 搜索組件，用於輸入郵編並查詢，2. 展現組件，用於展現查詢到的郵編信息，3. 清除按鈕，用於清除查詢到的郵編信息

1. 搜索組件

咱們在 src/components 下面新建 ZipSearch.vue 文件做爲郵編搜索組件，主要邏輯爲當用戶輸入一串字符，按下搜索按鈕，若是輸入合法則觸發get-zip事件，若是不合法則給出提示。

ZipSearch.vue

<template>
  <ion-grid>
    <form @submit="onSubmit">
      <ion-col>
        <ion-item>
          <ion-label>ZipCode:</ion-label>
          <ion-input
            :value="zip"
            @input="zip = $event.target.value"
            name="zip"
            placeholder="Enter US ZipCode"
          />
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-button type="submit" color="primary" expand="block">Find</ion-button>
      </ion-col>
    </form>
  </ion-grid>
</template>

<script>
export default {
  name: "ZipSearch",
  data() {
    return {
      zip: ""
    };
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      const zipRegex = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
      const isValid = zipRegex.test(this.zip);
      if (!isValid) {
        this.showAlert();
      } else {
        this.$emit("get-zip", this.zip);
      }
      this.zip = "";
    },
    showAlert() {
      return this.$ionic.alertController
        .create({
          header: "Enter zipcode",
          message: "Please enter a valid US ZipCode",
          buttons: ["OK"]
        })
        .then(a => a.present());
    }
  }
};
</script>

在 src/views/Home.vue 中引入 ZipSearch 組件，當Home接收到get-zip事件時調用 https://www.zippopotam.us 的接口，獲取郵編對應的信息：

...
    <ion-content class="ion-padding">
      <ZipSearch v-on:get-zip="getZipInfo"/>
    </ion-content>
...

<script>
import ZipSearch from "../components/ZipSearch";

export default {
  name: "home",
  components: {
    ZipSearch
  },
  data() {
    return {
      info: null
    };
  },
  methods: {
    async getZipInfo(zip) {
      const res = await fetch(`https://api.zippopotam.us/us/${zip}`);
      if (res.status == 404) {
        this.showAlert();
      }
      this.info = await res.json();
    },
    showAlert() {
      return this.$ionic.alertController
        .create({
          header: "Not Valid",
          message: "Please enter a valid US ZipCode",
          buttons: ["OK"]
        })
        .then(a => a.present());
    }
  }
};
</script>

咱們先看一下搜索組件的效果：

search

輸入郵編格式錯誤：

invalid input

2. 信息展現和清除組件

獲取到郵編信息後咱們須要一個展現郵編信息的組件和一個清除信息的按鈕，在 src/components 下面新建 ZipInfo.vue和ClearInfo.vue 。

ZipInfo.vue

<template>
  <ion-card v-if="info">
    <ion-card-header>
      <ion-card-subtitle>{{info['post code']}}</ion-card-subtitle>
      <ion-card-title>{{info['places'][0]['place name']}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item>
          <ion-label>
            <strong>State:</strong>
            {{info['places'][0]['state']}} ({{info['places'][0]['state abbreviation']}})
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <strong>Latitude:</strong>
            {{info['places'][0]['latitude']}}
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <strong>Longitude:</strong>
            {{info['places'][0]['longitude']}}
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</template>

<script>
export default {
  name: "ZipInfo",
  props: ["info"]
};
</script>

ClearInfo.vue

<template>
  <ion-button color="light" expand="block" v-if="info" @click="$emit('clear-info')">Clear</ion-button>
</template>

<script>
export default {
  name: "ClearInfo",
  props: ["info"]
};
</script>

接着在Home中引入ZipInfo和ClearInfo組件：

src/views/Home.vue

...
    <ion-content class="ion-padding">
      <ZipSearch v-on:get-zip="getZipInfo"/>
      <ZipInfo v-bind:info="info"/>
      <ClearInfo v-bind:info="info" v-on:clear-info="clearInfo"/>
    </ion-content>
...

import ZipInfo from "../components/ZipInfo";
import ClearInfo from "../components/ClearInfo";

export default {
  name: "home",
  components: {
    ZipSearch, ZipInfo
  },
  methods:{
    ...
    clearInfo(){
      this.info = null;
    }
  }
}

到此，app的主體就完成了，效果以下：

app

實現PWA

咱們使用現成的 @vue/pwa 插件來給咱們的app增長PWA的能力。

安裝 @vue/pwa：

vue add @vue/pwa

安裝完成後項目中增長了 public/manifest.json 和 registerServiceWorker.js兩個文件。其中 public/manifest.json 文件內容以下：

{
  "name": "vue-ionic-pwa",
  "short_name": "vue-ionic-pwa",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

manifest.json中主要包含app的基本信息，好比名稱（name）、圖標（icons）、顯示方式（display）等等，是web app能被以相似原生的方式安裝、展現的必要配置。更多的配置項可參考 MDN Web App Manifest。

在Chrome瀏覽器控制檯中也可看到app的manifest配置：

manifest

registerServiceWorker.js用於註冊service worker。service worker通俗來說就是在瀏覽器後臺獨立於網頁運行的一段腳本，service worker能夠完成一些特殊的功能，好比：消息推送、後臺同步、攔截和處理網絡請求、管理網絡緩存等。Service worker之於pwa的意義在於可以爲用戶提供離線體驗，即掉線狀態下用戶依舊可以訪問網站並獲取已被緩存的數據。使用service worker須要HTTPS，而且考慮 瀏覽器兼容性。

registerServiceWorker.js

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

在Chrome瀏覽器控制檯中也可看到service worker的狀態：

service worker

固然，只註冊service worker還不夠，咱們還但願控制service worker的行爲，經過在 vue.config.js 中增長相關的配置咱們能夠設置service worker文件的名稱、緩存邏輯等等。

vue.config.js

module.exports = {
  pwa: {
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      navigateFallback: '/index.html', 
      runtimeCaching: [
        {
          urlPattern: new RegExp('^https://api.zippopotam.us/us/'),
          handler: 'networkFirst',
          options: {
            networkTimeoutSeconds: 20,
            cacheName: 'api-cache',
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
    }
  }
}

更多配置請參考：@vue/cli-plugin-pwa 和 workbox-webpack-plugin。因爲@vue/cli-plugin-pwa生成的service worker只在生產環境生效，因此建議將項目build以後部署到生產環境測試。本文示例使用 github pages進行部署和展現。

到此，將普通web app轉成PWA的工做基本完成，咱們部署到線上看下效果：

文件已被緩存用於離線訪問：

app

查詢一個郵編試試，能夠發現請求被緩存了下來：

api cache

咱們接着關掉網絡，再查詢剛剛的那個郵編，發如今網絡請求失敗以後當即切換用本地緩存的數據：

offline

好了，一個簡單的PWA就已經制做完成了。固然PWA的功能遠不止本文所展現的，好比推送、安裝到手機，後續有機會再跟你們分享，謝謝🙏。

最後，推薦你們使用 Fundebug，一款很好用的BUG監控工具~

本文demo地址：https://github.com/MudOnTire/...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程