Vue项目PWA化

>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → Vue项目PWA化

您是本文章第 15315 个阅读者

* 贴子主题: Vue项目PWA化

点赞(0) 收藏

作者:javathinker 发表时间：2021-04-21 08:34:42

消息

查看

搜索

好友

复制

引用

此文主要针对是由vue构建的项目基础上进行PWA化。

PWA化主要解决了两大问题： 1）使web app有沉浸式体验，也就是更靠近原生体验。如：去掉浏览器的地址栏和底部工具栏；在桌面上生成图标，方便再次进入。 2）提供独立于浏览器的缓存，并且可以接收服务器的推送。如：在没有网络，或者网络状态较差的时候，仍可访问缓存在本地的数据.

步骤:

1. 通过vue-cli脚手架进行安装pwa插件

vue add pwa

此时会生成manifest.json和registerServiceWorker.js两个文件。

2. 配置manifest.json文件.(manifest.json文件主要是配置图标，app名称，显示方式等)参考MDN手册

{
    "name": "wc--movies",// 导航显示的名字
    "short_name": "wc", // app的名字
    "start_url": ".",
    "icon": [
      {
        // app图标，会根据不一样的系统进行适配
        "src": "/public/img/icons/android-chrome-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    },
    {
        "src": "/public/img/icons/android-chrome-192x192.png",
        // 大小
        "sizes": "192x192",
        // 格式
        "type": "image/png"
    }],
    //导航界面的背景颜色
    "background_color": "white",
    //手机最上方显示运营商及电量、时间等这一栏的颜色
    "theme_color": "white",
    //页面显示效果为没有地址栏和底部状态栏
    "display": "standalone"
}

3. 在index.html中引入manifest.json

4. registerServiceWorker.js文件(registerServiceWorker.js主要是注册Service Worker。SW可以用于消息推送，缓存管理、后台同步、拦截和处理网络请求等。注意：使用SW需要https及浏览器兼容)

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.
' +
       '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)
   }
})
}

5)配置vue.config.js文件,控制Service Worker行为。设置缓存逻辑、文件名字等。参考@vue/cli-plugin-pwa及workbox参考

pwa: {
    workboxPluginMode: 'GenerateSW', // 也可以定义为‘InjectManifest’模式。但是需自己写SW.js文件进行配置
    workboxOptions: {
        importWorkboxFrom: 'cdn', //从''cdn"导入workbox,也可以‘local’
        skipWaiting: true, // 安装完SW不等待直接接管网站
        clientsClaim: true,
        navigateFallback: '/index.html',
        exclude: [/\.(?:png|jpg|jpeg|svg)$/], //在预缓存中排除图片
        // 定义运行时缓存
        runtimeCaching: [
            {
                urlPattern: new RegExp('^https://cdn'),
                handler: 'NetworkFirst',
                options: {
                    networkTimeoutSeconds: 20,
                    cacheName: 'cdn-cache',
                    cacheableResponse: {
                        statuses: [200]
                    }
                }
            }
        ]
    }
}

注意：苹果的safari,如果仅是上边那样设置可能还并不能兼容，但其支持通过meta/link进行设置。可设置如下：

// app名称

<meta name="apple-mobile-web-app-title" content="WCmovies">

// 是否隐藏地址栏等

<meta name="apple-mobile-web-app-capable" content="yes">

// 修改状态栏颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black">

// 指定桌面icon

<link rel="apple-touch-icon" href="./favicon.ico">