渐进式Web应用（PWA）入门教程（下）

2018/05/25 · 基础技术 ·
PWA

初稿出处： Craig
Buckler   译文出处：葡萄城控件   

上篇文章大家对渐进式Web应用（PWA）做了一些基本的介绍。

渐进式Web应用（PWA）入门教程（上）

在这一节中，我们将介绍PWA的规律是何等，它是何等开头工作的。

渐进式Web应用（PWA）入门教程（上）

2018/05/23 · 基础技术 ·
PWA

初稿出处： Craig
Buckler   译文出处：葡萄城控件   

近年有关渐进式Web应用有不少谈论，有一对人还在猜忌渐进式Web应用是不是正是运动端以后。

但在那篇小说中本人并不会将渐进式APP和原生的APP实行相比较，但有一点是足以一定的，这三种APP的目的都以使用户体验变得更好。

活动端Web应用有成都百货上千名特别降价的概念令人应接不暇，但还好编写二个渐进式Web应用不是3个很不方便的事体。在那篇文章里将向您介绍怎么样把一个普普通通的网站转换到渐进式Web应用。你能够依照那篇作品一步一步地做，做完事后你的网站将能够完成离线访问，并且能够在桌面上创立该网站的图标。那么下边即将开头入门教程。

第一步：使用HTTPS

渐进式Web应用程序须求运用HTTPS连接。即使选择HTTPS会让你服务器的开销变多，但运用HTTPS能够让您的网站变得更安全，HTTPS网站在谷歌上的排行也会更靠前。

鉴于Chrome浏览器会暗中同意将localhost以及127.x.x.x地点视为测试地方，所以在本示例中您并不必要开启HTTPS。其它，出于调节和测试指标，您能够在运营Chrome浏览器的时候使用以下参数来关闭其对网站HTTPS的检查：

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

如何是渐进式Web应用？

渐进式Web应用是一种全新的Web技术，让Web应用和原生APP的感受相近或平等。

渐进式Web应用它能够横跨Web技术及Native
APP开发的缓解方案，对于开发者的优势如下：

1. 您只须求关爱W3C的Web标准，不用关切各样Native APP的代码。
2. 用户能够在安装使用从前先试用。
3. 在渐进式Web应用中，你不供给选取各样应用商店来散发应用，也不用关爱应用公布时意外的审核正式以及采纳内购的阳台抽成。此外，应用程序更新是机关举办的，无需用户交互，所以完全的施用体验对于用户来讲更为的平滑。
4. 渐进式Web应用的“安装”进度相当的慢，只须求在主显示器上添加二个图标即可。
5. 渐进式Web应用运转时能够彰显叁个窘迫的起步画面。
6. 您能够在渐进式Web应用中提供全体全屏体验的使用。
7. 透过系统通报等情势压实用户的粘性。
8. 渐进式Web应用将会在该地缓存需要的文本，所以渐进式Web应用会比平常的Web应用的属性更好。
9. 轻量级安装——你只须求缓存几百KB的数量即可。
10. 有着的数码传输必须选拔安全的HTTPS连接
11. 渐进式Web应用能够离线缓存数据，并且会在再一次连接互连网时再也联合数据。

其次步：创制二个应用程序清单（Manifest）

应用程序清单提供了和当下渐进式Web应用的连带音信，如：

• 应用程序名
• 描述
• 装有图片（包蕴主显示屏图标，运营显示器页面和用的图纸可能网页上用的图形）

精神上讲，程序清单是页面上用到的图标和核心等能源的元数据。

程序清单是二个位于您使用根目录的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” :
“72×72”, “type” : “image/png” }, { “src” : “/images/logo/logo152.png”,
“sizes” : “152×152”, “type” : “image/png” }, { “src” :
“/images/logo/logo192.png”, “sizes” : “192×192”, “type” : “image/png” },
{ “src” : “/images/logo/logo256.png”, “sizes” : “256×256”, “type” :
“image/png” }, { “src” : “/images/logo/logo512.png”, “sizes” :
“512×512”, “type” : “image/png” } ] }

程序清单文件建立完事后，你要求在各类页面上引用该文件：

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

以下属性在程序清单中时常应用，介绍表明如下：

