PWA 不是单纯的某项技术,即我们所熟知的 PWA

React 同构应用 PWA 进级指南

2018/05/25 · JavaScript · PWA, React

原版的书文出处: 林东洲   

渐进式Web应用(PWA)入门教程(下)

2018/05/25 · 基础本事 · PWA

初稿出处: Craig Buckler   译文出处:草龙珠城控件   

上篇小说我们对渐进式Web应用(PWA)做了一部分主题的介绍。

渐进式Web应用(PWA)入门教程(上)

在这一节中,大家将介绍PWA的规律是哪些,它是哪些开端专门的工作的。

采纳 Service Worker 做一个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

初稿出处: 人人网FED博客   

在上一篇《本人是怎样让网址用上HTML5 Manifest》介绍了怎么用Manifest做一个离线网页应用,结果被大范围网络基友戏弄说这些东西已经被deprecated,移出web规范了,今后被ServiceWorker取代了,不管怎么,Manifest的有的思虑依旧得以借用的。笔者又将网址进级到了ServiceWorker,若是是用Chrome等浏览器就用ServiceWorker做离线缓存,若是是Safari浏览器就依旧用Manifest,读者能够展开那么些网址感受一下,断网也是能健康展开。

关于PWA

PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目标是经过多项新本领,在安全、品质、体验等方面给顾客原生应用的心得。何况无需像原生应用那样繁琐的下载、安装、进级等操作。

那边表达下概念中的“渐进式”,意思是其一web应用还在频频地前进中。因为脚下来讲,PWA还并未成熟到一蹴即至的品位,想在平安、性能、体验上达到原生应用的功力仍然有那多少个的进级换代空间的。一方面是营造PWA的资本难题,另一方面是近期各大浏览器、安卓和IOS系统对此PWA的帮衬和包容性还也有待拉长。

正文小编将从网址缓存、http央求拦截、推送到主屏等职能,结合实例操作,一步步引领大家火速玩转PWA技艺。

前边的话

  渐进式网络应用 ( Progressive Web Apps ),即大家所熟知的 PWA,是 Google 建议的用前沿的 Web 本事为网页提供 App 般使用体验的一名目繁多方案。PWA 本质上是 Web App,借助一些新工夫也享有了 Native App 的一部分特色。本文将详细介绍针对现存网站的PWA升级

 

前言

近日在给自家的博客网址 PWA 晋级,顺便就记下下 React 同构应用在动用 PWA 时际遇的主题材料,这里不会从头初步介绍怎么样是 PWA,假如您想学习 PWA 相关知识,能够看下上面小编收藏的某个小说:

  • 您的率先个 Progressive Web App
  • 【ServiceWorker】生命周期那一个事儿
  • 【PWA学习与施行】(1) 2018,初步你的PWA学习之旅
  • Progressive Web Apps (PWA) 中文版

第一步:使用HTTPS

渐进式Web应用程序需求采纳HTTPS连接。纵然使用HTTPS会令你服务器的支付变多,但利用HTTPS可以让您的网址变得更安全,HTTPS网站在Google上的排行也会更靠前。

是因为Chrome浏览器会默许将localhost以及127.x.x.x地点视为测量检验地点,所以在本示例中您并无需开启HTTPS。其他,出于调试目标,您能够在起步Chrome浏览器的时候利用以下参数来关闭其对网址HTTPS的检讨:

  • –user-data-dir
  • –unsafety-treat-insecure-origin-as-secure

1. 什么是Service Worker

Service Worker是Google倡导的完成PWA(Progressive Web App)的二个生死攸关角色,PWA是为了缓慢解决古板Web APP的症结:

(1)未有桌面入口

(2)无法离线使用

(3)没有Push推送

那Service Worker的具体表现是怎么的呢?如下图所示:

图片 1

ServiceWorker是在后台运营的一条服务Worker线程,上海教室作者开了多少个标签页,所以体现了五个Client,可是不管开多少个页面都独有三个Worker在担任管理。这几个Worker的干活是把一些财富缓存起来,然后拦截页面包车型地铁央浼,先看下缓存Curry有未有,借使有些话就从缓存里取,响应200,反之未有的话就走正常的呼吁。具体来讲,ServiceWorker结合Web App Manifest能做到以下专门的学业(那也是PWA的检测标准):

