【PWA】将已有的vue项目改造成PWA

下载相关库npm install sw-precache-webpack-plugin --save修改build/webpack.prod.conf.js文件添加如下内容...const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')......plugins: [...// servi

Immok

12642人浏览 · 2018-02-23 15:33:43

Immok · 2018-02-23 15:33:43 发布

下载相关库

npm install sw-precache-webpack-plugin --save

修改build/webpack.prod.conf.js文件

添加如下内容

...
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
...

...
plugins: [
    ...

    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'my-vue-app',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/'
    })
  ]
...

添加manifest.json文件

icon路径自己设置

{
    "scope": "/",
    "name": "运维平台",
    "short_name": "运维平台",
    "start_url": "/?from=homescreen",
    "display": "standalone",
    "description": "Gomo运维平台",
    "orientation": "portrait",
    "theme_color": "#3f51b5",
    "background_color": "#fff",
    "icons": [{
      "src": "./science.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./screen144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
    ]
}

修改index.html

添加如下内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>gagle-admin</title>

        <!-- 添加manifest文件 -->
        <link rel="manifest" href="/static/manifest.json">
    </head>
    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
    <body>
        <!-- 注册service-worker.js -->
        <%= htmlWebpackPlugin.options.serviceWorkerLoader %>

        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

编译项目

npm run build:prod
将dist文件夹部署到nginx或caddy服务器中

访问：chrome://flags/#enable-app-banners
选择：enable APP Banner
重启浏览器

将web App添加到桌面

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^