精华内容
下载资源
问答
  • 主要介绍了PWA介绍及快速上手搭建一个PWA应用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • PWA应用

    万次阅读 2018-09-30 11:45:32
    一、什么是PWA应用 一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。 官网:https://developers.google.com/web/progressive-web-apps/ 是 Google 在 2015 年提出,2016...

    一、什么是PWA应用

    一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。
    官网:https://developers.google.com/web/progressive-web-apps/
    是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。官网上给出 PWA 的宣传是 : Reliable ( 可靠的 )、Fast( 快速的 )、Engaging( 可参与的 )
    Reliable :当用户从手机主屏幕启动时,不用考虑网络的状态是如何,都可以立刻加载出 PWA。
    Fast:这一点应该都很熟悉了吧,站在用户的角度来考虑,如果一个网页加载速度有点长的话,那么我们会放弃浏览该网站,所以 PWA 在这一点上做的很好,他的加载速度是很快的。
    Engaging : PWA 可以添加在用户的主屏幕上,不用从应用商店进行下载,他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验( 在 Android 上可以设置全屏显示哦,由于 Safari 支持度的问题,所以在 IOS 上并不可以 ),并且还能进行 ”推送通知” 
    

    二、PWA应用于原生APP对比优缺点

    1. 理论上看,只要 Service Worker 能获得的系统 API,PWA 应用都可以实现原生应用的所有功能
    2. PWA 首次加载依然是个大问题吧。如果首次需要缓存的内容越来越大,假如超过 10M 以上,这还叫 PWA 吗?
    3. 不考虑首次加载的情况,PWA 应用的性能和原生应用的差距,就是 js 和原生开发语言的差别了吗?3.不考虑首次加载的情况,PWA 应用的性能和原生应用的差距,就是 js 和原生开发语言的差别了吗?
    4. PWA 通过 Service Worker 目前看好像是不需要用户同意的吧?4.PWA 通过 Service Worker 目前看好像是不需要用户同意的吧?
    5. 假如以上 1/2/3 点都不是问题,PWA 解决了原生应用分发渠道的限制了,大量 native 开发者又要转 web 去了吗?
      三、PWA应用
      PWA关键技术
      Service Worker (可以理解为服务工厂)
      Manifest (应用清单)
      Push Notification(推送通知)
      Service Worker
      以下用SW来表示
      SW 是什么呢?这个是离线缓存文件。我们 PWA 技术使用的就是它!SW 是浏览器在后台独立于网页运行的脚本,它打开了通向不需要网页或用户交互的功能的大门,因为使用了它,才会有的那个 Reliable 特性吧,SW 作用于 浏览器于服务器之间,相当于一个代理服务器。
      **顺便带一句:**目前只能在 HTTPS 环境下才能使用SW,因为SW 的权利比较大,能够直接截取和返回用户的请求,所以要考虑一下安全性问题。
      功能(还是比较逆天的)
        后台数据的同步
        从其他域获取资源请求
        接受计算密集型数据的更新,多页面共享该数据
        客户端编译与依赖管理
        后端服务的hook机制
        根据URL模式,自定义模板
        性能优化
        消息推送
        定时默认更新
        地理围栏
    

    四、PWA实例
    准备

    我们先创建一个关于 PWA 的项目文件夹,
    进入文件夹下我们准备一张 120x120的图片一张,作为我们的应用程序图标。
    创建一个 index.html 文件
    创建一个 main.css 文件
    创建一个 manifest.json 文件
    创建一个 sw.js 文件
    

    在这里插入图片描述
    index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Hello PWA</title>
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <link rel="stylesheet" href="main.css">
      <link rel="manifest" href="manifest.json">
    </head>
    <body>
      <h3>Hello PWA</h3>
    </body>
    <script>
      // 检测浏览器是否支持SW
      if(navigator.serviceWorker != null){
        navigator.serviceWorker.register('sw.js')
        .then(function(registartion){
          console.log('支持sw:',registartion.scope)
        })
      }
    </script>
    </html>
    

    main.css:

    #utf-8
    h3{
      color: #f00;
    }
    

    manifest.json:

    short_name: “ " 用户主屏幕上的应用名字
    display : “standalone" 设置启动样式,让您的网络应用隐藏浏览器的 URL 地址栏
    start_url : “/“ 设置启动网址,如果不提供的话,默认是使用当前页面
    theme_color : “ “ 用来告知浏览器用什么颜色来为地址栏等 UI 元素着色
    background_color: “ ” 设置启动页面的背景颜色
    icons:”” 就是添加到主屏幕之后的图标
    
    {
      "name": "一个PWA示例",
      "short_name": "PWA示例",
      "start_url": "/index.html",
      "display": "standalone",
      "background_color": "#fff",
      "theme_color": "#3eaf7c",
      "icons": [
        {
          "src": "/youhun.jpg",
          "sizes": "120x120",
          "type": "image/png"
        }
      ],
    }
    

    sw.js:
    看网上很多人都安装的hs和ngrok去调试,在这里为了照顾新手我是直接引用的sw
    处理静态缓存,首先定义需要缓存的路径,以及需要缓存的静态文件的列表。
    借助 SW 注册完成安装 SW 时,抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ,为了在页面更新的过程当中,新的 SW 脚本能够立刻激活和生效。

    importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");
    var cacheStorageKey = 'minimal-pwa-1'
    var cacheList=[
      '/',
      'index.html',
      'main.css',
      'youhun.jpg'
    ]
    self.addEventListener('install',e =>{
      e.waitUntil(
        caches.open(cacheStorageKey)
        .then(cache => cache.addAll(cacheList))
        .then(() => self.skipWaiting())
      )
    })
    

    处理动态缓存,我们监听 fetch 事件,在 caches 中去 match 事件的 request ,如果 response 不为空的话就返回 response ,最后返回 fetch 请求,在 fetch 事件中我们可以手动生成 response 返回给页面。
    更新静态资源,缓存的资源会跟随着版本的更新会过期的,所以会根据缓存的字符串名称清除旧缓存。在新安装的 SW 中通过调用 self.clients.claim( ) 取得页面的控制权,这样之后打开页面都会使用版本更新的缓存。旧的 SW 脚本不在控制着页面之后会被停止,也就是会进入 Redundant 期。

    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(
        //获取所有cache名称
        caches.keys().then(cacheNames => {
          return Promise.all(
            // 获取所有不同于当前版本名称cache下的内容
            cacheNames.filter(cacheNames => {
              return cacheNames !== cacheStorageKey
            }).map(cacheNames => {
              return caches.delete(cacheNames)
            })
          )
        }).then(() => {
          return self.clients.claim()
        })
      )
    })
    

    部署
    我们可以把当前pwa目录的所有内容都扔进服务器中,或者coding Pages和gitHub Pages也是可以的,当然,记得开启https。在上边介绍过SW的权利比较大,为了安全性,我们使用https协议来访问。
    试着访问一下,我们这里用的coding Pages并且绑定了自己的域名
    打开 chrom 的调试工具,打开 application ,点击 service workers 之后我们会发现 sw.js 脚本已经存到了 SW 中 。
    在这里插入图片描述
    我们打开 Network 刷新页面一下,看看,我们的页面资源来自 SW 而不是其他的地方,在 Console 中也打印出了我们在 index.html 中判断的语句,浏览器支持就会打印出这一句话。

    在这里插入图片描述接下来我们断网操作,在 Application 中给 Offline 打上对勾就行啦。然后刷新页面,我们仍然能看到之前的页面,原因就是我们在上图看到,他的资源是从 SW 上获得到的。当我们第一次打开这个页面的时候,Resopnse 对象被存到了 Cache Storage ( 定义在 SW 规范中 ,相关资料请同学们自行查询啦 )中,我们看下图:
    在这里插入图片描述
    通过存放到 Cache Storage 中,我们下次访问的时候如果是弱网或者断网的情况下,就可以不走网络请求,而直接就能将本地缓存的内容展示给用户,优化用户的弱网及断网体验。
    这个时候肯定会有同学在想,如果内容更新了,那么页面展示的内容是新内容呢还是旧内容呢?下面我们操作一下,打开 index.html 文件,我们在 body 中添加一个 p 标签 ,然后回到页面刷新。
    在这里插入图片描述
    在这里插入图片描述
    我们看到,页面上的内容并没有显示出我刚刚添加的那个 p 标签。这说明了,我们拿到的数据还是从 Cache Storage 中获取到的,Cache Storage中的内容并没有更新,强制刷新也不行哦,那么我们怎么才能让我刚刚添加的那个 p 标签显示出来呢。
    我们打开 sw.js 脚本文件,我们修改一下 cacheStorageKey。
    在这里插入图片描述
    修改后,我们再次打开该网址,强制刷新下或者关掉浏览器重新打开。
    页面中出现了刚刚添加的P标签,我们再看一下 Cache Storage 中的缓存名字,已经被修改。
    在这里插入图片描述
    总结
    如果是使用coding或者gitHub提供的pages服务,则需要注意最好绑定下独立域名。如果不绑定则注意下文件请求路径即可。研究PWA门槛不低,部署的服务器要求HTTPS,ServiceWorker涉及API众多,需要单独学习,另外npm中也已经有这个包了https://www.npmjs.com/package/web-pwa ,玩玩可以,真正部署到项目生产环境可能坑很多,但有坑填坑,不折腾还叫前端么。
    《参考:https://www.imooc.com/article/38838》

    展开全文
  • 一个最小的React PWA应用程序作为Github模板。 概要 它是基本(最小)库/组件/实用程序及其在CRA上的集成的结合,开发人员在制作React应用程序的过程中通常需要这些集成。 动机 我们喜欢CRA。 我们认为这是为大多数...
  • PWA介绍及快速上手搭建一个PWA应用

    千次阅读 2020-04-12 21:27:13
    PWA初次体验 ​ 前言:本示例不用安装任何...一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。 官网:https://developers.google.com/web/progressive-web-apps/ 是 ...

    PWA初次体验

    ​ 前言:本示例不用安装任何东西

    部分资源来自网络资源及PWA官网,不要把PWA想象的太复杂,跟着示例走一下,你行的。

    PWA介绍

    一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。

    官网:https://developers.google.com/web/progressive-web-apps/

    是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。

    官网上给出 PWA 的宣传是 : Reliable ( 可靠的 )、Fast( 快速的 )、Engaging( 可参与的 )

    Reliable :当用户从手机主屏幕启动时,不用考虑网络的状态是如何,都可以立刻加载出 PWA。

    Fast:这一点应该都很熟悉了吧,站在用户的角度来考虑,如果一个网页加载速度有点长的话,那么我们会放弃浏览该网站,所以 PWA 在这一点上做的很好,他的加载速度是很快的。

    Engaging : PWA 可以添加在用户的主屏幕上,不用从应用商店进行下载,他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验( 在 Android 上可以设置全屏显示哦,由于 Safari 支持度的问题,所以在 IOS 上并不可以 ),并且还能进行 ”推送通知” 。

    PWA关键技术

    • Service Worker (可以理解为服务工厂)
    • Manifest (应用清单)
    • Push Notification(推送通知)

    Service Worker

    以下用SW来表示

    SW 是什么呢?这个是离线缓存文件。我们 PWA 技术使用的就是它!SW 是浏览器在后台独立于网页运行的脚本,它打开了通向不需要网页或用户交互的功能的大门,因为使用了它,才会有的那个 Reliable 特性吧,SW 作用于 浏览器于服务器之间,相当于一个代理服务器。

    浏览器支持

    顺便带一句:目前只能在 HTTPS 环境下才能使用SW,因为SW 的权利比较大,能够直接截取和返回用户的请求,所以要考虑一下安全性问题。

    image

    事件机制

    image

    功能(还是比较逆天的)

    • 后台数据的同步
    • 从其他域获取资源请求
    • 接受计算密集型数据的更新,多页面共享该数据
    • 客户端编译与依赖管理
    • 后端服务的hook机制
    • 根据URL模式,自定义模板
    • 性能优化
    • 消息推送
    • 定时默认更新
    • 地理围栏

    生命周期

    image

    • Parsed ( 解析成功 ): 首次注册 SW 时,浏览器解决脚本并获得入口点,如果解析成功,就可以访问到 SW 注册对象,在这一点中我们需要在 HTML 页面中添加一个判断,判断该浏览器是否支持 SW 。

    • Installing ( 正在安装 ):SW 脚本解析完成之后,浏览器会尝试进行安装,installing 中 install 事件被执行,如果其中有 event.waitUntil ( ) 方法,则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功,如果 Promise 被拒绝,则安装失败,SW会进入 Redundant( 废弃 )状态。

    • Installed / Waiting (安装成功/等待中):如果安装成功,SW 将会进入这个状态。

    • Activating ( 正在激活 ):处于 waiting 状态的 SW 发生以下情况,将会进入 activating 状态中:

      当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting()方法被调用 ( ps: self 是 SW 中作用于全局的对象,这个方法根据英文翻译过来也能明白什么意思啦,跳过等待状态 )、用户已关闭 SW 作用域下的所有页面,从而释放了当前处于激活状态的 worker、超出指定时间,从而释放当前处于激活状态的 worker

    • Activated ( 激活成功 ):该状态,其成功接收了 document 全面控制的激活态 worker 。

    • Redundant ( 废弃 ):这个状态的出现时有原因的,如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看

    一个很不错的全面介绍sw的教程:https://www.villainhr.com/page/2017/01/08/Service%20Worker%20%E5%85%A8%E9%9D%A2%E8%BF%9B%E9%98%B6

    Manifest

    Web App Manifest 是一个 W3C 规范,它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有:

    ​ 能够将你浏览的网页添加到你的手机屏幕上

    ​ 在 Android 上能够全屏启动,不显示地址栏 ( 由于 Iphone 手机的浏览器是 Safari ,所以不支持哦)

    ​ 控制屏幕 横屏 / 竖屏 展示

    ​ 定义启动画面

    ​ 可以设置你的应用启动是从主屏幕启动还是从 URL 启动

    ​ 可以设置你添加屏幕上的应用程序图标、名字、图标大小

    Push Notification

    Push 和 Notification 是两个不同的功能,涉及到两个 API 。

    ​ Notification 是浏览器发出的通知消息。

    ​ Push 和 Notification 的关系,Push:服务器端将更新的信息传递给 SW ,Notification: SW 将更新的信息推送给用户。

    PWA示例

    准备

    我们先创建一个关于 PWA 的项目文件夹,

    进入文件夹下我们准备一张 120x120的图片一张,作为我们的应用程序图标。

    创建一个 index.html 文件

    创建一个 main.css 文件

    创建一个 manifest.json 文件

    创建一个 sw.js 文件

    image

    index.html

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Hello PWA</title>
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <link rel="stylesheet" href="main.css">
      <link rel="manifest" href="manifest.json">
    </head>
    <body>
      <h3>Hello PWA</h3>
    </body>
    <script>
      // 检测浏览器是否支持SW
      if(navigator.serviceWorker != null){
        navigator.serviceWorker.register('sw.js')
        .then(function(registartion){
          console.log('支持sw:',registartion.scope)
        })
      }
    </script>
    </html>
    

    main.css

     

    h3{
      color: #f00;
    }
    

    manifest.json

    short_name: “ " 用户主屏幕上的应用名字

    display : “standalone" 设置启动样式,让您的网络应用隐藏浏览器的 URL 地址栏

    start_url : “/“ 设置启动网址,如果不提供的话,默认是使用当前页面

    theme_color : “ “ 用来告知浏览器用什么颜色来为地址栏等 UI 元素着色

    background_color: “ ” 设置启动页面的背景颜色

    icons:”” 就是添加到主屏幕之后的图标

     

    {
      "name": "一个PWA示例",
      "short_name": "PWA示例",
      "start_url": "/index.html",
      "display": "standalone",
      "background_color": "#fff",
      "theme_color": "#3eaf7c",
      "icons": [
        {
          "src": "/youhun.jpg",
          "sizes": "120x120",
          "type": "image/png"
        }
      ],
    }
    
    

    sw.js

    看网上很多人都安装的hs和ngrok去调试,在这里为了照顾新手我是直接引用的sw

    处理静态缓存,首先定义需要缓存的路径,以及需要缓存的静态文件的列表。

    借助 SW 注册完成安装 SW 时,抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ,为了在页面更新的过程当中,新的 SW 脚本能够立刻激活和生效。

     

    importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");
    var cacheStorageKey = 'minimal-pwa-1'
    var cacheList=[
      '/',
      'index.html',
      'main.css',
      'youhun.jpg'
    ]
    self.addEventListener('install',e =>{
      e.waitUntil(
        caches.open(cacheStorageKey)
        .then(cache => cache.addAll(cacheList))
        .then(() => self.skipWaiting())
      )
    })
    

    处理动态缓存,我们监听 fetch 事件,在 caches 中去 match 事件的 request ,如果 response 不为空的话就返回 response ,最后返回 fetch 请求,在 fetch 事件中我们可以手动生成 response 返回给页面。

    更新静态资源,缓存的资源会跟随着版本的更新会过期的,所以会根据缓存的字符串名称清除旧缓存。在新安装的 SW 中通过调用 self.clients.claim( ) 取得页面的控制权,这样之后打开页面都会使用版本更新的缓存。旧的 SW 脚本不在控制着页面之后会被停止,也就是会进入 Redundant 期。

     

    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(
        //获取所有cache名称
        caches.keys().then(cacheNames => {
          return Promise.all(
            // 获取所有不同于当前版本名称cache下的内容
            cacheNames.filter(cacheNames => {
              return cacheNames !== cacheStorageKey
            }).map(cacheNames => {
              return caches.delete(cacheNames)
            })
          )
        }).then(() => {
          return self.clients.claim()
        })
      )
    })
    

    部署

    我们可以把当前pwa目录的所有内容都扔进服务器中,或者coding Pages和gitHub Pages也是可以的,当然,记得开启https。在上变介绍过SW的权利比较大,为了安全性,我们使用https协议来访问。

    试着访问一下,我们这里用的coding Pages并且绑定了自己的域名

    打开 chrom 的调试工具,打开 application ,点击 service workers 之后我们会发现 sw.js 脚本已经存到了 SW 中 。

    image

    我们打开 Network 刷新页面一下,看看,我们的页面资源来自 SW 而不是其他的地方,在 Console 中也打印出了我们在 index.html 中判断的语句,浏览器支持就会打印出这一句话。

    image

    接下来我们断网操作,在 Application 中给 Offline 打上对勾就行啦。然后刷新页面,我们仍然能看到之前的页面,原因就是我们在上图看到,他的资源是从 SW 上获得到的。当我们第一次打开这个页面的时候,Resopnse 对象被存到了 Cache Storage ( 定义在 SW 规范中 ,相关资料请同学们自行查询啦 )中,我们看下图:

    image

    通过存放到 Cache Storage 中,我们下次访问的时候如果是弱网或者断网的情况下,就可以不走网络请求,而直接就能将本地缓存的内容展示给用户,优化用户的弱网及断网体验。

    这个时候肯定会有同学在想,如果内容更新了,那么页面展示的内容是新内容呢还是旧内容呢?下面我们操作一下,打开 index.html 文件,我们在 body 中添加一个 p 标签 ,然后回到页面刷新。

    image

    image

    我们看到,页面上的内容并没有显示出我刚刚添加的那个 p 标签。这说明了,我们拿到的数据还是从 Cache Storage 中获取到的,Cache Storage中的内容并没有更新,强制刷新也不行哦,那么我们怎么才能让我刚刚添加的那个 p 标签显示出来呢。

    我们打开 sw.js 脚本文件,我们修改一下 cacheStorageKey。

    image

    修改后,我们再次打开该网址,强制刷新下或者关掉浏览器重新打开。

    页面中出现了刚刚添加的P标签,我们再看一下 Cache Storage 中的缓存名字,已经被修改。

    image

    总结

    如果是使用coding或者gitHub提供的pages服务,则需要注意最好绑定下独立域名。如果不绑定则注意下文件请求路径即可。

    研究PWA门槛不低,部署的服务器要求HTTPS,ServiceWorker涉及API众多,需要单独学习,另外npm中也已经有这个包了https://www.npmjs.com/package/web-pwa ,玩玩可以,真正部署到项目生产环境可能坑很多,但有坑填坑,不折腾还叫前端么。



    作者:小申同学
    链接:https://www.jianshu.com/p/fad8aa9e277f
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 本项目是基于Vue.js2.0开发的PWA网页应用,使用的基本框架有vuex、vue-router、fetch 项目使用的接口来之izzyleung整理的接口地址
  • 基于 Vue 的 PWA 解决方案,帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题
  • PWA徽章 ... 请记住,要显示徽章计数,您的PWA应用程序应安装在设备上。 可能的用例 可以使用此库的网站示例包括: 聊天,电子邮件和社交应用程序,以表示已收到新消息,或显示未读项目的数量。 生
  • bentostarter全栈开源解决方案可快速构建PWA应用程序
  • PWA概念 PWA概念演示。 使用Service Workers演示离线服务页面 :video_camera: :video_camera: 入门 :rocket: 这些说明将为您提供项目副本,并在您的本地计算机上运行以进行开发。 先决条件 :page_facing_up: ...
  • pwa-ios-splashscreens:使用Sketch应用程序为PWA应用程序创建启动屏幕
  • 将服务器端和客户端Blazor项目转换为渐进式Web应用程序(PWA)的最简单方法。 该项目在添加到您的构建过程中后,将生成所需的文件以为您的项目启用基本的PWA功能。 它会生成manifest.json,具有所有必需文件的预...
  • 此扩展程序提供了一些文件,可为您的应用程序提供一些PWA体验,例如应用程序安装,缓存的文件和脱机页面。 要求: 烧瓶 金佳 安装: 要在项目中使用Flask-PWA扩展,您需要使用pip安装它。 pip install flask-pwa...
  • PWA 应用列表及常用工具

    千次阅读 2019-04-24 15:51:14
    PWA 的过程中写了一些相关的应用和工具,在这里整合下,方便查找使用。

    引言

    在做 PWA 的过程中自己写了一些相关的应用和工具,在这里整合下,方便记录及查找使用。

    应用列表

    • PWA 支持检测工具
    • 番茄钟
    • 二维码生成
    • 新闻应用
    • 身体数据统计应用
    • 支付宝集福应用
    • 田英章书法字典应用
    • 抖音无水印下载应用
    • 很好用的备忘录
    • 精神氮泵

    PWA 支持检测工具

    地址:https://lecepin.gitee.io/detect-sw/
    二维码:

    描述:
    这个应用主要用来检测终端浏览器是否支持 ServiceWoker,及在支持的同时是否能够线程持久化。

    界面:

    可用(下图分别为第一次和第二次进入)

    不可用


    番茄钟

    地址:https://lp-pwa.gitee.io/pomodoro/
    二维码:

    描述:
    此应用就是一个番茄钟(关于番茄钟的概念可以搜索一下),当时正好想用,然后就做成 PWA 应用了。

    界面:

    断网下的优化


    二维码生成

    地址:https://lp-pwa.gitee.io/qrcode-web/
    二维码:

    描述:
    二维码生成软件,可更改背景色和前景色,及下载二维码。

    界面:


    新闻应用

    地址:https://lp-pwa.gitee.io/news/
    二维码:

    描述:
    做了一个新闻 APP,当时是为了验证一次网络请求,两次响应的效果。新闻接口来源于阿里云。

    界面:


    身体数据统计应用

    地址:https://lp-pwa.gitee.io/body_status/#/
    二维码:

    描述:
    做这个应用是因为买的体脂称配套的 APP 在做数据统计时,不能全局查看,所以就写了这个。数据可以手动填写,也可以截取原配套 APP 中的图,然后我这边在百度云上开了个识别文字的接口,用来自动识别后进行填充。数据库层基于 indexDB 进行存储。

    界面:


    支付宝集福应用

    地址:https://lp-pwa.gitee.io/fu/
    二维码:

    描述:
    支付宝集福季,把一些流传概率很高的“福”字整理了一下,然后又加了一个随机生成“福”的功能,事实证明还可以。

    界面:


    田英章书法字典应用

    地址:https://lp-pwa.gitee.io/word-dict/
    二维码:

    描述:
    输入文字,会出现相应的田英章字体的毛笔字。

    界面:


    抖音无水印下载应用

    地址:https://lp-pwa.gitee.io/douyin/
    二维码:
    在这里插入图片描述

    描述:
    复制抖音地址,直接粘贴即可。解析成功后会出现“下载”和“播放”按钮。

    界面:


    很好用的备忘录

    地址:https://lp-pwa.gitee.io/notepad/
    二维码:
    在这里插入图片描述

    描述:
    IndexDB 版备忘录,markdown 编写,可离线、可安装。

    界面:


    精神氮泵

    地址:https://lecepin.gitee.io/fitness/
    二维码:
    在这里插入图片描述

    界面:


    工具

    lp-pwa-cli

    地址:https://www.npmjs.com/package/lp-pwa-cli
    描述:
    为了开发提效,写了一个 window 环境下的接入 PWA 的方案。sw 层,默认添加了 workbox v3.x 的支持。


    workbox v3.x v4.x

    地址:https://github.com/GoogleChrome/workbox
    描述:
    这个库是 Google 自产的,非常好用。
    之前用的是 v3.x 版本,只提供了 serviceWorker 环境下的库。
    现在的 v4.x 版本,增加了 window 环境下的库。


    pwacompat

    地址:https://github.com/GoogleChromeLabs/pwacompat
    描述:
    PWA 其中的一个特性就是 manifest.json 的支持,但在 IOS 下并不支持此特性,而是有一套自己的特性标签来实现。
    pwacompat 库就可以实现此兼容功能。

    push-tool

    地址:https://lecepin.gitee.io/push-tools/static/
    描述:
    PWA push 相关的调试工具。

    PWA-builder

    地址:https://www.pwabuilder.com/
    描述:
    包含检测、生成、模板等一系列的能力工具。


    博客名称:王乐平博客

    CSDN博客地址:http://blog.csdn.net/lecepin

    知识共享许可协议
    本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
    展开全文
  • 如何打造自己的PWA应用.
  • 这是用于应用程序的渐进式Web应用程序(PWA)模板。 它位于 。 要使用基于此模板创建一个新项目: npx degit tretapey/svelte-pwa my-svelte-pwa cd my-svelte-pwa 请注意,您将需要安装 开始吧 安装依赖项... ...
  • tap10_pwa 将 Web 应用程序转换为 PWA 的示例 基地 可安装 使用 Service Worker 缓存 为 One Signal 引入推送通知
  • 快速的PWA开发框架。 使用VueJS,Hammerjs,Vuex,Vuerouter,Bulma / MDL和require.js快速开发功能全面的渐进式Web应用程序。 API Trasport由Axios提供,并且数据SQL接口由alasql提供(是的,我们在非GraphQL或...
  • 手把手教你制作一个PWA应用教程

    千次阅读 2020-03-26 09:35:56
    来源 |https://segmentfault.com/a/1190000019414253简介Web前端的同学是否想过学习应用开发,以弥补自己的移...


    来源 | https://segmentfault.com/a/1190000019414253



    简介

    Web前端的同学是否想过学习应用开发,以弥补自己的移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发,混合开发(例如:Ionic),还是使用react native或者flutter这样的跨平台框架?而应用开发的学习周期长,学习成本高也让一部分人望而却步。

    得益于前端技术的飞速发展,浏览器性能的不断提高,使用网页技术开发出接近原生体验的应用重新实现的现实,PWA就在这样的背景下应运而生。可以用自己熟悉的HTML,CSS,Javascript开发出替代美原生应用的网站,而拥有接近原生应用的流畅程度,并且某些某些原生app才有的特性,

    例如:a。可以在主屏上安装应用图标,b。离线状态下访问,c。获取消息通知,等等。。PWA的出现让大家看到了希望!

    对比原生应用

    那分别PWA和原生应用比例到底有何竞争力呢?我们分别看一下原生应用和PWA的特点:

    原生应用:

    • 使用原生SDK和开发工具开发

    • 需要考虑跨平台,不同系统经常需要独立开发

    • 需要发布到应用商店才能下载使用

    • 可以安装到手机主屏,生成应用图标

    • 直接运行于操作系统上,访问系统资源方便

    • 可以离线使用

    • 可以获取消息通知

    PWA应用:

    • 使用HTML,CSS,JS开发

    • 无需考虑跨平台,只需要考虑浏览器兼容性

    • 通过网址访问,无需发布到应用商店

    • 可以安装到手机主屏,生成应用图标

    • 运行于浏览器中,可访问系统资源

    • 可以离线使用

    • 可以获取消息通知

    可以发现PWA本质上是原生应用的主要能力,但是开发流程却比原生应用更加简洁:

    a、html / css / js的群众基础更好,开发效率更高;

    b、省去了为不同系统开发独立版本的大量成本;

    c、省去了上架到应用市场的繁琐流程;

    d、无需进一步应用商店下载,用户使用起来也更加方便。但是稍微的是,PWA还是相对比较新的技术,实现规范还有很多调整的空间,部分浏览器对PWA的支持也还不完善,但是PWA是一个趋势,所以现在学习正合适!

    本文将通过一个简单的列子(一个简单的邮编查询应用)向大家展示PWA的开发流程,项目参考:Traversy Media-使用Vue和Ionic4构建PWA。完成后的效果是这样的。

    创建项目

    项目使用Vue + Ionic的组合进行开发。此处主要关注PWA的构造,因此vue,ionic等技术不做过多描述。使用VSCode的同学,建议安装Vetur插件提高开发效率。

    1.首先大致安装@vue/cli

    npm install -g @vue/cli
    

    2.初始化vue项目:

    vue create vue-ionic-pwa
    

    3.因为ionic的vue-router路由依赖于,所以接下来安装vue-router

    vue add router
    

    4.安装 @ionic/vue

    npm install @ionic/vue
    

    5.在src/main.js中添加对ionic的

    ...import Ionic from '@ionic/vue'import '@ionic/core/css/ionic.bundle.css'
    Vue.use(Ionic)...
    

    6.在src/router.js中使用IonicVueRouter替换预设的vue路由器:

    import Vue from 'vue'import { IonicVueRouter } from '@ionic/vue';import Home from './views/Home.vue'
    Vue.use(IonicVueRouter)
    export default new IonicVueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes: [    {      path: '/',      name: 'home',      component: Home    }  ]})
    

    7.将src/App.vue内容修改为:

    <template>  <div id="app">    <ion-app>      <ion-vue-router/>    </ion-app>  </div></template>
    

    8.将src/views/Home.vue内容修改为:

    <template>  <div class="ion-page">    <ion-header>      <ion-toolbar>        <ion-title>          ZipInfo        </ion-title>      </ion-toolbar>    </ion-header>    <ion-content class="ion-padding">My App</ion-content>  </div></template>
    <script>export default {  name: 'home',  components: {}}</script>
    

    最后,我们运行yarn serve看下效果:

    App功能实现

    App主要有三部分组成:1。搜索组件,用于输入邮编并查询,2。展示组件,用于展示查询到的邮编信息,3。清除按钮,用于清除查询到的邮编信息

    1、搜索组件

    我们在src/components下面的新建ZipSearch.vue文件作为邮编搜索组件,主要逻辑为当用户输入一串字符,点击搜索按钮,如果输入合法则触发get-zip事件,如果不合法则提示。

    ZipSearch.vue

    <template>  <ion-grid>    <form @submit="onSubmit">      <ion-col>        <ion-item>          <ion-label>ZipCode:</ion-label>          <ion-input            :value="zip"            @input="zip = $event.target.value"            name="zip"            placeholder="Enter US ZipCode"          />        </ion-item>      </ion-col>      <ion-col>        <ion-button type="submit" color="primary" expand="block">Find</ion-button>      </ion-col>    </form>  </ion-grid></template>
    <script>export default {  name: "ZipSearch",  data() {    return {      zip: ""    };  },  methods: {    onSubmit(e) {      e.preventDefault();      const zipRegex = /(^\d{5}$)|(^\d{5}-\d{4}$)/;      const isValid = zipRegex.test(this.zip);      if (!isValid) {        this.showAlert();      } else {        this.$emit("get-zip", this.zip);      }      this.zip = "";    },    showAlert() {      return this.$ionic.alertController        .create({          header: "Enter zipcode",          message: "Please enter a valid US ZipCode",          buttons: ["OK"]        })        .then(a => a.present());    }  }};</script>
    

    src/views/Home.vue中约会ZipSearch组件,当Home接收到get-zip事件时调用https://www.zippopotam.us的接口,获取邮编对应的信息:

    ...    <ion-content class="ion-padding">      <ZipSearch v-on:get-zip="getZipInfo"/>    </ion-content>...
    <script>import ZipSearch from "../components/ZipSearch";
    export default {  name: "home",  components: {    ZipSearch  },  data() {    return {      info: null    };  },  methods: {    async getZipInfo(zip) {      const res = await fetch(`https://api.zippopotam.us/us/${zip}`);      if (res.status == 404) {        this.showAlert();      }      this.info = await res.json();    },    showAlert() {      return this.$ionic.alertController        .create({          header: "Not Valid",          message: "Please enter a valid US ZipCode",          buttons: ["OK"]        })        .then(a => a.present());    }  }};</script>
    

    我们先看一下搜索组件的效果:

    输入邮编格式错误:

    2、信息展示和清除组件

    获取到邮编信息后我们需要一个展示邮编信息的组件和一个src/components清除信息的按钮,在下面新建ZipInfo.vueClearInfo.vue

    ZipInfo.vue

    <template>  <ion-card v-if="info">    <ion-card-header>      <ion-card-subtitle>{{info['post code']}}</ion-card-subtitle>      <ion-card-title>{{info['places'][0]['place name']}}</ion-card-title>    </ion-card-header>    <ion-card-content>      <ion-list>        <ion-item>          <ion-label>            <strong>State:</strong>            {{info['places'][0]['state']}} ({{info['places'][0]['state abbreviation']}})          </ion-label>        </ion-item>        <ion-item>          <ion-label>            <strong>Latitude:</strong>            {{info['places'][0]['latitude']}}          </ion-label>        </ion-item>        <ion-item>          <ion-label>            <strong>Longitude:</strong>            {{info['places'][0]['longitude']}}          </ion-label>        </ion-item>      </ion-list>    </ion-card-content>  </ion-card></template>
    <script>export default {  name: "ZipInfo",  props: ["info"]};</script>
    

    ClearInfo.vue

    <template>  <ion-button color="light" expand="block" v-if="info" @click="$emit('clear-info')">Clear</ion-button></template>
    <script>export default {  name: "ClearInfo",  props: ["info"]};</script>
    

    接着在Home中约会ZipInfoClearInfo组件:

    src / views / Home.vue

    ...    <ion-content class="ion-padding">      <ZipSearch v-on:get-zip="getZipInfo"/>      <ZipInfo v-bind:info="info"/>      <ClearInfo v-bind:info="info" v-on:clear-info="clearInfo"/>    </ion-content>...
    import ZipInfo from "../components/ZipInfo";import ClearInfo from "../components/ClearInfo";
    export default {  name: "home",  components: {    ZipSearch, ZipInfo  },  methods:{    ...    clearInfo(){      this.info = null;    }  }}
    

    到此,app的主体就完成了,效果如下:

    实现PWA

    我们使用现成的@vue/pwa插件来给我们的app增加PWA的能力。

    安装@vue/pwa

    vue add @vue/pwa
    

    安装完成后项目中增加了public/manifest.jsonregisterServiceWorker.js两个文件。其中public/manifest.json文件内容如下:

    {  "name": "vue-ionic-pwa",  "short_name": "vue-ionic-pwa",  "icons": [    {      "src": "./img/icons/android-chrome-192x192.png",      "sizes": "192x192",      "type": "image/png"    },    {      "src": "./img/icons/android-chrome-512x512.png",      "sizes": "512x512",      "type": "image/png"    }  ],  "start_url": "./index.html",  "display": "standalone",  "background_color": "#000000",  "theme_color": "#4DBA87"}
    

    manifest.json中主要包含app的基本信息,例如名称(名称),图标(图标),显示方式(display)等等,是web app能被以类似原生的方式安装,展示的必要配置。更多的配置项可参考MDN Web App清单。

    在Chrome浏览器控制台中也可看到app的manifest配置:

    registerServiceWorker.js为注册服务人员。服务人员通俗地说就是在浏览器后台独立于网页运行的一段脚本,服务人员可以完成一些特殊的功能,例如:消息推送,后台同步,拦截和处理网络请求,管理网络缓存等。Serviceworker之于pwa的意义在于能够为用户提供离线体验,即掉线状态下用户依旧能够访问网站并获取已被缓存的数据。使用service worker需要HTTPS,并考虑浏览器兼容性。

    registerServiceWorker.js

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

    在Chrome浏览器控制台中也可看到服务工作者的状态:

    当然,只注册了service worker还不够,我们还希望控制service worker的行为,通过在vue.config.js中增加相关的配置我们可以设置service worker文件的名称,缓存逻辑等等。

    vue.config.js

    module.exports = {  pwa: {    workboxPluginMode: 'GenerateSW',    workboxOptions: {      navigateFallback: '/index.html',       runtimeCaching: [        {          urlPattern: new RegExp('^https://api.zippopotam.us/us/'),          handler: 'networkFirst',          options: {            networkTimeoutSeconds: 20,            cacheName: 'api-cache',            cacheableResponse: {              statuses: [0, 200]            }          }        }      ]    }  }}
    

    更多配置请参考:@ VUE / CLI-插件,PWA和针线-的WebPack-插件。由于@vue/cli-plugin-pwa,生成的服务人员只在生产环境生效,所以建议将项目建设之后部署到生产环境测试本文示例使用GitHub的页面进行部署和展示。

    到此,将普通的网络应用转成PWA的工作基本完成,我们部署到线上看下效果:

    文件已被缓存用于离线访问:

    查询一个邮编试试,可以发现请求被缓存了下来:

    我们随后关掉网络,再查询刚刚的那个邮编,发现在网络请求失败之后立即切换用本地缓存的数据:

    好了,一个简单的PWA就已经制作完成了。当然PWA的功能远不止此所展示的,依次按压,安装到手机,后续有机会再跟大家分享,谢谢。

    展开全文
  • 主要介绍了详解使用angular框架离线你的应用pwa指南),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • PWA web应用模型

    2018-01-08 21:33:55
    2018 新年快乐,这是我新年的第一篇博客,最近都挤图书馆去了,下面是...PWA 是一门Google推出的web前端新技术,全称是Progressive Web App,是Google在2015年提出,2016年6月推广的项目,是结合了一系列现代Web技术
  • PWA(Progressive Web App)可以使得 Web 站点拥有类似 Native App 的使用体验,虽然已经推出一段时间,但目前来看,PWA 离真正的 Native App 还有一个重要的差别,那就是进入应用商店。Trusted Web Activity 的发布,...
  • 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 ...
  • 待办事项 一个简单的react / redux / firebase TodoApp 如果您不想使用自己的Google帐户登录,请使用以下凭据: 电子邮件: ismail@ismail.com 密码: ismailtodoapp
  • vue-cli3构建PWA离线应用

    千次阅读 2020-07-15 18:22:53
    vue-cli2使用PWA 1.安装pwa依赖 npm install @vue/cli-plugin-pwa 2.vue-cli2需要手动安装register-service-worker依赖 npm install register-service-worker 3.在config/index.js中添加如下代码 pwa: { name: ...
  • Angular 11示例PWA 具有和的Angular入门工具包 它是一个回购系列的一部分,该系列旨在使用Angular创建渐进式Web应用程序 Web应用程序实时演示 快速开始 # choose a repo # download the example or clone the repo ...
  • 本指南说明如何在Java应用程序中获得PWA功能。 应用PWA功能之前的Java应用 带有PWA的最终应用程序,独立运行 逐步指南 以下是有关如何使Java应用程序与PWA兼容的简单步骤: 最终应用程序的外观 桌面上的应用程序...
  • PWA应用-源码

    2021-02-17 14:05:44
    PWA应用 预算追踪器 描述: 跟踪用户在线或离线预算的应用程序 安装: 巴别塔 表示 猫鼬 摩根 Webpack 用法: 用户可以随时使用它来跟踪费用,无需互联网! Heroku链接
  • 一个GraphQL供电,PWA,单页的应用程序店面 。 产品特点 使用 , , , 和构建的无头电子商务店面 离线模式(测试版) Saleor GraphQL API集成 单页应用经验 集成 演示版 观看Saleor店面的! 或在免费的Heroku...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,591
精华内容 3,836
关键字:

pwa快应用