图片 2

包涵能够离线使用、断网时再次来到200、能唤起客商把网址增加四个Logo到桌面上等。

Service Worker

ServiceWorker是PWA的大旨技能,它亦可为web应用提供离线缓存作用,当然不止如此,上边列举了有的ServiceWorker的性子:

依照HTTPS 情形,那是营造PWA的硬性前提。(LAMP情状网址进级HTTPS建设方案)

是一个独自的 worker 线程,独立于当下网页进度,有本身单独的 worker context

可阻拦HTTP伏乞和响应,可缓存文件,缓存的文书能够在网络离线状态时取到

能向顾客端推送音信

不能够间接操作 DOM

异步达成,内部大都以经过 Promise 完成

作用演示

  从前端小站xiaohuochai.cc的PWA效果做示范,github移步至此

【增多到桌面】

图片 3

【离线缓存】

   由于手提式有线电电话机录屏选拔不能够开展离线录像,改由模拟器模拟离线效果

图片 4

 

PWA 特性

PWA 不是单独的某项技艺,而是一群本领的联谊,举例:ServiceWorker,manifest 增多到桌面,push、notification api 等。

而就在前不久时间,IOS 11.3 刚刚帮忙 Service worker 和邻近 manifest 增多到桌面包车型地铁表征,所以此番 PWA 改动主要依然落到实处这两片段机能,至于其余的特征,等 iphone 协助了再进级吗。

其次步:成立二个应用程序清单(Manifest)

应用程序清单提供了和日前渐进式Web应用的有关音讯,如:

  • 应用程序名
  • 描述
  • 有着图片(包罗主显示器Logo,运转荧屏页面和用的图样只怕网页上用的图样)

精神上讲,程序清单是页面上用到的Logo和宗旨等能源的元数据。

程序清单是贰个坐落您使用根目录的JSON文件。该JSON文件重临时必需抬高Content-Type: application/manifest+json 或者 Content-Type: application/jsonHTTP头音信。程序清单的文书名不限,在本文的身体力行代码中为manifest.json

