pwa+webpack,初探与踩坑0.前言1.webpack2.pwa3.基于webpack的pwa

0.前言

我们都知道pwa是一个新技术.,依靠缓存,离线了还能正常跑,而且秒开。我把以前原生写的小游戏迁移到react,再迁移到webpack+react,最后再升级到pwa。具体介绍不多说,我们开始撸吧。

1.webpack

webpack攻略有很多,不啰嗦了,简单介绍一些重点。记住几个点:入口entry、出口output、插件plugins、模块加载器loader。接下来你一个完整的项目的相关操作至少要包含这些。

还有一个就是path模块,专门读取路径的,做一切的配置前,首先把路径搞好吧:

//一般我们就是这样子做的
var path = require("path");
var ROOT_PATH = path.resolve(__dirname);//当前主入口目录
var SRC_PATH = path.resolve(ROOT_PATH,"src");//src,你写的代码在这里
var DIST_PATH = path.resolve(ROOT_PATH,"dist");//打包结果
var COMP_PATH = path.resolve(SRC_PATH,"component");//vue、react都有的component

//然后我们的配置里面
var config = {
    mode:'development',
    entry: path.resolve(__dirname, './src/index.js'),//webpack把主入口html变成js,然后注入html
    output:{
        path:DIST_PATH,
        filename:"bundle.js"
    },
}
复制代码

模块加载器,一般我们不用预处理器的话,继续在config里面添加配置,这样子就基本满足需求

    module:{
        rules:[
            {
                test:/\.(es6|js)$/,//考虑到es6
                use:[
                    {
                        loader:"babel-loader",
                    }
                ],
                exclude:/node_modules/   //不把nodemodules考虑进去
            },
            {
                test:/\.(css)$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader"
                    }
                ],
                exclude:/node_modules/
            },
            {
                test:/\.(png|jpeg|jpg|gif)$/,
                use:[
                    {
                        loader:"url-loader",
                    }
                ],
                exclude:/node_modules/
            }
        ]
    }
复制代码

对于插件,我们一般就用htmlWebpackPlugin和热更新就差不多了

    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
             title: 'game',
             template: path.resolve(__dirname, './index.html'),
             //bunld.js会注入里面
             inject: true
        }),
        new OfflinePlugin() //这是pwa用的,等下讲到
    ]
复制代码

还有一个服务器:

var server = new WebpackDevServer(webpack(config), {
    contentBase: path.resolve(__dirname, './dist'), //默认会以根文件夹提供本地服务器,这里指定文件夹
    historyApiFallback: true, //这是history路由,如果设置为true,所有的跳转将指向index.html
    port: 9090, //默认8080
    publicPath: "/", //本地服务器所加载的页面所在的目录
    hot: true, //热更新
    inline: true, //实时刷新
    historyApiFallback: true //不跳转
});
server.listen(9090, 'localhost', function (err) {
    if (err) throw err
})
复制代码

哦,对了,列举一下require清单和package.json:

var webpack = require("webpack");
var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
var webpackDelPlugin = require("webpack-del-plugin");
var WebpackDevServer = require('webpack-dev-server');
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH,"src");
var DIST_PATH = path.resolve(ROOT_PATH,"dist");
var TEM_PATH = path.resolve(SRC_PATH,"component");
var  OfflinePlugin = require('offline-plugin')


//package.json
{
  "name": "pwawebpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.3.1",
    "react-scripts": "1.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "offline-plugin": "^5.0.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-del-plugin": "0.0.2",
    "webpack-dev-server": "^3.1.4",
    "webpack-notifier": "^1.6.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config webpack.config.js"
  }
}
复制代码

为了快点看到pwa+webpack的效果,那我们eslint、test就不写了

2.pwa

我们就拿百度到的那些例子说吧,一个正常的pwa,由index.html、一个css、一个manifest.json、一个sw.js。我们要启动一个pwa,这是必备的。 其实,是不是看起来有点像谷歌浏览器的扩展?有没有试过自己写谷歌浏览器插件,比如屏蔽广告的、个人工具的、某些网站收藏夹等等插件。毕竟一家人,所以看起来也有点像。

html:

<head>
  <title>PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1>1</h1>
</body>
复制代码

manifest.json:其实和自己写的浏览器扩展差不多,就是一些关于名字、样式、logo的配置

{
  "name": "PWA",
  "short_name": "p",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#0000ff",
  "background_color": "#00ff00",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}
复制代码

