翻译：使用Vue JS，Webpack&Material Design开发渐进式web应用(PWA)[Part 1]

title: 使用Vue JS，Webpack&Material Design开发渐进式web应用(PWA)[Part 1]
date: 2018-01-03 21:30
tags: [前端,PWA]
categories: 技术

• 你可以使用任何你喜欢的框架进行开发

• 编写一次代码就可以让它跨平台、跨设备运行：因为它是由用户的浏览器来运行的

• 易于传播：它不需要通过应用商店来下载

• Safari并不支持PWA的一些基本特性，如Service Workers，但看起来Apple已经开始着手去实现它了。

• 一些原生的方法仍然不被支持，你可以在What web can do看到更多信息。

教程目标

• [Part 1] 使用VueJS、Webpack和Material DesignLite创建一个单页应用

• [Part 2]使用Vue-Resource和VueFire连接App和远程API

• [Part 3] 使用Service Workers实现离线模式

• [Part 4] 访问设备相机进行拍照

• [Part 5] 访问设备存储实现图片上传

• [Part 6] 实现消息推送

• [Part 7] 获取设备位置

这款PWA的用到的基本组件(工具)

• VueJS 2 视图层：使用Material Design作为UI框架

• Vue-Router：单页应用的前端路由工具

• Vue-Resource&Vuefire：处理和数据库Firebase之间的通信

• Service Workers：实现离线模式和数据更新

• Webpack&Vue-loader：构建这款应用的工具，提供诸如热重载、ES2016和预处理器等支持。

[PART 1] 使用VueJS、Webpack和Material DesignLite创建一个单页应用

构建一个最基本的VueJS APP

npm install -g vue-cli

vue init pwa cropchat

? Project name cropchat
? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) cropchat
? Project description A cat pictures messaging application
? Author Charles BOCHET <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "cropchat".

• build：包含webpack和vue-loader的配置文件

• config：包含该app的配置(environments,parameters...)

• src：应用的源码所在

• static：像图片啊css文件还有别的静态文件都丢这里面

• test：通过Karma & Mocha创建的单元测试文件

cd cropchat
npm install
npm run dev

Manifest.json: 让你的应用可安装

{
  "name": "cropchat",
  "short_name": "cropchat",
  "icons": [
    {
      "src": "/static/img/icons/cropchat-icon-64x64.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/cropchat-icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/cropchat-icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/cropchat-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#2196f3",
  "theme_color": "#2196f3"
}

• app names；

• app icons，设置该图标使之作为桌面和启动页图标(你可以找到Cropchat官方图标在这个仓库);

• start url

• display和orientation，display主要控制页面的显示方式，是否要隐藏浏览器UI或全屏或像正常网页一般；orientation主要控制页面的初始方向；

• background和theme colors

<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">

<meta name="viewport" content="width=device-width, initial-scale=1">

处理视图页面和路由

• Home View：以列表的形式显示猫咪图片

• Detail View：显示特定猫咪图片的具体信息(通过首页点击图片进入)

• Post View：用户可以在该页面发表新的图片

<template>
  <ul class="list">
  </ul>
</template>
<script>
export default {
}
</script>
<style scoped>
  .list {
    width: 100%;
    padding: 0;
  }
</style>

<template>
  <div class="card-image">
  </div>
</template>
<script>
  export default {
  }
</script>
<style scoped>
</style>

<template>
  <div class="waiting">
    Not yet available
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
  .waiting {
    padding: 10px;
    color: #555;
  }
</style>

import Vue from 'vue'
import Router from 'vue-router'
import HomeView from '@/components/HomeView'
import DetailView from '@/components/DetailView'
import PostView from '@/components/PostView'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/detail/:id',
      name: 'detail',
      component: DetailView
    },
    {
      path: '/post',
      name: 'post',
      component: PostView
    }
  ]
})

安装Material Design Lite

npm install material-design-lite --save

<script>
  require('material-design-lite')
  ...
</script>
<style>
  @import url('<https://fonts.googleapis.com/icon?family=Material+Icons>');
  @import url('<https://code.getmdl.io/1.2.1/material.blue-red.min.css>');
