澳门在线威尼斯官方 > 威尼斯澳门在线 > 入门教程,10分钟玩转PWA

原标题:入门教程,10分钟玩转PWA

浏览次数:88 时间:2019-09-15

第四步:成立可用的离线页面

离线页面能够是静态的HTML,一般用于提示客商眼下乞求的页面暂且不能够选择。然而,大家能够提供部分能够阅读的页面链接。

Cache API能够在main.js中采用。可是,该API使用Promise,在不扶助Promise的浏览器中会战败,全体的JavaScript试行会为此受到震慑。为了幸免这种情形,在走访/js/offlinepage.js的时候大家增添了一段代码来检查当前是还是不是在离线景况中:

/js/offlinepage.js 中以版本号为名称保存了不久前的缓存,获取具有UEscortL,删除不是页面包车型大巴UKoleosL,将这么些U兰德酷路泽L排序然后将有着缓存的USportageL映将来页面上:

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

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
38
39
40
41
42
43
44
45
// 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);
          });
      })
  });

关于PWA

PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,指标是由此多项新技巧,在平安、质量、体验等方面给客户原生应用的感受。而且无需像原生应用那样繁琐的下载、安装、晋级等操作。

此间表明下概念中的“渐进式”,意思是那些web应用还在不断地向上中。因为日前来讲,PWA还平昔不成熟到一挥而就的水准,想在中卫、品质、体验上达到规定的典型原生应用的效果依然有那一个的晋升空间的。一方面是营造PWA的工本难点,另一方面是眼下各大浏览器、安卓和IOS系统对于PWA的支撑和包容性还应该有待进步。

正文小编将从网址缓存、http须求拦截、推送到主屏等作用,结合实例操作,一步步引领大家飞快玩转PWA手艺。

第二步:创设三个应用程序清单(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: UEscortL范围。譬喻:若是您将“/app/”设置为UWranglerL范围时,那么些动用就能一向在这几个目录中。
  • 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,大小和花色。

Service 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;

}

}));

})

);

});

缓存刷新

身体力行代码中在倡导呼吁在此以前会先查询缓存。当客商处于离线状态时,那很好,可是若是顾客处于在线状态,那他只会浏览到比较老旧的页面。

各样能源举例图片和录像不会变动,所以一般都把那几个静态财富设置为长时间缓存。那个能源能够直接缓存一年(31,536,000秒)。在HTTP Header中,便是:

Cache-Control: max-age=31536000

1
Cache-Control: max-age=31536000

页面,CSS和本子文件也许变化的更频仍一些,所以你能够安装二个比十分的小的缓存超时时间(24钟头),并保管在顾客互联网连接恢复生机时再一次从服务器央求:

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

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

你也得以在每回网址公布时,通过更名的方法强制浏览注重新央求财富。

Service Worker

ServiceWorker是PWA的大旨技艺,它亦可为web应用提供离线缓存作用,当然不止如此,上边列举了一部分ServiceWorker的风味:

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

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

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

能向顾客端推送音讯

不能够直接操作 DOM

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

URL隐藏

当你的应用正是三个单UENCOREL的应用程序时(举个例子游戏),笔者建议你遮掩地址栏。除外的场所作者并不提议您隐蔽地址栏。在Manifest中,display: minimal-ui 或者 display: browser对于绝大大多地方来说丰硕用了。

小结

PWA技能正被广泛公司及开采者们关切,就算眼下各器械的支撑合营有待增长,但这么些都正在持续的立异发展。我也相信在不久的未来,PWA技巧会慢慢广泛普遍,为常见公司和顾客带来方便。本文和咱们一同享受了PWA的有关技能与实例操作,前面还恐怕会就信息推送、数据同步等作用做进一步斟酌交换。倘诺大家在念书PWA的进度中相遇其余标题,迎接一齐切磋调换。

开拓者工具

Chrome浏览器提供了一文山会海的工具来帮忙你来调治ServiceWorker,日志也会一贯呈今后调节台上。

您最棒利用匿超级模特式来进行支付职业,那样能够撤消缓存对开采的困扰。

最后,Chrome的Lighthouse推而广之也得认为你的渐进式Web应用提供一些更进一步新闻。

加上到主屏

PWA帮忙将web应用在主屏桌面上增加二个神速情势,以有益顾客飞速访问,同期晋级web应用重复访谈的概率。你恐怕会说,未来移动端上的浏览器效用列表里一般都提供了“增加到桌面”的法力呀,不过PWA与浏览器自带的充裕到桌面包车型客车落真实意况势不一样。

PWA无需客户特意去成效列表中动用那几个效应开关,而是在客商访问web应用时,直接在分界面中提醒贰个丰盛到主屏桌面包车型大巴横幅,从web应用角度来讲,那实则正是主动与被动的分别。

PWA达成该意义特别轻巧,只须求多个manifest.json文件,文件中顾客可以自定义应用的开发银行页面、模板颜色、Logo等情节。上边是本人的manifest.json文件设置,大家可作参照他事他说加以考察:

{

"short_name": "蝉知财富站",

"name": "蝉知能源站",

"icons": [

{

"src": "chanzhiicon.png",

"type": "image/png",

"sizes": "48x48"

},

{

"src": "192.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "512.png",

"type": "image/png",

"sizes": "512x512"

},

{

"src": "144.png",

"type": "image/png",

"sizes": "144x144"

}

],

"start_url": "/index.html",

"display": "standalone",

"background_color": "#2196F3",

"orientation": "landscape",

"theme_color": "#2196F3"

}

供给提醒的是,近期运动端IOS系统的支持并糟糕,安卓手提式有线电话机上须选择57本子以上的谷歌(Google)浏览器能够协助该功用,上边是作者在安卓手提式有线电话机上的操作演示:

威尼斯澳门在线 1加上到主屏

第一步:使用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

serviceworker的缓存功效

设置时,serviceworker将大家钦赐的静态能源开展缓存,你只怕会问,就算是实时的动态内容怎么做,大家不容许预先将具备的文书能源提前线指挥部定好,让serviceworker缓存。那将在涉及serviceworker的阻碍HTTP诉求响应的表征了。

serviceworker拦截http央求,首先去反省伏乞的财富在缓存中是否存在,倘使存在,则直接从缓存中调用,而且不怕是无互连网状态下,serviceworker也能调用缓存中的能源。如若缓存中从未须求的财富,则经过互联网去服务器上索求,并且在找到并响应时,serviceworker会将其存入缓存中,以备后一次再央浼时从来从缓存中调用。

威尼斯澳门在线 2serviceworker缓存流程

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

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;

}

);

})

);

});

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

威尼斯澳门在线 3serviceworker缓存调用威尼斯澳门在线 4缓存文件

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

威尼斯澳门在线 5serviceworker浏览器补助意况

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

2018/05/25 · 基本功技术 · PWA

原版的书文出处: Craig Buckler   译文出处:山葫芦城控件   

上篇文章我们对渐进式Web应用(PWA)做了有些焦点的介绍。

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

在这一节中,大家将介绍PWA的法规是哪些,它是哪些起先专门的学问的。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:入门教程,10分钟玩转PWA

关键词:

上一篇:威尼斯澳门在线:拖拽异步上传实现,拖拽上传

下一篇:没有了