sw具体介绍 点这里 生命周期的话,也不多说了,几个阶段:解析Parsed、安装Installed、激活Activated,中间失败的话直接跳到废弃Redundant阶段,然后我们监听这些事件,我们直接看效果。

var cacheStorageKey = 'v1'

var cacheList = [
  '/',
  "index.html",
  "main.css",
  "logo.png"
]

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheStorageKey)
    .then(cache => cache.addAll(cacheList))
    .then(() => self.skipWaiting())
  )
})

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      if (response != null) {
        return response
      }
      return fetch(e.request.url)
    })
  )
})

self.addEventListener('activate', function(e) {
  e.waitUntil(
    Promise.all(
      caches.keys().then(cacheNames => {
        return cacheNames.filter(name => 
          name !== cacheStorageKey
        ).map(name=>caches.delete(name))
      })
    ).then(() => {
      return self.clients.claim()
    })
  )
})
复制代码

注意了,pwa需要https或者localhost,因为这东西能把你本地的文件都拉取了,那也有可能干其他事情,所以必须是要在安全的情况下跑的。还有,是不是发现改了html、js文件,清空缓存都不更新呢?其实改一下sw就可以了,manifest做应用缓存也是,改个版本号,或者加个空格就行。

3.基于webpack的pwa

文档见官网

我们不用配置就可以跑起来,但是配置里面有些地方需要注意的而且不能乱改,自行看文档。配置常用的是:caches(默认全部缓存,也可以自己设置),externals(数组形式,表示其他资源如cdn),excludes(数组形式,除了哪些不能被缓存),autoUpdate(多久后更新,默认一小时)

我们使用offline-plugin这个插件,只需要在插件里面直接引入即可:

 plugins: [
    // ... 其他插件
    new OfflinePlugin()
  ]
复制代码

接着在我们的入口文件index.js加入:

import * as OfflinePluginRuntime from 'offline-plugin/runtime';
OfflinePluginRuntime.install();
复制代码

这样子直接跑webpack就ok了,试一下谷歌浏览器offline模式,你会发现还是能跑:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后端技术探索

几种web并行化编程实现

当网站做到一定规模的时候,web单个页面需要涉及到的业务也会越来越多,每个页面可能会向后端发起几个、十几个甚至几十个请求。对于java、python之类的支持多...

14730
来自专栏狮乐园

高级 Angular 组件模式 (3a)

针对第一个问题,我们使用@ContentChildren装饰器(因为它获取所有的子组件引用),但是它无法解决第二个问题。

10940
来自专栏互联网杂技

当你在浏览器中输入Google.com并且按下回车之后发生了什么?

回车键按下 为了从头开始,我们选择键盘上的回车键被按到最低处作为起点。在这个时刻,一个专用于回车键的电流回路被直接或者通过电容器闭合了,使得少量的电流进入了键盘...

376130
来自专栏Python爬虫与算法进阶

【Python爬虫实战】——爬取今日头条美女图片

笔者是头条的深度使用者,经常用头条完成“看片”大业。若不信的话可以试试在头条搜索街拍,返回的都是一道道靓丽的风景线。 ? 想把图片存下来,该怎么办呢?我们可以用...

2.1K100
来自专栏ChaMd5安全团队

第二届强网杯 web方向部分writeup

Web签到 题目信息: Flag: QWB{s1gns1gns1gnaftermd5} 提示: http://39.107.33.96:10000 查看源码发现...

37370
来自专栏python小白到大牛

学习Python一个星期用Scrapy爬取天气预报实践一番

写一个真正意义上一个爬虫,并将他爬取到的数据分别保存到txt、json、已经存在的mysql数据库中。

20520
来自专栏林德熙的博客

win10 UWP RSS阅读器

于是在网上查了RSS,�RSS简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。RSS(Really Simpl...

14910
来自专栏Golang语言社区

Go语言TCP Socket编程--2

在Server端我们通过Conn的SetReadDeadline方法设置了10微秒的读超时时间,Server的执行结果如下: $go run server4.g...

1.2K110
来自专栏猿人谷

使用bash编写Linux shell脚本--调试和版本控制

当我还在布鲁克大学上学的时候, Macquarium 实验室中充满了苹果公司的 Macintosh Plus 电脑。一天,我在为第三年的操作系统课程准备一个程序...

512110
来自专栏圣杰的专栏

ABP入门系列(13)——Redis缓存用起来

源码路径:Github-LearningMpaAbp 1. 引言 创建任务时我们需要指定分配给谁,Demo中我们使用一个下拉列表用来显示当前系统的所有用户,以...

44990

扫码关注云+社区

领取腾讯云代金券