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

下载相关库

  • 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

  • 添加如下内容

<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-admintitle>

        
        <link rel="manifest" href="/static/manifest.json">
    head>
    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js>script>
    <body>
        
        <%= htmlWebpackPlugin.options.serviceWorkerLoader %>

        <div id="app">div>
        
    body>
html>

编译项目

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

打开Chrome浏览器的APP Banner功能

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

将web App添加到桌面

【PWA】将已有的vue项目改造成PWA_第1张图片

【PWA】将已有的vue项目改造成PWA_第2张图片

【PWA】将已有的vue项目改造成PWA_第3张图片

你可能感兴趣的:(Web,web技术实验室)