你们要的Web前沿技术PWA在这里

PWA是progress web app的缩写,是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。

history模式

  • 如果不希望看到丑陋的 # 可以使用history模式 , 其原理依赖于 history.pushState函数

    • a标签点击以后,如果没有# 必然会页面跳转发起请求
    • 使用pushState函数可以改变url 比如 /abc 而不会发起请求
    • js通过location.pathname获取该值 /abc 做页面局部的替换
  • router-view的history简单实现原理

  • router-view实现图解

自制webpack插件实现骨架屏

  • 原理分析:

    • 1: 从路由A跳到路由B慢不慢? 你敢说慢? 因为A的时候各种js已经加载好了ok
    • 2: 那到底是什么比较慢 ? A的首次加载

      • 慢会带来什么?

        • 1: 首屏白屏(量太大,渲染好久)
        • 2: 首屏卡顿(加载一半,一半卡住)
      • 解决方案:

        • 1: 客户端太慢,渲染容易卡住。。 服务端渲染好页面,客户端就加载个html完事
        • 2: 白屏也不错,但是如果能有个骨架屏,看起就爽了
  • 插件实现思路

    • 需要在vue的执行代码加载之前,先让用户看到骨架屏,带app代码执行 new Vue() 替换<div id="app"></div> 就好了
    • 决定加载什么js的是index.html,操作他的插件是html-webpack-plugin
    • 我们让自己的插件再其后操作,并根据其留下的数据入口获取数据并更改
    • 效果预览

      • html

    • 后续逻辑

    • 再来卡顿

    • 插件代码
        let MyPlugin = function (options) {
          this.template = options.template;
        }
    
        MyPlugin.prototype.apply = function (compiler) {
          // console.log(compiler);
          console.log('我们的插件被执行了');
          // 先指定自己怎么编译,根据别人的编译结果操作
          compiler.plugin('compilation', compilation => {
                  // 别人编译的入口
                  compilation.plugin('html-webpack-plugin-before-html-processing',(htmlData,callback) => {
                      // html-webpack-plugin中间插入行为的地方
                      htmlData.html = htmlData.html.replace(`<div id="app"/>`,`
                        <div id="app">
                          <div style="background-color:red;height:300px;display:none;" id="default">
                              我是默认的骨架屏
                          </div>
                          <div style="background-color:red;height:300px;display:none;" id="user">
                              我是user的骨架屏
                          </div>
                          <div style="background-color:red;height:300px;display:none;" id="login">
                              我是login的骨架屏
                          </div>
                        </div>
                        <script>
                              var hash = window.location.hash;
                              var path = window.location.pathname;
                              if (path === '/login' || hash === '#/login') {
                                document.getElementById('login').style.display = 'block';
                              } else if (path === '/user' || hash === '#/user') {
                                document.getElementById('user').style.display = 'block';
                              }
                        </script>
                        `);
                      // 不论如何两个参数,错误在前
                      callback(null,htmlData);
    
                  });
    
          });
        }
        module.exports = MyPlugin;
    • 使用插件

    多页应用

    • 核心思想: 其实就是两个vue项目,一次webpack打包,关联用url联系

      • webpack操作:

          1. 多个入口 { main1:'./usermain.js',main2:'./goodsmain.js' }
          2. 多个html插件
    • 注意事项

    • getHtmls的思路

      • 更为灵活的读取各项目下的js文件(入口) entry:{‘js文件名’:'js文件路径' }
      • 更为灵活的读取各项目下的html文件(首页.html) plugins:[].concat( [ new HtmlWebpackPlugin(),new HtmlWebpackPlugin() ] )

        • filename属性是生成的相对dist的文件名 xxx.html
        • template 模板生成的参照物 需要绝对路径||相对路径 './xxx.html'
        • chunks:[filename] 指定第三引入的js文件名称
          • 这个[name]其实就是entry的key

    使用CachesAPI获取指定缓存的内容

    • caches.open('key').then(function(cachedRequests) { 
          cachedRequests.match('appshell').then(r => r.text() ).then(console.log);
        });

    DB比较

    PWA (渐进式/Web/application)

    • 慢慢收服你
    • 离线浏览web应用,生成桌面应用,顶部通知(页面都可以不存在),预缓存(在你页面没有启动以前,请求资源保存到浏览器)(真正访问的时候,非常快,请求本地),骨架屏,App shell(利用缓存机制保存css+html+js等等), 分享,全屏图标
    • chrome推出PWA
    • 手机端 chrome 55以上才支持这些所有

      • IOS safari 考虑支持
    • 英文看支持率 caniuse 中文就是lavas官网可以看到

    补充啊。。补充webpack插件自己操作文件

        // 向dist下写入文件,当然也可以通过
          // compilation.assets['./tjx.txt'].source() 获取文件内容
      compilation.assets['./tjx.txt'] = {
        size:function () {
            return 'abc'.length;
        },
        source:function () {
          return 'abc'
        }
      }
    

    原文链接:segmentfault.com

    上一篇:@bunchtogether/braid-server
    下一篇:前端监控进阶篇 ——Sentry 监控 Next.js 项目实践

    相关推荐

    • 记录一次基于vue、typescript、pwa的项目由开发到部署

      前言 最近秋招之余空出时间来按自己的兴趣动手做了一个项目,一个基于vue,typescript,pwa的实验浏览移动端webapp,现在趁热打铁,将这个项目从开发到部署整个过程记录下来,并将从这个项目...

      2 年前
    • 构建一个简单的新闻客户端PWA应用

      开始 这是一个纯练手的小项目,旨在练习使用PWA(Progressive Web Apps)相关技术构建一个网络应用。 项目地址:https://github.com/bjw1234/ne... 预览...

      2 年前
    • 教你从零开发和部署一款移动端pwa应用

      前言 最近秋招之余空出时间来按自己的兴趣动手做了一个项目,一个基于vue-cli3.0, vue,typescript的移动端pwa,现在趁热打铁,将这个项目从开发到部署整个过程记录下来,并将从这个项...

      2 年前
    • 我们可以在 mac 的 safari 上体验 PWA 了

      2017 年 7 月 14 日,Apple 的 Safari 团队开始 Service Worker 的开发。经过 5 个月的努力,Apple 在 Safari Technology Preview ...

      3 年前
    • 如何在vue项目中使用PWA

      pwa ? 这是什么? 第一次听到pwa的时候是隔壁桌的大佬在交流前端的时候说的“这是前端目前很火的技术,用户体验很好,简单方便 ... ...”。听起来就很想试一试,在大佬的帮助下完成了自己人生的第...

      9 个月前
    • 前端应该知晓的PWA

      一、传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别。 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间...

      2 年前
    • 写个即时聊天应用(React相关、PWA、Socket.io、Node(Koa2, TS)、MySQL)

      前文: 之前写的个人项目,分享一下,希望对有需要的人有帮助😄 除了各种聊天功能,还支持github授权登录,和展示github用户公开的信息,然后可以方便地在ghChat中为自己的github项目...

      1 年前
    • 关于PWA,你需要注意这9点

      作者|Maximiliano Firtman译者|无明编辑|覃云 渐进式 Web 应用程序(PWA)是响应式网页设计的一个新领域,而且越来越流行。PWA 最开始出现在 Android 的 Chrome...

      2 年前
    • 借助 workbox 将网站升级成 PWA

      PWA(Progressive Web Apps)是谷歌近几年一直在推进的 web 应用新模型。PWA 借助 Service Worker 缓存网站的静态资源,甚至是网络请求,使网站在离线时也能访问。

      2 年前
    • 使用Docker创建Ionic2 PWA开发环境 1

      我想创建一个简单的渐进式Web应用程序(PWA),在移动设备上运行,接收用户数据并将其保存到后台。 我选择了Ionic 2(忽略了它创建本地应用程序的能力),因为它基于Angular 2。

      3 年前

    官方社区

    扫码加入 JavaScript 社区