改变你的网址,入门教程

By admin in 4858美高梅 on 2019年11月10日

渐进式Web应用(PWA卡塔 尔(英语:State of Qatar)入门教程(上卡塔尔

2018/05/23 · 幼功工夫 ·
PWA

原版的书文出处: Craig
Buckler   译文出处:蒲陶城控件   

多年来关于渐进式Web应用有多数研究,有大器晚成都部队分人还在疑忌渐进式Web应用是不是就是移动端现在。

但在此篇小说中自己并不会将渐进式应用软件和原生的应用软件进行相比较,但有一些是足以无可否认的,那二种应用软件的对象都以使客户体验变得更加好。

挪动端Web应用有广大精粹的定义令人应接不暇,但幸亏编写制定三个渐进式Web应用不是三个很困苦的作业。在那篇作品里将向您介绍怎么样把一个不足为奇的网址调换来渐进式Web应用。你能够遵循那篇小说一步一步地做,做完今后你的网址将得以兑现离线访谈,而且能够在桌面上创制该网址的Logo。那么上边将在带头入门教程。

4858美高梅 1

PWA学习心得

近几来,由于组织开采的供给,作者对Progressive Web Apps举行一定的研讨。

如何是渐进式Web应用?

渐进式Web应用是后生可畏种全新的Web手艺,让Web应用和原生APP的体会附近或相似。

渐进式Web应用它能够横跨Web技能及Native
APP开拓的应用方案,对于开垦者的优势如下:

  1. 您只要求关怀W3C的Web规范,不用关怀各样Native APP的代码。
  2. 客商可以在设置使用以前先试用。
  3. 在渐进式Web应用中,你无需采纳种种应用集团来散发应用,也不用关爱应用发表时不敢相信 不可能相信的核对正式以至选取内购的阳台分红。别的,应用程序更新是半自动举行的,没有需求顾客交互作用,所以完全的行使体验对于客商来说更为的坦荡。
  4. 渐进式Web应用的“安装”进程超级快,只要求在主屏幕上加多三个Logo就可以。
  5. 渐进式Web应用运营时可以显示二个难堪的开发银行画面。
  6. 你能够在渐进式Web应用中提供全部全屏体验的行使。
  7. 透过系统通报等花样压实顾客的粘性。
  8. 渐进式Web应用将会在本土缓存需求的公文,所以渐进式Web应用会比日常的Web应用的特性更加好。
  9. 轻量级安装——你只须要缓存几百KB的数额就能够。
  10. 有着的数目传输必须运用安全的HTTPS连接
  11. 渐进式Web应用可以离线缓存数据,并且会在重复连接网络时再也联合数据。

pwa

 

背景

Progressive Web Apps(渐进式Web应用程序,简单的称呼PWA卡塔 尔(阿拉伯语:قطر‎ 是 谷歌 建议的使用
Web 技巧为网页提供如App使用体验的黄金年代种方案。
其首要特色如下:

  • 有限补助 – 固然在不安宁的互连网情状下,也能须臾间加载并显示
  • 体会 – 神速响应,而且有平整的动漫片响应顾客的操作
  • 粘性 – 像配备上的原生应用,具备沉浸式的顾客体验,客商能够加上到桌面

可以
查阅更详细的新闻
如上所述,PWA能促成离线缓存,升高Web应用的响应速度,并能在移动端增多相符原生Native
App的Logo,以便开端利用。

渐进式Web应用发展的现状

渐进式Web应用才刚刚开头发展,但实质上在国内,有个别网址已经实际开首PWA的实行了,举个例子:新浪、豆瓣、天猫等楼台。也许那个时候聪明的您也许就能生出疑问,这这几个PWA不正是和Wechat小程序相近吧,对是那般,二者的目标是雷同的,就是在运动端为顾客提供充足轻量且与原生应用使用体验左近的“轻”应用。

但就当下来说,PWA是谷歌(Google卡塔 尔(阿拉伯语:قطر‎首选的豆蔻梢头项本领标准,FireFox,Chrome以致部分基于Blink的浏览器已经支撑渐进式Web应用了,Edge上对渐进式Web应用的支撑还在开拓。Apple公司也象征会虚构在友好Safari支持PWA。可是那项成效已经跻身了WebKit内核的两年安顿中。长时间来看,对浏览器宽容性的支撑地点应该已经不算太大题目了。并且在前段时间,在不扶持渐进式Web应用的浏览器中,你的利用也只是力所比不上选取渐进式Web应用的离线效能而已,除外的功效均能够健康使用。

而在Wechat那边,凭仗宏大的顾客基数和体积能或无法与PWA三足鼎立以至笑到末了方今还一问三不知。

方今有超多有关 Progressive Web
Apps(PWAs卡塔尔的音讯,很两个人都在问那是或不是(移动卡塔 尔(阿拉伯语:قطر‎web
的前景。作者不想陷入native app 和 PWA 的纷争,不过有后生可畏件事是显明的 —
PWA超级大的升官了运动端表现,改进了客商体验。

4858美高梅 2

使用

本次测量检验代码运用到Node来运营服务(问安装Nodejs卡塔 尔(英语:State of Qatar)。Node运转服务部分参照
pwa-retrofit。步骤如下。

示范代码

大部科目都汇报的是如何在Chrome上从零开首制作一个好像原生分界面的行使。可是在这里篇教程中,大家并不许备做八个单页面应用程序,所以在这里我们也无须了然诸如Material
Design等文化。那么下边大家就直接看示例吧。

你能够从GitHub中拿到本学科对应的身体力行代码。

本示例中提供了三个有多个网页的网址,一个CSS文件和贰个JavaScript文件。这些网址能够在具备的现世浏览器上健康干活(IE10+卡塔 尔(英语:State of Qatar)。假如你的浏览器帮忙渐进式Web应用,客商能够在离线状态下将会一贯访谈缓存中的页面。

要想运转此示例,请确定保证您早就安装了Node.js。并请张开命令行,使用以下命令来运转该示例:

node ./server.js [port]

1
node ./server.js [port]

上述命令中,[port]是可选部分,默认为8888。使用 Ctrl + C 就可以甘休Web服务器。

开荒基于Blink内核的浏览器(Opera,Vivaldi,Chrome卡塔 尔(英语:State of Qatar),然后在地点栏中输入 或然 Cmd/Ctrl + Shift +
I卡塔尔国来查看调节台新闻。

4858美高梅 34858美高梅 4

翻开头页,也能够在页面上点击一下,然后使用以下办法步向离线方式:

当选Network标签或然Application -> 瑟维斯 Workers
标签下的“离线”选项。重新访问早前访谈过的网页,此前网页还是会加载:

4858美高梅 54858美高梅 6

好音讯是付出贰个 PWA
并简单。事实上,大家能够将现成的网址开展修正,使之成为PWA。那也是自己那篇随笔要讲的
— 当你读完那篇小说,你能够将您的网址改过,让他看起来就好像三个 native
web app。他得以离线职业还要存有和煦的主屏Logo。

 

统筹相应的manifest.json文件

manifest文件包蕴了四个网址的名字、首要颜色以致Logo等数据。
率先种办法:大家得以在Favicon & App Icon
Generator概念大家的Logo。

4858美高梅 7

预览图片

点击 Download the generated favicon
就可以拿到相应自定义Logo新闻和manifest.json文件。

其次种方法:登录Web App Manifest
Generator,输入创立PWA各类音讯。如若有不明确的,可不填。最后就能够获取相应的音讯。

manifest.json
{
  "name": "pwa-demo",
  "short_name": "demo",
  "lang": "zh-CN",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "ndroid-icon-48x48.png",
      "sizes": "48*48",
      "type": "image/png"
    }
  ]
}

连年移动端安装

除去在PC浏览器访谈外,你也能够在移动器具上访问该示例。使用USB线缆将你的活动器具连接到Computer上,然后从右上角多少个点菜单中开发More
tools – Remote devices标签

4858美高梅 84858美高梅 9

点击侧边的Settings菜单,然后增添一条端口映射(Port Forwarding卡塔 尔(英语:State of Qatar)的平整,将8888映射为localhost:8888,将来您能够直接在手提式有线电话机张开Chrome然后作客http://localhost:8888 。

你能够应用浏览器的“加多到主显示屏”功用将如今网页增添到主显示器,在你拜见了多少个页面之后,浏览器会将这么些Web应用“安装”到你的器材上。浏览几个页面,关闭Chrome并将配备与Computer断开连接,点击桌面上生成的Logo,你寻访到一个Splash页面,并且你能够世袭浏览此前浏览过的页面。

4858美高梅 104858美高梅 11

Progressive Web Apps 是什么?

Progressive Web Apps (下文以“PWAs”代指)
是一个令人欢悦的前端技巧的改进。PWAs综合了后生可畏多级技艺使您的 web
app表现得就好像 native mobile app。比较于纯 web 施工方案和纯 native
解决方案,PWAs对于开辟者和顾客有以下优点:

  1. 您只须要基于开放的 W3C 规范的 web
    开垦才干来支付二个app。不须要多用户端支出。

  2. 客户能够在设置前就体会你的 app。

  3. 无需经过 AppStore 下载 app。app 会自动晋级不需求顾客晋级。

  4. 客商会受到‘安装’的唤醒,点击安装会加多三个Logo到客商首屏。

  5. 被张开时,PWA 展会示一个有吸重力的闪屏。

  6. chrome 提供了可选选项,可以使 PWA 获得全屏体验。

  7. 供给的公文少禽被本地缓存,由此会比标准的web app
    响应更快(恐怕也会比native app响应快卡塔尔

  8. 安装及其轻量 — 或然会有几百 kb 的缓存数据。

  9. 网站的多少传输必需是 https 连接。

  10. PWAs 能够离线职业,並且在网络复苏时能够同步最新数据。

当今还处于 PWA 的最先,但曾经有
过多得逞案例

PWA 技能近些日子被 Firefox,Chrome
和其他基于Blink内核的浏览器协助。微软正在着力在Edge浏览器上落到实处。Apple未有动作
although there are promising comments in the WebKit five-year
plan。幸运的是,浏览器扶助对于
PWA 就像不太重大…

一、什么是PWA

预备相应的Html和Css

此间要留意Html绝对的尾部,这里能够用到地方自定义图标下载的音信。别的一些的Html和Css能够自己定制。

 <link rel="manifest" href="manifest.json">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="application-name" content="demo">
 <meta name="apple-mobile-web-app-title" content="demo">
 <meta name="msapplication-starturl" content="/">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="icon" href="icon.png" type="image/png" />
 <link rel="stylesheet" href="/css/main.css">

小结

透过本节对渐进式Web应用的牵线,相信我们对PWA是怎么着已经有了主导的认知。PWA有没有必要顾忌有无网络的特征,并持有独立入口与单身的护卫机制。新职业的推出很也许会带着
Web 应用在移动装备上浴火重生。所以知足 PWA
模型的前端控件,如纯前端表格控件SpreadJS,将逐步改为活动操作系统的一等平民,并将向Native
APP发起挑战。

在下节中大家将带您合营去拜会,PWA的法规是什么,以至它到底是哪些做事的,敬请期待。

1 赞 1 收藏
评论

4858美高梅 12

PWAs 是稳中求进加强的

你的app依然能够运作在不援助 PWA
本领的浏览器里。客商不可能离线访谈,不过其余效用都像原本近似未有影响。综合利弊得失,未有理由不把您的
app 改革为 PWA。

Progressive  Web  App
, (渐进式加强 WEB 应用)
简单称谓 PWA
,是擢升WebApp的心得的大器晚成种新措施,能给客商原生应用的体会。

添加Service Workers

后生可畏:在对应的Html引进main.js
main.js的关键内容

(function () {
    if (navigator.serviceWorker != null) {
        navigator.serviceWorker.register('/service-worker.js') // 注册相应的service-worker.js,路径根据项目自定义
            .then(function (registration) {
                console.log('Registered events at scope: ', registration.scope);
            });
    }
    if (!navigator.onLine) {
        // 离线时相应的操作...
    }
})()

二:加多关键的service-worker.js文件
第生龙活虎大家须求领会Service Worker是怎么。ServiceWorker,它其实正是浏览器提供的JavaScript
API,那组API的机能自然是一定丰裕了。当中最重大的功用有:对网页及其能源的离线缓存,对浏览器央浼的阻拦。
Service Worker的生命周期:
改变你的网址,入门教程。Service Worker具备二个全然独立于Web页面的生命周期。
1、Service Worker在你的网页注册后生效,浏览器会运转安装(install)进度
2、安装进程,浏览器会缓存一些静态财富,全数静态财富被缓存成功,ServiceWorker就设置成功
3、Service Worker激活(activate),在这里风姿浪漫等第,你还能进步三个ServiceWorker的本子。然后Service Worker会接管页面。
4、ServiceWorker接管界面后,它或然有二种情况:要么被结束以节本省存,要么会管理fetch和message事件。
以上正是ServiceWorker生命周期流程。能够翻开更详尽的新闻

service-worker.js代码编写

const
    version = '1.1.0', 
    CACHE = version + '::pwa-sqz', // cache版本,可以迭代更换
    installFilesEssList = [   // 缓存的文件目录
        '/index.html',
        '/manifest.json',
        '/css/main.css',
        '/js/main.js',
        'pwa-fonts.png',
        '/icon.png',
        '/offline.html'
    ]

设置阶段(install)

self.addEventListener('install', event => {
    console.log('install' + event)
    event.waitUntil(
        caches.open(CACHE)
            .then(cache => {
                cache.addAll(installFilesEssList)  //将目录文件进入缓存
            })
            .then(() => self.skipWaiting())
    )
})

激活阶段(activate)

self.addEventListener('activate', event => {
    console.log('activate' + event)
    event.waitUntil(
        caches.keys()
            .then(keylist => {
                return Promise.all(
                    keylist
                        .filter(key => key !== CACHE)
                        .map(key => caches.delete(key))  //删除旧的缓存
                )
            }).then(() => self.clients.claim()))
})

fetch阶段

self.addEventListener('fetch', event => {
    if (event.request && event.request.method !== 'GET') {
        return
    }
    event.respondWith(
        caches.open(CACHE)
            .then(cache => {
                return cache.match(event.request)
                    .then(response => {
                        if (response) {
                            console.log('cache fetch: ' + event.request.url)  //打印请求地址信息
                            return response
                        }
                        return fetch(event.request)  //fetch
                            .then(req => {
                                if (req.ok) cache.put(event.request, req.clone());
                                return req
                            })
                            .catch() //离线(offline)
                    })
            })
    )
})

不只是 Apps

Google 引领了 PWA
的大器晚成多种动作,所以大多数课程都说哪些从零早先营造二个依照Chrome,native-looking mobile
app。可是并不是独有特殊的单页应用可以PWA化,也不须求一定遵照 material
interface design guidelines。大超多网址都能够在数钟头内完毕 PWA
化。那包蕴你的 WordPress站点也许静态站点。

PWA
本质上是 Web App ,依靠一些新本事也具有了Native
App的有的表征,兼具 Web App和Native App的长处。

缓存更新

service-worker.js代码中

const
    version = '1.1.0', 
    CACHE = version + '::pwa-sqz', // cache版本,可以迭代更换

改过version( 如 ‘1.1.1’ )即能够立异

示范代码

演示代码能够在https://github.com/sitepoint-editors/pwa-retrofit找到。

代码提供了三个归纳的多少个页面包车型客车网址。个中包括部分图纸,一个样式表和二个main
javascript
文件。那么些网址能够运作在具有今世浏览器上(IE10+卡塔 尔(英语:State of Qatar)。要是浏览器支持 PWA
技巧,当离线时客商能够浏览他们前边看过的页面。

运营代码前,确定保障 Node.js 已经安装,然后再命令行里运转服务:

node ./server.js [port]

[port]是可配置的,默感觉 8888。展开 Chrome
大概其余基于Blink内核的浏览器,举个例子 Opera 大概 Vivaldi,然后输入链接
http://localhost:8888/(也许你内定的某部端口卡塔 尔(阿拉伯语:قطر‎。你也能够张开开荒者工具看一下各种console音讯。

4858美高梅 13

浏览主页,只怕其余页面,然后用以下任一艺术使页面离线:

  1. 按下 Cmd/Ctrl + C ,停止 node 服务器,或者

  2. 在开采者工具的 Network 或者 Application – Service Workers
    栏里点击 offline 选项。

再次浏览任意以前浏览过的页面,它们还能够浏览到。浏览二个事先未有看过的页面,你会看出三个专程的离线页面,标志“you’re
offline”,还可能有二个您能够浏览的页面列表:

4858美高梅 14

1.1 
PWA
的 主要特色

查看Demo

这次测量试验源代码github地址:
pwa-demo。欢迎star。
源代码运营步骤

node ./server.js 8888

端口可以自定义(暗中认可端口默感觉 9998)

延续手提式有线电话机

你也可以通过 USB 连接你的安卓手提式无线电话机来预览示例网页。在开拓者工具中开拓
Remote devices 菜单。

4858美高梅 15

在左侧接收 Settings ,点击 Add Rule 输入 8888
端口。你能够在你的手机上开发Chrome,展开
http://localhost:8888/。

您能够点击浏览器菜单里的 “Add to Home
screen”。浏览几个页面,浏览器会提醒你去安装。那三种方法都足以成立一个新的Logo在你的主屏上。浏览多少个页面后关闭Chrome,断开设备连接。你还是得以张开
PWA Website app —
你会看见一个起动页,何况能够离线访问在此以前你探望过的页面。

将你的网站改革为多少个 Progressive Web App 总共有多个供给步骤:


可相信 
      (
Reliable ) –
尽管在不安定的网络景况下,也能须臾间加载并显示

测试

Lighthouse是Chrome浏览器上的举路程序,能够用来测试PWA,并提供有关的精耕细作方案。在chrome应用公司安装完Lighthouse后,张开Lighthouse的Generate
report实行测验。
页面效果:

4858美高梅 16

home

4858美高梅 17

about

4858美高梅 18

contact

用Lighthouse测试效果:

4858美高梅 19

测验效果

内部仍是可以提醒某些错误消息。
上边还会有pwa一些推荐介绍阅读:
Notification with Service Workers push
events
PWA新手教程:手把手教您塑造自个儿的网页“小程序”
下一代 Web 应用模型 —— Progressive Web
App

参谋资料
4858美高梅,什么是
PWA
你的第多个 Progressive Web
App
后进 Web 应用模型 —— Progressive Web
App
pwa-retrofit
Service Worker 入门 – PWA 强重视于 ServiceWorker
用人话来说课一下 Service Worker 和
PWA
PWA新手教程:手把手教您制作本人的网页“小程序”

第一步:开启 HTTPS

是因为部分远近盛名的由来,PWAs 须要 HTTPS 连接。

HTTPS 在演示代码中并不是必需的,因为 Chrome 允许利用 localhost 恐怕其余127.x.x.x 之处来测验。你也得以在 HTTP 连接下测量试验你的 PWA,你需求动用
Chrome ,何况输入以下命令行参数:

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


快 
   (
法斯特 ) –
火速响应,并且 动漫平滑通畅

其次步:创立几个 Web App Manifest

manifest 文件提供了部分大家网址的音信,举个例子 name,description
和必要在主屏使用的Logo的图样,运行屏的图样等。

manifest文件是一个 JSON
格式的文本,位于你项目标根目录。它必须用Content-Type: application/manifest+json
或者 Content-Type: application/json如此那般的 HTTP
头来央求。那一个文件能够被命名称为其它名字,在演示代码中她被取名称叫
/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"           : "logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

在页面包车型大巴<head>中引入:

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

manifest 中重大质量有:

  • name —— 网页呈现给客商的意气风发体化名称
  • short_name —— 当空间不足以显示姓名时的网站缩写名称
  • description —— 关于网址的详细描述
  • start_url —— 网页的最先 相对 U昂CoraL(比方 /
  • scope —— 导航范围。比方,/app/的scope就限定 app 在这里个文件夹里。
  • background-color —— 运维屏和浏览器的背景颜色
  • theme_color ——
    网址的主旨颜色,日常都与背景颜色相近,它能够影响网址的体现
  • orientation —— 首选的显得方向:any, natural, landscape,
    landscape-primary, landscape-secondary, portrait,
    portrait-primary, 和 portrait-secondary
  • display —— 首要推荐的呈现格局:fullscreen,
    standalone(看起来疑似native
    app),minimal-ui(有简化的浏览器调控选项) 和 browser(常规的浏览器
    tab)
  • icons —— 定义了 src URL, sizestype的图片对象数组。

MDN提供了完全的manifest属性列表:Web App Manifest
properties

在开辟者工具中的 Application tab 左边有 Manifest
选项,你能够作证你的 manifest JSON 文件,并提供了 “Add to homescreen”。

4858美高梅 20



粘性 
 (
Engaging ) –
客户能够增进到桌面和抽出公告

其三步:制造三个 Service Worker

Service Worker
是阻止和响应你的网络央求的编制程序接口。那是三个坐落你根目录的叁个独门的
javascript 文件。

你的 js 文件(在示范代码中是 /js/main.js卡塔 尔(英语:State of Qatar)能够检查是或不是扶持 ServiceWorker,而且注册:

if ('serviceWorker' in navigator) {

  // register service worker
  navigator.serviceWorker.register('/service-worker.js');

}

生机勃勃旦您不须求离线作用,能够简简单单的始建一个空的 /service-worker.js文本 ——
顾客会被升迁安装你的 app。

Service Worker
很复杂,你能够修正示例代码来到达和睦的目标。那是一个正式的 web
worker,浏览器用三个独立的线程来下载和施行它。它未有调用 DOM 和别的页面
api
的力量,但她能够阻碍互连网央浼,包括页面切换,静态能源下载,ajax央浼所引起的网络央浼。

那就是急需 HTTPS
的最根本的缘由。想象一下第三方代码能够阻碍来自其余网址的 service
worker, 将是一个不幸。

service worker 主要有七个事件: installactivatefetch


沉浸式的客商体验

Install 事件

本条事件在app被设置时接触。它日常用来缓存必要的文书。缓存通过 Cache
API来实现。

第生机勃勃,大家来组织多少个变量:

  1. 缓存名称(CACHE卡塔 尔(阿拉伯语:قطر‎和版本号(version卡塔尔国。你的选择能够有八个缓存可是只好援引一个。大家设置了本子号,那样当我们有首要立异时,大家得以修正缓存,而忽视旧的缓存。

  2. 八个离线页面包车型地铁ULacrosseL(offlineURL卡塔尔国。当离线时顾客计划访谈早先未缓存的页面时,这么些页面会展现给客商。

  3. 三个独具离线作用的页面供给文件的数组(installFilesEssential卡塔 尔(英语:State of Qatar)。这么些数组应该满含静态财富,举个例子CSS 和 JavaScript
    文件,但作者也把主页面(/卡塔 尔(阿拉伯语:قطر‎和Logo文件写进去了。若是主页面能够八个U兰德酷路泽L访谈,你应该把他们都写进去,举例//index.html。注意,offlineURL也要被写入那么些数组。

  4. 可选的,描述文件数组(installFilesDesirable卡塔尔。那么些文件都很会被下载,但只要下载失利不会虎头蛇尾安装。

// configuration
const
  version = '1.0.0',
  CACHE = version + '::PWAsite',
  offlineURL = '/offline/',
  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    'logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    'logo/logo016.png',
    'hero/power-pv.jpg',
    'hero/power-lo.jpg',
    'hero/power-hi.jpg'
  ];

installStaticFiles()方法添Gavin件到缓存,这么些法子用到了基于 promise的
Cache
API。当必要的文书都被缓存后才会生成再次来到值。

// install static assets
function installStaticFiles() {

  return caches.open(CACHE)
    .then(cache => {

      // cache desirable files
      cache.addAll(installFilesDesirable);

      // cache essential files
      return cache.addAll(installFilesEssential);

    });

}

最终,大家抬高install的事件监听函数。
waitUntil办法确定保障全部代码施行达成后,service worker 才会进行install。实践 installStaticFiles()办法,然后推行
self.skipWaiting()方法使service worker进入 active状态。

// application installation
self.addEventListener('install', event => {

  console.log('service worker: install');

  // cache core files
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );

});

 沉浸式特点是只体现内容区域,没有状态栏,导航栏,工具栏等

Activate 事件

当 install完成后, service worker
步向active状态,这几个事件马上执行。你恐怕无需得以达成这些事件监听,可是示例代码在那删除老旧的失效缓存文件:

// clear old caches
function clearOldCaches() {

  return caches.keys()
    .then(keylist => {

      return Promise.all(
        keylist
          .filter(key => key !== CACHE)
          .map(key => caches.delete(key))
      );

    });

}

// application activated
self.addEventListener('activate', event => {

  console.log('service worker: activate');

    // delete old caches
  event.waitUntil(
    clearOldCaches()
    .then(() => self.clients.claim())
    );

});

注意,最后的self.clients.claim()主意设置自身为active的service worker。

 沉浸式是本着实用型和效能型而言

Fetch 事件

当有网络必要时那么些事件被触发。它调用respondWith()艺术来勒迫 GET
乞求并赶回:

  1. 缓存中的一个静态财富。

  2. 如果 #1 失败了,就用 Fetch
    API(那与
    service worker 的fetch
    事件不要紧卡塔尔国去互联网乞请这么些财富。然后将那个财富投入缓存。

  3. 如果 #1 和 #2 都未果了,那就回到一个适当的值。

// application fetch network data
self.addEventListener('fetch', event => {

  // abandon non-GET requests
  if (event.request.method !== 'GET') return;

  let url = event.request.url;

  event.respondWith(

    caches.open(CACHE)
      .then(cache => {

        return cache.match(event.request)
          .then(response => {

            if (response) {
              // return cached file
              console.log('cache fetch: ' + url);
              return response;
            }

            // make network request
            return fetch(event.request)
              .then(newreq => {

                console.log('network fetch: ' + url);
                if (newreq.ok) cache.put(event.request, newreq.clone());
                return newreq;

              })
              // app is offline
              .catch(() => offlineAsset(url));

          });

      })

  );

});

末了这几个offlineAsset(url)格局通过多少个帮助函数重回三个相宜的值:

// is image URL?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {

  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);

}


// return offline asset
function offlineAsset(url) {

  if (isImage(url)) {

    // return image
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      { headers: {
        'Content-Type': 'image/svg+xml',
        'Cache-Control': 'no-store'
      }}
    );

  }
  else {

    // return page
    return caches.match(offlineURL);

  }

}

offlineAsset()措施行检查查是还是不是是一个图形央浼,如若是,那么再次来到一个包罗“offline” 字样的 SVG。倘诺不是,再次来到 offlineURL 页面。

开采者工具提供了翻看 Service Worker 相关音信的选项:

4858美高梅 21

在开垦者工具的 Cache Storage
选项列出了颇负当前域内的缓存和所包含的静态文件。当缓存更新的时候,你能够点击左下角的基本功代谢按键来更新缓存:

4858美高梅 22

不出意料, Clear storage 选项能够去除你的 service worker 和缓存:

4858美高梅 23

 优点是足以让客户停留时间较长,客户体验超轻易,更加好的递进转化

再来一步 – 第四步:创制多个可用的离线页面

离线页面能够是二个静态页面,来证实当前客户央浼不可用。不过,大家也能够在此个页面上列出能够访谈的页面链接。

main.js中我们得以行使 Cache API 。但是API
使用promises,在不支持的浏览器中会引起全部javascript运营拥塞。为了幸免这种场馆,我们在加载另三个
/js/offlinepage.js 文件早前必需检查离线文件列表和是或不是帮助 Cache API 。

// load script to populate offline page list
if (document.getElementById('cachedpagelist') && 'caches' in window) {
  var scr = document.createElement('script');
  scr.src = '/js/offlinepage.js';
  scr.async = 1;
  document.head.appendChild(scr);
}

/js/offlinepage.js locates the most recent cache by version name,
取到具有 UCR-VL的key的列表,移除全部无用 UPRADOL,排序全数的列表而且把她们加到
ID 为cachedpagelist的 DOM 节点中:

// cache name
const
  CACHE = '::PWAsite',
  offlineURL = '/offline/',
  list = document.getElementById('cachedpagelist');

// fetch all caches
window.caches.keys()
  .then(cacheList => {

    // find caches by and order by most recent
    cacheList = cacheList
      .filter(cName => cName.includes(CACHE))
      .sort((a, b) => a - b);

    // open first cache
    caches.open(cacheList[0])
      .then(cache => {

        // fetch cached pages
        cache.keys()
          .then(reqList => {

            let frag = document.createDocumentFragment();

            reqList
              .map(req => req.url)
              .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))
              .sort()
              .forEach(req => {
                let
                  li = document.createElement('li'),
                  a = li.appendChild(document.createElement('a'));
                  a.setAttribute('href', req);
                  a.textContent = a.pathname;
                  frag.appendChild(li);
              });

            if (list) list.appendChild(frag);

          });

      })

  });

 

开拓工具

倘诺您以为 javascript 调试困难,那么 service worker
也不会很好。Chrome的开垦者工具的 Application 提供了一应有尽有调节和测验工具。

你应当展开 逃匿窗口 来测量检验你的
app,那样在您关闭那个窗口之后缓存文件就不会保留下来。

最后,Lighthouse extension for
Chrome
提供了重重改进 PWA 的有用音讯。

1.2 
PWA
的 主要
技术

PWA 陷阱

有几点要求在乎:


离线可用     (
ServiceWorker )
 

URL 隐藏

我们的现身说法代码遮盖了 UWranglerL 栏,小编不推荐这种做法,除非你有三个单 url
应用,例如叁个游乐。对于大好多网址,manifest 选项 display: minimal-ui
或者 display: browser是最佳的精选。


主屏Logo     (
App Manifest )  

缓存太多

您能够缓存你网址的保有页面和富有静态文件。那对于三个小网址是行得通的,但那对于上千个页面包车型大巴重型网址实际吗?未有人会对你网址的具有内容都感兴趣,而装备的内部存款和储蓄器体量将是一个限量。尽管你像示例代码相通只缓存访谈过的页面和文书,缓存大小也会增高的相当的慢。

只怕你供给专一:

  • 只缓存重要的页面,相符主页,和多年来的篇章。
  • 不用缓存图片,摄像和别的大型文件
  • 时常删除旧的缓存文件
  • 提供二个缓存开关给客户,让顾客决定是还是不是缓存


通知 
     (
Push API & Notification API )  

缓存刷新

在示范代码中,客商在乞求互联网前先反省该文件是不是缓存。假诺缓存,就接受缓存文件。那在离线意况下很棒,但也象征在联网状态下,顾客拿到的可能不是流行数据。

静态文件,形似于图片和录像等,不会不经常转移的财富,做长日子缓存未有相当大的主题材料。你可以在HTTP
头里设置 Cache-Control 来缓存文件使其缓存时间为一年(31,536,000
seconds卡塔尔:

Cache-Control: max-age=31536000

页面,CSS和 script
文件会时常转移,所以您应该改设置二个十分的短的缓存时间比如 24
小时,并在联网时与服务端文件实行认证:

Cache-Control: must-revalidate, max-age=86400

译自 Retrofit Your Website as a Progressive Web
App

 

1.3 
PWA
的 DEMO
  

 

天气PWA

能够在活动设备上的
Chrome
浏览器 (version
> 52) 访问

 

 

 

4858美高梅 24

 

1.3.1
有网络的情形下,在
谷歌(Google卡塔尔国浏览器展开页面效果

 

4858美高梅 25  4858美高梅 26

 

 

4858美高梅 27  4858美高梅 28

 

1.3.
2
有互连网的景况下
,点击显示器上新变化的
天气应用程式Logo展开页面呈现效果

 

4858美高梅 29

 

此地能够看来张开的页面中
只展现内容区域
, 没有状态栏,导航栏,工具栏

 

1.3.3
无网络的景况下,在QQ浏览器张开

 

 

4858美高梅 30

 

 

 

 

 

1.3.4
无网络的景观下,在Google浏览器展开

 

 

4858美高梅 31

 

下拉刷新,会提示【
设备离线,加载历史数据

 

 

 

 

1.3.5
无互连网的情景下
,点击荧屏上生成的气象
应用程式图标

 

4858美高梅 32

 

下拉刷新,会提醒【
设备离线,加载历史数据

 

 

 仿照效法资料

  1. Progressive Web Apps
  2. 什么是PWA

 

二、什么是
Service
Worker
官方网址介绍

 


 
它是生机勃勃种 Web Worker  


 
它是多个外链的js文件,如 /sw.js


 
它是风流倜傥种特有的Web Worker,可以拦截网络央求


 
它一定要运维在HTTPS合同上


 
它还是能够接收推送新闻和 管理后台同步


 
它 生机勃勃但被登记就永恒存在,除非显示unregister


 
它 是
PWA
的核心

 

 

什么是Web
Worker?

当在HTML页面中推行脚本时,页面包车型客车事态是不可响应的,直到脚本已产生。
web
worker  是运作在后台的JavaScript,独立于任何脚本,不会影响页面的习性
。您能够持续做其它愿意做的职业:点击、选取内容等等,而当时web  worker在后台运营 .

 

浏览器平常有三类 web
Worker

Dedicated
Worker
:专项使用的worker,只好被创设它的
JS 访谈,创立它的页面关闭,它的生命周期就截止了。

Shared  Worker
:分享的
worker,能够被同朝气蓬勃域名下的JS访问,关联的页面都关门时,它的生命周期就结束了。

ServiceWorker :是事件驱动的
worker,生命周期与页面非亲非故,关联页面未关门时,它也能够退出,未有涉及页面时,它也得以运维,

 

2.1
Service  Worker 怎么着工作

4858美高梅 33

 

 

 

2.2
Service  Worker 兼容性

4858美高梅 34

单击能够查看详细的情况

 

2.3
瑟维斯  Worker 生命周期

 

4858美高梅 35

 

生命周期分为这么多少个情景
 


安装中
  ( installing
 
)


安装
后  (
installed
)


激活
中 
    (
activating
)


激活后   (
activated
)


废弃 
 ( redundant
)


安装
( installing  )

那些情景产生在 ServiceWorker 注册之后,表示开端安装,触发 install
事件回调钦命一些静态财富拓宽离线缓存。

install
事件回调中有五个章程:

event.waitUntil()
:传入三个 Promise
为参数,等到该 Promise 为 resolve 状态结束。

self.skipWaiting()
:self 是前段时间 context
的 global 变量,实行该方法表示强制当前处于 waiting 状态的 Service Worker
步向 activate 状态。


安装后(
installed
)

Service Worker
已经变成了设置,而且等待别的的 Service Worker 线程被关门。

 


激活(
activating ):

在此个情状下并未有被其它的
Service Worker 调节的客商端,允许当前的 worker
完成安装,並且杀绝了其余的 worker 以至涉及缓存的旧缓存财富,等待新的
Service Worker 线程被激活。

activate
回调中有四个点子:

event.waitUntil()
:传入贰个 Promise
为参数,等到该 Promise 为 resolve 状态甘休。

self.clients.claim()
:在 activate
事件回调中实行该措施表示收获页面包车型客车调整权,
那样之后打开页面都会动用版本更新的缓存。旧的 Service Worker
脚本不再调整着页面,之后会被结束。


激活后(
activated
)

在此个情景会管理activate 事件回调
(提供了改过缓存战略的机会)。并能够拍卖功用性的平地风波 fetch
(乞请)、 sync
(后台同步)、
push
(推送)。


扬弃状态
 
(
redundant
)

其后生可畏情景表示叁个Service Worker 的生命周期结束。

此处特别说惠氏(WYETH卡塔 尔(英语:State of Qatar)下,走入吐弃(redundant) 状态的缘由想必为这两种:

安装
(install) 失败

激活
(activating) 失败

新本子的
Service Worker 替换了它并变为激活状态

 

2.4
Service   Worker 注册

 

//index.html

if 
(
‘serviceWorker’
in
navigator
)
{
navigator
.serviceWorker.register(
‘/service-worker.js’
)
   
. then
(
function
(reg) 
{
console
.
log
(
‘Service
Worker registered’ ,
reg)
;
})
   
.catch( function 
(error) 
{
console
.
error
(
‘Error
registering  Service  Worker’ ,
error)
;
})
;
}

 

查看是不是注册成功

可以在
PC 上chrome 浏览器, 输入 chrome://inspect/#service-workers

4858美高梅 36

2.5
Service  Worker 安装

 

//
service-worker.js

 

self
.
addEventListener
(
‘install’

function
(event) 
{
return
self
.skipWaiting()
;
})
;

 

 

2.6
Service  Worker 调试

 


借助
Chrome 浏览器 debug

使用 Chrome
浏览器,能够由此步入调控台 Application -> Service Workers
面板查看和调整。如下图所示:

4858美高梅 37

 


查看
Service Worker 缓存内容

ServiceWorker 使用 Cache API 缓存只读能源,能够在 Chrome DevTools
上查看缓存的财富列表。

 4858美高梅 38

 

4858美高梅 39

 


网络追踪

 

经过
Service Worker 的 fetch 须求 Chrome 都会在 Chrome DevTools Network
标签页里评释出来,此中:

 


来自
Service Worker 的剧情会在 Size 字段中表明为 from ServiceWorker


ServiceWorker 发出的乞请会在
Name
字段中增加‘齿轮’
Logo。

 

4858美高梅 40

 


安卓真机
debug

 

2.7
其它
详细API

 

任何
详细API能够参照【参考资料】中的
1
和 6

 

 仿效资料

1.
Service
Wor k
e
r
s
Nigh t
l
y

2.
页面守护者:ServiceWorker

3.
PWA,盘算好了吗?

4.
PWA兼容性

5.
什么样开展
Service Worker
调节和测量试验

6.
网址渐进式加强体验(PWA)改正:ServiceWorker 应用详细明白

 

三、
应用程式Manifest 与增加到主显示屏

允许将站点加多至主显示器,是
PWA 提供的大器晚成项首要作用

3.1概念 manifest.json
配置加上到主显示器作用


创立 manifest.json
文件,并将它内置你的站点目录中


在有着页面引进该文件


能够在 Service Worker
中监听 beforeinstallprompt 事件做一些用到内的表现处理

 

在页面 head
区域丰裕如下内容:

<
link
rel= “manifest”
href=
“manifest.json”
/>

manifest.json

{
“name”
:
“Minimal
PWA” ,
“short_name”
:
“PWA
Demo” ,
“display”
:
“standalone”
,
“start_url”
:
“/”
,
“theme_color”
:
“#313131”
,
“background_color”
:
“#313131”
,
“icons”
:
[
   
{
“src”
:
“e.png”
,
“sizes”
:
“256×256”
,
“type”
:
“image/png”
}
 
]
}

 

在这里个manifest.json文件中,大家能够轻易得到这一个PWA的消息:

 


name
:定义此PWA的名称。


icons
:定义一文山会海的Logo以适应分化型号的设备。


theme_color
:主旨颜色(影响手提式有线电话机状态栏颜色卡塔尔国。


background_color
:背景颜色。


start_url
:运营地址。由于PWA实际上是叁个web页面,所以要求定义PWA
在运营时应该访谈哪里。


display
:“standalone”表示其以临近原生APP的全屏形式运维。

 

加多主显示器效果

 

4858美高梅 41  4858美高梅 42

 

 

3.2装置 IOS Safari
上的增多至主显示屏成分

 

运用Logo:
<
link
rel= “apple-touch-icon”
href=
“apple-touch-icon.png”
>
启航画面:
<
link
rel= “apple-touch-startup-image”
href=
“launch.png”
>
利用名称:
<
meta
name= “apple-mobile-web-app-title”
content=
“Todo-PWA”
>
全屏效果:
<
meta
name= “apple-mobile-web-app-capable”
content=
“yes”
>
安装景况栏颜色:
<
meta
name= “apple-mobile-web-app-status-bar-style”
content=
“#fff”
>

 

 

 

 

3.3 设置window10贴片Logo

<
meta
name= “msapplication-TileImage”
content=
“images/logo/144×144.png”
>
<
meta
name= “msapplication-TileColor”
content=
“#2F3BA2”
>

3.4在线生成
manifest.json
文件


https://app-mani
f
est.firebaseapp.com/


https://tomitm.github.io/appmanifest/


https://brucelawson.github.io/manifest/

 

在概念好 manifest.json
文件后,我们得以经过Chrome的开辟者工具看见详细的从头到尾的经过:

4858美高梅 43

 

 仿效资料

  1. Web
    App
    Manifest

  2. manifest.json
    简介

 

 

 

 

四、
App
Shell

App
Shell,看名称就会想到其意义,正是“壳”的意趣,也得以知道为“ 骨架屏
”,说白了正是在内容尚未加载完全的时候,优先呈现页面包车型地铁结构、占位图、核心和背景颜色等,它们都是风姿洒脱对被强缓存的html,css和javascript。

 

要用好App
Shell,就不得不确定保证那部分的财富被ServiceWorker缓存起来。我们在集体代码的时候,可以事先实现App
Shell的局地,然后把那部分代码分别打包营造出来。

 

4.1 优势


始终连忙的笃定质量


有如本机同样的互动


数据的经济使用

 

 仿照效法资料

  1. App
    Shell
    模型

 

 

五、
使用Offine-Plugin把网址晋级成
PWA

 仿效资料

  1. offline-plugin

  2. offline-plugin
    DEMO

  3. 运用offline-plugin搭配webpack轻易达成PWA

 

六、
与PWA相关的开源框架

6.1 Lavas

依靠 Vue 的 PWA
解决方案,接济开辟者急忙搭建 PWA 应用,化解接入 PWA 的各个难题

4858美高梅 44

 

 参谋资料

  1. Lavas

  2. Lavas
    GitHub

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有