{ "name" : "PWA Website", "short_name" : "PWA", "description" : "An example PWA website", "start_url" : "/", "display" : "standalone", "orientation" : "any", "background_color" : "#ACE", "theme_color" : "#ACE", "icons": [ { "src" : "/images/logo/logo072.png", "sizes" : "72x72", "type" : "image/png" }, { "src" : "/images/logo/logo152.png", "sizes" : "152x152", "type" : "image/png" }, { "src" : "/images/logo/logo192.png", "sizes" : "192x192", "type" : "image/png" }, { "src" : "/images/logo/logo256.png", "sizes" : "256x256", "type" : "image/png" }, { "src" : "/images/logo/logo512.png", "sizes" : "512x512", "type" : "image/png" } ] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "name"              : "PWA Website",
  "short_name"        : "PWA",
  "description"       : "An example PWA website",
  "start_url"         : "/",
  "display"           : "standalone",
  "orientation"       : "any",
  "background_color"  : "#ACE",
  "theme_color"       : "#ACE",
  "icons": [
    {
      "src"           : "/images/logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

程序清单文件建设构造完未来,你需求在每种页面上援用该文件:

<link rel="manifest" href="/manifest.json">

1
<link rel="manifest" href="/manifest.json">

以下属性在程序清单中时时应用,介绍表达如下:

  • name: 客户看到的使用名称
  • short_name: 应用短名称。当展现应用名称的地点缺乏时,将动用该名称。
  • description: 行使描述。
  • start_url: 采用开端路线,相对路线,默以为/。
  • scope: UCR-VL范围。例如:假诺您将“/app/”设置为U陆风X8L范围时,那个利用就能够直接在这些目录中。
  • background_color: 接待页面包车型地铁背景颜色和浏览器的背景颜色(可选)
  • theme_color: 选取的焦点颜色,一般都会和背景颜色同样。那么些装置决定了利用如何展现。
  • orientation: 预先旋转方向,可选的值有:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary
  • display: 展现情势——fullscreen(无Chrome),standalone(和原生应用一样),minimal-ui(最小的一套UI控件集)大概browser(最古老的选拔浏览器标签突显)
  • icons: 一个蕴涵全数图片的数组。该数组中每一个成分富含了图片的U奇骏L,大小和项目。

2. 瑟维斯 Worker的支撑情状

Service Worker近些日子唯有Chrome/Firfox/Opera帮助:

图片 5

Safari和Edge也在预备帮助Service Worker,由于ServiceWorker是谷歌(Google)主题的一项职业,对于生态相比较密闭的Safari来讲也是迫于时势开始希图补助了,在Safari TP版本,能够见到:

图片 6

在试验成效(Experimental Features)里已经有ServiceWorker的菜单项了,只是尽管张开也是不可能用,会提示您还尚无兑现:

图片 7

但不管什么,至少评释Safari已经希图协理ServiceWorker了。其他还足以见见在二〇一五年二〇一七年九月布告的Safari 11.0.1版本现已支撑WebRTC了,所以Safari依然一个发展的孩子。

Edge也希图帮衬,所以Service Worker的前景非常美好。

瑟维斯 Worker生命周期

serviceworker的行使流程可以省略计算为注册--安装--激活。

注册其实就是报告浏览器serviceworkerJS文件寄存在怎么岗位,然后浏览器下载、解析、推行该公文,进而运转安装。这里自个儿创立一个app.js文件,注册代码如下,将该公文在网址的head标签里引进。

if ('serviceWorker' in navigator) {

window.addEventListener('load', function () {

navigator.serviceWorker.register

.then(function (registration) {

// 注册成功

console.log('ServiceWorker registration successful with scope: ', registration.scope);

})

.catch(function {

// 注册失败:(

console.log('ServiceWorker registration failed: ', err);

});

});

}

当推行serviceworkerJS文件时,首先接触的是install事件,进行安装。安装的过程正是将内定的某个静态财富开展离线缓存。下边是本身的sw.js文件中的安装代码:

var CACHE_VERSION = 'sw_v8';

var CACHE_FILES = [

'/js/jquery/min.js',

'/js/zui/min.js',

'/js/chanzhi.js',

];

self.addEventListener('install', function {

event.waitUntil(

caches.open(CACHE_VERSION)

.then(cache => cache.addAll(CACHE_FILES)

));

});

当安装成功后,serviceworker就能够激活,那时就能管理 activate 事件回调 (提供了更新缓存计谋的空子)。并得以管理功效性的事件 fetch 、sync 、push 。

self.addEventListener('activate', function {

event.waitUntil(

caches.keys().then(function{

return Promise.all(keys.map(function{

if(key !== CACHE_VERSION){

return caches.delete;

}

}));

})

);

});

概述

  PWA 的第一特征包蕴上边三点:

  1、可相信 - 即便在不牢固的互连网景况下,也能弹指间加载并显示

  2、体验 - 快速响应,何况有平整的卡通响应顾客的操作

  3、粘性 - 像配备上的原生应用,具有沉浸式的顾客体验,客商能够加上到桌面

  首要效率包罗站点可加多至主显示器、全屏格局运营、帮忙离线缓存、新闻推送等

【PRPL模式】

  “PRPL”(读作 “purple”)是 Google 的程序猿建议的一种 web 应用架构方式,它意在利用当代 web 平台的新本事以小幅优化移动 web 的个性与感受,对什么样协会与设计高品质的 PWA 系统提供了一种高档案的次序的虚幻

  “PRPL”实际上是 Push/Preload、Render、Precache、Lazy-Load 的缩写

  1、PUSH/PRELOAD,推送/预加载初步 U奥迪Q7L 路由所需的要害财富

  2、RENDE劲客,渲染初叶路由,尽快让动用可被交互

  3、PRE-CACHE,用 Service Worker 预缓存剩下的路由

  4、LAZY-LOAD 按需懒加载、懒实例化剩下的路由

【Service workers】

  Service Workers 是谷歌(Google) chrome 团队建议并大力推广的一项 web 才干。在 2014 年,它走入到 W3C 标准,走入草案阶段

  PWA 的关键在于 Service Workers 。就其大旨来讲,Service Workers 只是后台运维的 worker 脚本。它们是用 JavaScript 编写的,只需短短几行代码,它们便可使开垦者能够阻挡互连网必要,管理推送新闻并实行大多另外职责

  Service Worker 中用到的部分全局变量:

self: 表示 Service Worker 作用域, 也是全局变量
caches: 表示缓存
skipWaiting: 表示强制当前处在 waiting 状态的脚本进入 activate 状态
clients: 表示 Service Worker 接管的页面

  Service Worker 的行事体制差十分的少如下:客商访谈二个持有 Service Worker 的页面,浏览器就能够下载那一个 Service Worker 并尝试安装、激活。一旦激活,Service Worker 就到后台发轫专门的职业。接下来客户访问这一个页面或许每隔一个时节浏览器都会下载这么些Service Worker,倘若监测到 Service Worker 有立异,就能够重新安装并激活新的 Service Worker,同偶然间 revoke 掉旧的 Service Worker,那正是 SW 的生命周期

  因为 Service Worker 有着前段时间的权位接触数据,因而 Service Worker 只好棉被服装置在 HTTPS 加密的页面中,纵然无形个中提升了 PWA 的门槛,可是也是为着安全做思念

 

Service Worker

service worker 在笔者眼里,类似于三个跑在浏览器后台的线程,页面第贰次加载的时候会加载这些线程,在线程激活之后,通过对 fetch 事件,可以对各类得到的能源实行调整缓存等。

其三步:创制多少个 瑟维斯 Worker

Service Worker 是叁个可编程的服务器代理,它能够阻止也许响应互连网央求。Service Worker 是位于应用程序根目录的叁个个的JavaScript文件。

您必要在页面临应的JavaScript文件中登记该瑟维斯Worker:

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
4
if ('serviceWorker' in navigator) {
  // register service worker
  navigator.serviceWorker.register('/service-worker.js');
}

假设你无需离线的连带职能,您能够只开创三个 /service-worker.js文件,那样客户就足以一贯设置您的Web应用了!

ServiceWorker那么些定义大概相比难懂,它事实上是二个办事在别的线程中的标准的Worker,它无法访问页面上的DOM成分,未有页面上的API,可是足以阻止全数页面上的互连网伏乞,满含页面导航,须要财富,Ajax乞求。

上边便是接纳全站HTTPS的首要性缘由了。假诺你未有在你的网站中运用HTTPS,二个第三方的台本就足以从别的的域名注入他和谐的ServiceWorker,然后篡改全部的央求——这无疑是那多个惊恐的。

Service Worker 会响应多个事件:install,activate和fetch。

3. 使用Service Worker

ServiceWorker的利用套路是首先登场记一个Worker,然后后台就能运转一条线程,能够在那条线程运维的时候去加载一些能源缓存起来,然后监听fetch事件,在这几个事件里拦截页面包车型地铁哀求,先看下缓存里有未有,假如有一直回到,不然正常加载。可能是一同先不缓存,每一个能源央浼后再拷贝一份缓存起来,然后下三回呼吁的时候缓存里就有了。

serviceworker的缓存作用

设置时,serviceworker将大家钦定的静态能源举办缓存,你大概会问,即使是实时的动态内容如何是好,大家不只怕预先将持有的文本能源提前线指挥部定好,让serviceworker缓存。那就要涉及serviceworker的遏止HTTP央浼响应的特征了。

serviceworker拦截http诉求,首先去反省乞请的财富在缓存中是还是不是存在,假诺存在,则直接从缓存中调用,何况固然是无互连网状态下,serviceworker也能调用缓存中的财富。假若缓存中并未有要求的能源,则通过网络去服务器上搜寻,况且在找到并响应时,serviceworker会将其存入缓存中,以备下一次再需要时一向从缓存中调用。

图片 8serviceworker缓存流程

serviceworker文件中fetch事件代码如下:

PWA 不是单纯的某项技术,即我们所熟知的 PWA。self.addEventListener('fetch', function {

event.respondWith(

caches.match(event.request).then(function{

if{

return response;

}

var requestToCache = event.request.clone();

return fetch(requestToCache).then(

function{

if(!response || response.status !== 200){

return response;

}

var responseToCache = response.clone();

caches.open(CACHE_VERSION)

.then(function{

cache.put(requestToCache, responseToCache);

});

return response;

}

);

})

);

});

在网址前台通过浏览器开荒者工具,大家得以看下从缓存中调用能源的效能:

图片 9serviceworker缓存调用图片 10缓存文件

自家这里操作演示用的是谷歌(Google)浏览器,下边是各大浏览器对于serviceworker的支撑景况:

图片 11serviceworker浏览器协理处境

离线缓存

  上面来因而service worker实现离线缓存

  一般地,通过sw-precache-webpack-plugin插件来完结动态生成service worker文件的成效

  不过,首先要在index.html中援用service worker

    <script>
      (function() {
        if('serviceWorker' in navigator) {
          navigator.serviceWorker.register('/service-worker.js');
        }
      })()
    </script>

【SPA】

  通过create-react-app生成的react SPA应用私下认可就张开了sw-precache-webpack-plugin的安装。然则,其只对静态能源开展了安装

  假如是接口能源,则相似的拍卖是先行通过网络访问,假设互连网不通,再通过service worker的缓存举办访谈

  webpack.config.prod.js文件的布局如下

    const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
    new SWPrecacheWebpackPlugin({
      // By default, a cache-busting query parameter is appended to requests
      // used to populate the caches, to ensure the responses are fresh.
      // If a URL is already hashed by Webpack, then there is no concern
      // about it being stale, and the cache-busting can be skipped.
      dontCacheBustUrlsMatching: /.w{8}./,
      filename: 'service-worker.js',
      logger(message) {
        if (message.indexOf('Total precache size is') === 0) {
          // This message occurs for every build and is a bit too noisy.
          return;
        }
        if (message.indexOf('Skipping static resource') === 0) {
          // This message obscures real errors so we ignore it.
          // https://github.com/facebookincubator/create-react-app/issues/2612
          return;
        }
        console.log(message);
      },
      minify: true,
      // For unknown URLs, fallback to the index page
      navigateFallback: publicUrl + '/index.html',
      // Ignores URLs starting from /__ (useful for Firebase):
      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
      navigateFallbackWhitelist: [/^(?!/__).*/],
      // Don't precache sourcemaps (they're large) and build asset manifest:
      staticFileGlobsIgnorePatterns: [/.map$/, /asset-manifest.json$/],
      runtimeCaching: [{
          urlPattern: '/',
          handler: 'networkFirst'
        },
        {
          urlPattern: //api/,
          handler: 'networkFirst'
        }
      ]
    })

【SSR】

  假若是劳务器端渲染的运用,则布置大旨周围。但由于无法运用代理,则需求设置网站实际路线,且由于静态能源已经存到CDN,则缓存不再通过service worker管理

  配置如下

    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /.w{8}./,
      filename: 'service-worker.js',
      logger(message) {
        if (message.indexOf('Total precache size is') === 0) {
          return;
        }
        if (message.indexOf('Skipping static resource') === 0) {
          return;
        }
        console.log(message);
      },
      navigateFallback: 'https://www.xiaohuochai.cc',
      minify: true,
      navigateFallbackWhitelist: [/^(?!/__).*/],
      dontCacheBustUrlsMatching: /./,
      staticFileGlobsIgnorePatterns: [/.map$/, /.json$/],
      runtimeCaching: [{
          urlPattern: '/',
          handler: 'networkFirst'
        },
        {
          urlPattern: //(posts|categories|users|likes|comments)/,
          handler: 'networkFirst'
        },
      ]
    })
  ]

 

本文由必威发布于必威-前端,转载请注明出处:PWA 不是单纯的某项技术,即我们所熟知的 PWA

相关阅读