• name: 用户看到的采用名称
• short_name: 应用短名称。当显示应用名称的地点不够时，将选拔该名称。
• description: 运用描述。
• start_url: 动用开端路径，相对路径，私下认可为/。
• scope: U酷路泽L范围。比如：如若你将“/app/”设置为U奔驰G级L范围时，那一个动用就会一向在那么些目录中。
• 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: 3个含有全体图片的数组。该数组中每种成分包括了图片的U索罗德L，大小和类型。

渐进式Web应用发展的现状

渐进式Web应用才刚刚早先发展，但实在在国内，某个网站已经实际开首PWA的施行了，例如：果壳网、豆瓣、天猫等平台。大概那时候聪明的你可能就会时有发生难题，那那些PWA不正是和微信小程序一样吧，对是那般，二者的指标是均等的，正是在移动端为用户提供丰裕轻量且与原生应用使用体验相近的“轻”应用。

但就当前来讲，PWA是谷歌主推的一项技术标准，Fire福克斯，Chrome以及部分基于Blink的浏览器已经支撑渐进式Web应用了，艾德ge上对渐进式Web应用的接济还在支付。Apple公司也意味会考虑在团结Safari帮衬PWA。可是那项功用已经进去了WebKit内核的五年安顿中。短时间来看，对浏览器包容性的支撑地方应当已经不算太大标题了。况且在如今，在不援救渐进式Web应用的浏览器中，你的利用也只是不恐怕运用渐进式Web应用的离线功能而已，除外的作用均能够平常使用。

而在微信那边，凭借庞大的用户基数和体积能或不可能与PWA分庭抗礼乃至笑到最终如今还不得而知。

其三步：创设3个 Service Worker

瑟维斯 Worker
是一个可编制程序的服务器代理，它能够阻碍恐怕响应网络请求。Service Worker
是位于应用程序根目录的二个个的JavaScript文件。

你须求在页面对应的JavaScript文件中注册该ServiceWorker：

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

假定您不需求离线的有关作用，您可以只成立三个 /service-worker.js文本，那样用户就足以一向设置您的Web应用了！

ServiceWorker那几个定义只怕相比难懂，它实在是2个做事在其余线程中的标准的Worker，它不可能访问页面上的DOM成分，没有页面上的API，可是足以阻挡全部页面上的网络请求，包涵页面导航，请求能源，Ajax请求。

地点正是选择全站HTTPS的重庆大学原因了。假诺你没有在你的网站中采取HTTPS，二个第二方的本子就能够从其余的域名注入他协调的ServiceWorker，然后篡改全部的呼吁——这无疑是十一分惊险的。

瑟维斯 Worker 会响应四个事件：install，activate和fetch。

以身作则代码

绝当先二分一课程都讲述的是什么样在Chrome上从零开始制作一个好像原生界面的使用。然则在那篇教程中，大家并不打算做2个单页面应用程序，所以在那大家也不必驾驭诸如Material
Design等知识。那么下边大家就直接看示例吧。

你能够从GitHub中收获本学科对应的以身作则代码。

本示例中提供了一个有两个网页的网站，多个CSS文件和2个JavaScript文件。这几个网站能够在有着的现代浏览器上健康工作（IE10+）。若是你的浏览器辅助渐进式Web应用，用户能够在离线状态下将会一向访问缓存中的页面。

要想运转此示例，请保管您早已安装了Node.js。并请打开命令行，使用以下命令来运转该示例：

node ./server.js [port]

以上命令中，[port]是可选部分，私下认可为8888。使用 Ctrl + C 即可甘休Web服务器。

打开基于Blink内核的浏览器（Opera，Vivaldi，Chrome），然后在地点栏中输入http://localhost:8888/（注意端口号是否正确），即可访问该示例。你可以打开开发者工具（F12 只怕 Cmd/Ctrl + Shift +
I）来查阅控制台消息。

翻看首页，也可以在页面上点击一下，然后利用以下方法进入离线情势：

当选Network标签或然Application -> Service Workers
标签下的“离线”选项。重新访问在此以前访问过的网页，之前网页依旧会加载：

Install事件

该事件将在使用设置到位后触发。大家一般在此间运用Cache
API缓存一些必不可少的公文。

率先，大家要求提供如下配置

