pwa简介

learning 发布于2019-08-23 11:59 / 3160人阅读

摘要：简称，是提升的体验的一种新方法，能给用户原生应用的体验。能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全性能和体验三个方面都有很大提升，本质上是，借助一些新技术也具备了的一些特性，兼具和的优点。

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。 PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。 PWA 的主要特点包括下面三点：

可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现

体验 - 快速响应，并且有平滑的动画响应用户的操作

粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

可靠

通过 Service Worker 能够让用户在网络条件很差或离线的情况下也能瞬间加载并且展现。

介绍个sw的简便实现方法 offline-plugin

  // webpack.config.js
  var OfflinePlugin = require("offline-plugin");
  module.exports = {
    plugins: [
      new OfflinePlugin({
        Caches: "all"
      })
    ]
  }
  //index.js
  import * as OfflinePluginRuntime from "offline-plugin/runtime";
  OfflinePluginRuntime.install();

体验

首屏加载优化
App Shell

粘性

借助 Web App Manifest 提供给用户和 Native App 一样的沉浸式体验

可以通过给用户发送离线通知，让用户回流

坑：

ios桌面icon 实现依然使用link标签

全站必须使用https, 免费证书

manifest.json配置的start-url必须在sw.js缓存列表中，否则无法离线使用

推荐阅读文章：

下一代 Web 应用模型 —— Progressive Web App

饿了么的 PWA 升级实践

Your first service worker

服务器托管云服务器 PWA 使用简介函数简介基础简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97793.html

Service Worker学习与实践（二）——PWA简介

摘要：简称，是提升的体验的一种新方法，能给用户原生应用的体验。当网站以这种方式启动时它具有唯一的图标和名称，以便用户将其与其他网站区分开来。表示启动时的方向，横屏竖屏等，具体参数值可参考文档。下一篇文章中，主要讲述在实践中的重要能力。这周，Chrome 70正式版本发布，Progressive Web Apps（PWA）已经正式支持到Windows 10平台，然而，早在前几个版本之前，Ch...

KavenFan 2019-08-26 13:24 评论0 收藏0
【PWA学习与实践】(3) 让你的WebApp离线可用

摘要：学习与实践系列文章已整理至学习手册，文字内容已同步至。本文是学习与实践系列的第三篇文章。引言其中一个令人着迷的能力就是离线可用。但是，如果你注意到文章开头的图片就会发现，离线时我们不仅可以访问，还可以使用搜索功能。《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册，文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。本文是《PWA学习与实...

since1986 2019-08-23 12:46 评论0 收藏0
PWA之 workbox 学习

摘要：另一部分属于进程，它重新在后台起了一个进程，它和应用的主进程互不影响，可以同时执行。其中一般作为应用程序浏览器和网络如果可用之间的代理服务。他们还将允许访问推送通知和后台同步。然后开始在进程中通过事件，来监听请求，并对请求和响应进行缓存。前言:我们的应用可以分为两部分，一部分是属于主进程的(包括js(同步,异步)，以及dom渲染等等)，在一个时刻点，只能执行一个，要么先去渲染dom，...

zhangyucha0 2019-08-26 13:55 评论0 收藏0
借助 workbox 将网站升级成 PWA

摘要：是谷歌近几年一直在推进的应用新模型。既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。是由谷歌浏览器团队发布，用来协助创建应用的库。当然直接用还是太复杂了，谷歌还很贴心的发布了一个插件，能够自动生成和静态资源列表。 PWA（Progressive Web Apps）是谷歌近几年一直在推进的 web 应用新模型。PWA 借助 Service Worker 缓存网站的静态资源，甚至...

shaonbean 2019-08-22 17:35 评论0 收藏0
pwa-之service worker 离线文件处理

摘要：勾上刷新页面，显示如图实现原理使用，预先缓存和。又请求已经缓存好的。加载离线图片创建创建创建访问，然后打开。一定要访问啊，不然不会成功多个事件调用事件和其他事件一样都是可以注册多次的。 pwa-之service worker 基本概念pwa-之service worker 离线文件处理本章包含以下知识点显示离线页面加载离线图片加载离线css 多个fetch处理事件调用简介...

fizz 2019-08-06 13:35 评论0 收藏0