# chorme-PwaDemo

**Repository Path**: zeroone0011/chorme-PwaDemo

## Basic Information

- **Project Name**: chorme-PwaDemo
- **Description**: 浏览demo
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-23
- **Last Updated**: 2021-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### chorme-PwaDemo
#### study pwa

vue 和 渐进式应用合并。 发现 webpack 工具和 渐进式应用 配合并不怎么理想。 现在打算搭建一个demo, 实现 webpack 和 sw 的配合。

具体步骤如下：

#### 一 用 v-cli 搭建一个 vue 项目

    vue, 想必你应该很熟悉了吧，关于项目的编写，这里就不在多说了。
    
#### 二 编写 pwa 所需的的注册相关文件
    
 - app.js （注册 service-worker 的文件）
     
 - service-worker.js (sw 所需处理的事务, 如缓存等）
     
 - manifest.json (应用桌面清单的设置）
     
 - imgs (应用清单所需的图标icon)
   

#### 三 配置，文件打包输出到相应位置。
    
    多个入口 , 把编写的app.js文件打包，注入到生成的html中
```
    entry: {
        app: './src/main.js',
        registerSw: './scripts/app.js'
    },
```
```
    // 复制 pwa 所需的文件到 输出的地方
    new CopyWebpackPlugin([
        {
            from: 'imgs',
            to: 'img'
        },
        {
            from: 'manifest.json',
            to: 'manifest.json'
        }
    ])
```
    因为环境的不同，我们请求的路径也不同， sw中缓存静态资源的名字也会不同，所以我编写了两份 service-worker.js 文件，根据环境的不同， 复制不同的 service-worker.js (sw 所需处理的事务, 如缓存等）到输出目录下
    
    开发环境中， webpack.dev.conf.js 配置
```
    new CopyWebpackPlugin([ 
        {
            from: 'service-worker.js',
            to: 'sw.js'
        }
    ])
```
    生产环境中， webpack.prod.conf.js 的配置
```
    new CopyWebpackPlugin([ 
        {
            from: 'prod-service-worker.js',
            to: 'sw.js'
        }
    ])
```
    
    然后 npm run dev 成功启动
  
    npm run build  打包文件成功，放上自己的服务器， 进行访问。 这里打包的文件可以查看我的 gh-pages 分支下的目录。 因为没有服务器，所以我把文件放在 git 上的，这样通过 git 可以访问。 
    
    觉得有用的话，点个赞吧亲