1. 缓存名称（CACHE）以及版本（version）。应用能够有多个缓存存款和储蓄，可是在运用时只会选用在那之中叁个缓存存款和储蓄。每当缓存存款和储蓄有转变时，新的版本号将会钦点到缓存存款和储蓄中。新的缓存存款和储蓄将会作为当下的缓存存款和储蓄，以前的缓存存款和储蓄将会被作废。
2. 三个离线的页面地址（offlineU奥迪Q5L）：当用户访问了前边并未访问过的地方时，该页面将会来得。
3. 叁个含有了具有必须文件的数组，包蕴保持页面符合规律成效的CSS和JavaScript。在本示例中，小编还添加了主页和logo。当有例外的UPAJEROL指向同一个财富时，你也能够将这一个UXC90L分别写到那么些数组中。offlineU凯雷德L将会投入到那么些数组中。
4. 咱俩也足以将一些非供给的缓存文件（installFilesDesirable）。那么些文件在装置进度中校会被下载，但假诺下载失利，不会接触安装战败。

// 配置文件 const version = ‘1.0.0’, CACHE = version + ‘::PWAsite’,
offlineU大切诺基L = ‘/offline/’, installFilesEssential = [ ‘/’,
‘/manifest.json’, ‘/css/styles.css’, ‘/js/main.js’,
‘/js/offlinepage.js’, ‘/images/logo/logo152.png’ ].concat(offlineURL),
installFilesDesirable = [ ‘/favicon.ico’, ‘/images/logo/logo016.png’,
‘/images/hero/power-pv.jpg’, ‘/images/hero/power-lo.jpg’,
‘/images/hero/power-hi.jpg’ ];

installStaticFiles() 方法应用基于Promise的主意利用Cache
API将文件存款和储蓄到缓存中。

// 安装静态财富 function installStaticFiles() { return
caches.open(CACHE) .then(cache => { // 缓存可选文件
cache.addAll(installFilesDesirable); // 缓存必须文件 return
cache.addAll(installFilesEssential); }); }

最终，我们添加1个install的轩然大波监听器。waitUntil格局保险了service
worker不会设置直到其相关的代码被执行。那里它会举行installStaticFiles()方法，然后self.skipWaiting()主意来激活service
worker：

// 应用设置 self.add伊夫ntListener(‘install’, event => {
console.log(‘service worker: install’); // 缓存主要文件 event.waitUntil(
installStaticFiles() .then(() => self.skipWaiting()) ); });

连接移动端安装

除了在PC浏览器访问外，你也能够在移动装备上访问该示例。使用USB线缆将你的位移设备连接到电脑上，然后从右上角四个点菜单中开辟More
tools – Remote devices标签

点击左侧的Settings菜单，然后添加一条端口映射（Port Forwarding）的平整，将8888映射为localhost:8888，今后您能够一贯在手提式有线电话机打开Chrome然后访问http://localhost:8888 。

您能够利用浏览器的“添加到主显示屏”功效将如今网页添加到主显示器，在您拜访了多少个页面之后，浏览器会将这么些Web应用“安装”到您的设备上。浏览多少个页面，关闭Chrome并将配备与总结机断开连接，点击桌面上生成的图标，你会看到八个Splash页面，并且你能够继承浏览在此之前浏览过的页面。

Activate 事件

其一事件会在service
worker被激活时发出。你也许不须要那几个事件，但是在演示代码中，大家在该事件发生时将老的缓存全部清理掉了：

// 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()实施时将会把当下service
worker作为被激活的worker。

Fetch 事件
该事件将会在网络开端请求时发起。该事件处理函数中，大家能够使用respondWith()方法来威吓HTTP的GET请求然后归来：

1. 从缓存中取到的能源文件
2. 假诺第三步败北，财富文件将会从网络中应用Fetch API来博取（和service
   worker中的fetch事件非亲非故）。获取到的财富将会加盟到缓存中。
3. 要是第壹步和第贰步均退步，将会从缓存中回到正确的能源文件。

// 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)措施中应用了有的helper方法来回到正确的数量：

