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

最新推荐文章于 2024-07-30 08:45:00 发布

Immok

最新推荐文章于 2024-07-30 08:45:00 发布

阅读量1.2w

点赞数 2

分类专栏： Web web技术实验室

本文链接：https://blog.csdn.net/ns2250225/article/details/79353946

版权

Web 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

web技术实验室

26 篇文章 1 订阅

订阅专栏

下载相关库

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>