</style>

为单页应用增加一个导航

<template>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">CropChat</span>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">CropChat</span>
      <nav class="mdl-navigation">
        <router-link class="mdl-navigation__link" to="/" @click.native="hideMenu">Home</router-link>
        <router-link class="mdl-navigation__link" to="/post" @click.native="hideMenu">Post a picture</router-link>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
...
export default {
  name: 'app',
  methods: {
    hideMenu: function () {
      document.getElementsByClassName('mdl-layout__drawer')[0].classList.remove('is-visible')
      document.getElementsByClassName('mdl-layout__obfuscator')[0].classList.remove('is-visible')
    }
  }
}
</script>

丰富视图并让应用跑起来

export default {
  pictures: [
    {
      'id': 0,
      'url': '<https://25.media.tumblr.com/tumblr_m40h4ksiUa1qbyxr0o1_400.gif>',
      'comment': 'A cat game',
      'info': 'Posted by Kevin on Friday'
    },
    {
      'id': 1,
      'url': '<https://25.media.tumblr.com/tumblr_lhd7n9Qec01qgnva2o1_500.jpg>',
      'comment': 'Tatoo & cat',
      'info': 'Posted by Charles on Tuesday'
    },
    {
      'id': 2,
      'url': '<https://24.media.tumblr.com/tumblr_m4j2atctRm1qejbiro1_1280.jpg>',
      'comment': 'Santa cat',
      'info': 'Posted by Richard on Monday'
    },
    {
      'id': 3,
      'url': '<https://25.media.tumblr.com/tumblr_m3rmbwhVB51qhwmnpo1_1280.jpg>',
      'comment': 'Mexico cat',
      'info': 'Posted by Richard on Monday'
    },
    {
      'id': 4,
      'url': '<https://24.media.tumblr.com/tumblr_mceknxs4Lo1qd477zo1_500.jpg>',
      'comment': 'Curious cat',
      'info': 'Posted by Richard on Monday'
    }
  ]
}

<script>
  import data from '../data'
  export default {
    methods: {
      displayDetails (id) {
        this.$router.push({name: 'detail', params: { id: id }})
      }
    },
    data () {
      return {
        'pictures': data.pictures
      }
    }
  }
</script>

<template>
  <div>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--3-col mdl-cell mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
        <div v-for="picture in this.pictures" class="image-card" @click="displayDetails(picture.id)">
          <div class="image-card__picture">
            <img :src="picture.url" />
          </div>
          <div class="image-card__comment mdl-card__actions">
            <span>{{ picture.comment }}</span>
          </div>
        </div>
      </div>
    </div>
    <router-link class="add-picture-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored" to="/post">
      <i class="material-icons">add</i>
    </router-link>
  </div>
</template>
...
<style scoped>
  .add-picture-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 998;
  }
  .image-card {
    position: relative;
    margin-bottom: 8px;
  }
  .image-card__picture > img {
    width:100%;
  }
  .image-card__comment {
    position: absolute;
    bottom: 0;
    height: 52px;
    padding: 16px;
    text-align: right;
    background: rgba(0, 0, 0, 0.5);
  }
  .image-card__comment > span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
</style>

<template>
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--8-col">
      <div class="picture">
        <img :src="this.pictures[$route.params.id].url" />
      </div>
      <div class="info">
        <span>{{ this.pictures[$route.params.id].info }}</span>
      </div>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">
      <div class="comment">
        <span>{{ this.pictures[$route.params.id].comment }}</span>
      </div>
      <div class="actions">
        <router-link class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" to="/post">
          ANSWER
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import data from '../data'
export default {
  data () {
    return {
      'pictures': data.pictures
    }
  }
}
</script>
<style scoped>
  .picture > img {
    color: #fff;
    width:100%;
  }
  .info {
    text-align: right;
    padding: 5px;
    color: #555;
    font-size: 10px;
  }
  .comment {
    padding: 10px;
    color: #555;
  }
  .actions {
    text-align: center;
  }
</style>

终于搞定了！