// 是或不是为图片地址? 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 重回离线能源 function offlineAsset(url) { if (isImage(url)) { //
重返图片 return new Response( ‘<svg role=”img” viewBox=”0 0 400 300″
xmlns=”http://www.w3.org/2000/svg"&gt;&lt;title&gt;offline&lt;/title&gt;&lt;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文件。其余请求将会回到
offlineUEvoqueL 页面。

Chrome开发者工具中的ServiceWorker部分提供了有关当前页面worker的音信。在那之中会显示worker中发生的失实，还是能够强制刷新，也可以让浏览器进入离线方式。

Cache Storage
部分例举了眼下有所曾经缓存的财富。你能够在缓存需求更新的时候点击refresh按钮。

小结

由此本节对渐进式Web应用的牵线，相信我们对PWA是什么已经有了大旨的认识。PWA有无需担心有无网络的特征，并具备独自入口与独立的有限支撑体制。新专业的推出很恐怕会带着
Web 应用在移动设备上浴火重生。所以满意 PWA
模型的前端控件，如纯前端表格控件SpreadJS，将逐年变为移动操作系统的一等国民，并将向Native
APP发起挑衅。

在下节中大家将带你一同去看望，PWA的原理是怎么着，以及它终归是何等工作的，敬请期待。

1 赞 1 收藏
评论

第4步：成立可用的离线页面

离线页面能够是静态的HTML，一般用于提醒用户日前恳请的页面权且无法选取。可是，我们可以提供部分能够阅读的页面链接。

Cache
API能够在main.js中应用。然则，该API使用Promise，在不扶助Promise的浏览器中会退步，全数的JavaScript执行会因而备受震慑。为了制止那种情景，在走访/js/offlinepage.js的时候我们添加了一段代码来检查当前是否在离线环境中：

/js/offlinepage.js 中以版本号为名称保存了不久前的缓存，获取具有USportageL，删除不是页面包车型的士U兰德昂科雷L，将那些U奥迪Q7L排序然后将兼具缓存的UQashqaiL浮今后页面上：

// 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); }); }) });

开发者工具

Chrome浏览器提供了一名目繁多的工具来扶助你来调节ServiceWorker，日志也会向来体未来控制台上。

你最棒应用匿超方式来开始展览开发工作，那样可防止除缓存对开发的滋扰。

最后，Chrome的Lighthouse扩大也足以为您的渐进式Web应用提供一些更上一层楼消息。

渐进式Web应用的宗旨

渐进式Web应用是一种新的技巧，所以选用的时候肯定要小心。也正是说，渐进式Web应用能够让您的网站在多少个小时内取得创新，并且在不援救渐进式Web应用的浏览器上也不会潜移默化网站的来得。

不过大家供给考虑以下几点：

URL隐藏

当你的施用就是三个单ULacrosseL的应用程序时（比如游戏），笔者建议您隐藏地址栏。除此而外的动静本人并不提议你隐藏地址栏。在Manifest中，display: minimal-ui 或者 display: browser对此超过二分之一情状的话丰富用了。

缓存过大

你不能够将你网站中的全部情节缓存下来。对于小部分的网站来说缓存全数内容并不是三个标题，不过一旦2个网站包蕴了上千个页面吗？很肯定不是全体人对网站中的全体剧情都感兴趣。存款和储蓄是有限量的，假若你将具备访问过的页面都缓存下来的话，缓存大小会增加额十分的快。

您能够这么制定你的缓存策略：

• 只缓存主要的页面，比如主页，联系人页面和多年来浏览小说的页面。
• 永不缓存任何图片，录制和大文件
• 定时清理旧的缓存
• 提供二个“离线阅读”按钮，那样用户就足以采纳须要缓存哪些内容了。

缓存刷新

示范代码中在提倡呼吁以前会先查询缓存。当用户处于离线状态时，那很好，可是假使用户处于在线状态，那他只会浏览到相比老旧的页面。

种种能源比如图片和录制不会转移，所以一般都把那么些静态财富设置为漫漫缓存。这么些能源能够直接缓存一年（31,536,000秒）。在HTTP
Header中，正是：

Cache-Control: max-age=31536000

页面，CSS和本子文件大概转变的更频仍一些，所以您能够设置三个比较小的缓存超时时间（24时辰），并保管在用户网络连接复苏时再次从服务器请求：

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

你也得以在历次网站发表时，通过更名的章程强制浏览珍视新请求能源。

小结

从那之后，相信你假若依照本文一步一步操作下来，你也足以神速把团结的Web应用转为PWA。在转为了PWA后，固然有接纳满足PWA
模型的前端控件的急需，你能够试试纯前端表格控件SpreadJS，适用于
.NET、Java 和移动端等楼台的报表控件一定不会令你失望的。

原稿链接：https://www.sitepoint.com/retrofit-your-website-as-a-progressive-web-app/

1 赞 1 收藏
评论