迈向PWA!利用serviceworker的离线访问模式

2019-11-28 14:01栏目:龙电竞官网
TAG:

离线有缓存意况

图片 1

让大家起先吧

如果你有以下 HTML 页面。那固然可怜底蕴,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

跟着,让我们在页面里登记 Service Worker,这里仅创立了该对象。向正要的 HTML 里增添以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { // Registration was successful // 注册成功 console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( // 注册失败 :( console.log('瑟维斯Worker registration failed: ', err); }); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// Register the service worker
// 注册 service worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    // Registration was successful
    // 注册成功
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
    // registration failed :(
    // 注册失败 :(
    console.log('ServiceWorker registration failed: ', err);
   });
}
</script>

下一场,大家须求成立 Service Worker 文件并将其取名字为‘service-worker.js‘。大家希图用这一个 Service Worker 拦截任何网络央浼,以此检查网络的连接性,并依据检查结果向客户再次回到最切合的剧情。

JavaScript

'use strict'; var cacheVersion = 1; var currentCache = { offline: 'offline-cache' + cacheVersion }; const offlineUrl = 'offline-page.html'; this.addEventListener('install', event => { event.waitUntil( caches.open(currentCache.offline).then(function(cache) { return cache.addAll([ './img/offline.svg', offlineUrl ]); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'use strict';
 
var cacheVersion = 1;
var currentCache = {
  offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline-page.html';
 
this.addEventListener('install', event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          './img/offline.svg',
          offlineUrl
      ]);
    })
  );
});

在地点的代码中,大家在安装 Service Worker 时,向缓存加多了离线页面。借使大家将代码分为几小块,可看见前几行代码中,我为离线页面钦点了缓存版本和UENCOREL。假诺你的缓存有两样版本,那么你只需改正版本号就能够轻巧地清除缓存。在大概在第 12 行代码,小编向那么些离线页面及其财富(如:图片卡塔 尔(阿拉伯语:قطر‎发出乞请。在获得成功的响应后,大家将离线页面和有关能源丰裕到缓存。

前几日,离线页面已存进缓存了,我们可在必要的时等候检查索它。在同贰个 ServiceWorker 中,大家要求对无互连网时重临的离线页面增加相应的逻辑代码。

JavaScript

this.addEventListener('fetch', event => { // request.mode = navigate isn't supported in all browsers // request.mode = naivgate 并未收获全部浏览器的扶持 // so include a check for Accept: text/html header. // 因而对 header 的 Accept:text/html 举办核实 if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) { event.respondWith( fetch(event.request.url).catch(error => { // Return the offline page // 重临离线页面 return caches.match(offlineUrl); }) ); } else{ // Respond with everything else if we can // 重回任何大家能回来的事物 event.respondWith(caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
this.addEventListener('fetch', event => {
  // request.mode = navigate isn't supported in all browsers
  // request.mode = naivgate 并没有得到所有浏览器的支持
  // so include a check for Accept: text/html header.
  // 因此对 header 的 Accept:text/html 进行核实
  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              // 返回离线页面
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        // 返回任何我们能返回的东西
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

为了测验该意义,你能够使用 Chrome 内置的开垦者工具。首先,导航到您的页面,然后假若设置上了 ServiceWorker,就展开 Network 标签并将节流(throttling卡塔尔国改为 Offline。(译者注:若将节流设置为 Offline 没效果,则可通过关闭网络可能经过360康宁警卫幸免 Chrome 访谈互连网卡塔尔国

图片 2

风度翩翩旦您刷新页面,你应有能看见相应的离线页面!

图片 3

如若你只想大约地测验该意义而不想写任何代码,那么你能够访谈笔者已创立好的 demo。其余,上述任何代码能够在 Github repo 找到。

自己了然用在那案例中的页面很简短,但您的离线页面则决定于你自己!假设你想深刻该案例的内容,你可认为离线页面增多缓存破坏( cache busting卡塔 尔(英语:State of Qatar),如: 此案例。

关于PWA

PWA(Progressive Web App卡塔尔国, 即渐进式web应用。PWA本质上是web应用,目标是透过多项新才能,在安全、品质、体验等地点给客户原生应用的心得。并且无需像原生应用那样烦琐的下载、安装、升级等操作。

这里表达下概念中的“渐进式”,意思是其意气风发web应用还在再三地发展中。因为方今来讲,PWA还一贯不成熟到一挥而就的品位,想在平安、质量、体验上直达原生应用的功效依旧有这个的进步空间的。一方面是营造PWA的财力难题,另一面是当前各大浏览器、安卓和IOS系统对于PWA的帮忙和包容性还大概有待加强。

正文笔者将从网址缓存、http央浼拦截、推送到主屏等作用,结合实例操作,一步步引领大家比较快玩转PWA才干。

离线无缓存情形

会来得多个暗中同意的页面

图片 4

-EOF-

打赏扶助笔者写出越多好文章,多谢!

打赏小编

至于小编:刘健超-J.c

图片 5

前端,在路上... 个人主页 · 笔者的小说 · 19 ·     

图片 6

Service Worker

ServiceWorker是PWA的宗旨本事,它可感觉web应用提供离线缓存功能,当然不止如此,上边罗列了有的ServiceWorker的风味:

依靠HTTPS 情状,那是营造PWA的硬性前提。(LAMP遇到网址升级HTTPS建设方案卡塔尔

是壹个独自的 worker 线程,独立于前段时间网页进度,有谈得来单身的 worker context

可阻止HTTP央浼和响应,可缓存文件,缓存的公文能够在互联网离线状态时取到

能向客商端推送音信

不能够平素操作 DOM

异步完毕,内部大都以透过 Promise 实现

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:迈向PWA!利用serviceworker的离线访问模式