当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue-cli3构建PWA离线应用

vue-cli3构建PWA离线应用

2020年07月17日  | 移动技术网IT编程  | 我要评论

vue-cli3使用PWA

1.安装pwa插件依赖

vue-cli3安装pwa插件时会安装register-service-worker依赖包,并自动生成一个registerServiceWorker.js（src文件下）文件并在main.js中添加导入.

(1)第一种方式,在vue create初始化项目时,勾选Progressive Web App (PWA) Support会自动安装pwa插件依赖

(2)第二种方式,手动安装pwa插件

vue add pwa

2.根目录下添加vue.config.js配置文件,配置pwa

module.exports = {
  pwa: {
    name: "easy-front-vue-cli3",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    // configure the workbox plugin (GenerateSW or InjectManifest)
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: "./src/service-work.js",
      importWorkboxFrom: "disabled",
      importScripts: "https://cdn.your.info/workbox-v4.3.1/workbox-sw.js"
      // ...other Workbox options...
    }
  }
};

3.在src目录下添加service-worker.js文件

// 判断workbox是否加载成功
if (workbox) {
  console.log(`Yay! Workbox is loaded 

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网