创建一个非常简单的离线页面,离线存储

选拔 Service worker 创造一个格外简单的离线页面

2016/06/07 · JavaScript
· 1 评论 · Service
Worker

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:Dean
Hume。欢迎参与翻译组。

让大家想像以下景况:大家那儿在一辆通往农村的列车上,用移动设备看着一篇很棒的稿子。与此同时,当您点击“查看越来越多”的链接时,火车忽然进入了隧道,导致运动装备失去了互连网,而
web 页面会呈现出类似以下的始末:

图片 1

那是一对一令人悲伤的经验!幸运的是,web
开发者们能透过某个新个性来创新那类的用户体验。小编多年来直接在折腾 ServiceWorkers,它给 web 带来的无尽大概性总能给小编惊喜。Service Workers
的优质特质之一是允许你检查和测试互联网请求的风貌,并让您作出相应的响应。

在那篇文章里,作者打算用此性情检查用户的此时此刻网络连接情形,若是没连接则赶回二个特级简单的离线页面。尽管那是1个万分基础的案例,但它能给你带来启迪,让您明白运营并运行该脾性是何等的简便!假如您没精通过
Service Worker,作者提议你看看此 Github
repo,精晓越多相关的信息。

在该案例初步前,让我们先简单地看看它的行事流程:

  1. 在用户第一回访问大家的页面时,我们会安装 ServiceWorker,并向浏览器的缓存添加我们的离线 HTML 页面
  2. 然后,要是用户打算导航到另3个 web
    页面(同2个网站下),但此时已断网,那么大家将回来已被缓存的离线
    HTML 页面
  3. 不过,若是用户打算导航到其余二个 web
    页面,而此时互连网已再三再四,则能照常浏览页面

html5 离线存款和储蓄

选取Service worker完结加速/离线访问静态blog网站

2017/02/19 · JavaScript
· Service Worker

创建一个非常简单的离线页面,离线存储。原稿出处: Yang
Bo   

前些天很盛行基于Github
page和markdown的静态blog,格外适合技术的盘算和习惯,针对差别的言语都有局地美丽的静态blog系统出现,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的特点十二分适合做缓存来增长速度页面包车型客车走访,就接纳Service
worker
来促成加速,结果是除了PageSpeed,CDN那些大规模的服务器和网络加快之外,通过客户端达成了更好的拜访体验。

选择工具:VS二〇一三

让咱们初叶吧

若是你有以下 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(‘瑟维斯Worker
registration successful with scope: ‘, registration.scope);
}).catch(function(err) { // registration failed 🙁 // 注册失利 🙁
console.log(‘ServiceWorker 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‘。大家打算用那一个 瑟维斯 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
时,向缓存添加了离线页面。假如大家将代码分为几小块,可观察前几行代码中,小编为离线页面钦赐了缓存版本和ULX570L。即便你的缓存有例外版本,那么您只需立异版本号即可不难地解决缓存。在大约在第壹2
行代码,小编向这一个离线页面及其财富(如:图片)发出请求。在得到成功的响应后,大家将离线页面和血脉相通财富足够到缓存。

至今,离线页面已存进缓存了,大家可在需求的时等候检查索它。在同贰个 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),如:
此案例。

<!DOCTYPE html>
<html manifest="cache.manifest">       <!--manifest存储-->
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 离线存储  小应用</title>
</head>
<body>
1.在服务器如,apache 的httpd.conf 添加
AddType text/cache-manifest .manifest
2.顶部添加  manifest存储
3.编辑 cache.manifest

cache.manifest(文件名)
//以下是文件内容,缓存了一张图片
CACHE MANIFEST
2.png

</body>
</html>

加快/离线访问只需三步

  • 首页添加注册代码

JavaScript

<script> if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’); } </script>

1
2
3
4
5
<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’);
}
</script>
  • 复制代码

将封存到你的网站根目录下

  • 修改不缓存域名列表及离线状态页面

在你的sw.js中修改

JavaScript

const ignoreFetch = [ /https?:\/\/cdn.bootcss.com\//,
/https?:\/\/static.duoshuo.com\//,
/https?:\/\/www.google-analytics.com\//,
/https?:\/\/dn-lbstatics.qbox.me\//, ];

1
2
3
4
5
6
const ignoreFetch = [
  /https?:\/\/cdn.bootcss.com\//,
  /https?:\/\/static.duoshuo.com\//,
  /https?:\/\/www.google-analytics.com\//,
  /https?:\/\/dn-lbstatics.qbox.me\//,
];

打开Chrome Dev Tools->Source,看看本人的blog都引用了什么第叁方财富,各种加到忽略列表里。

图片 4

在根目录下添加offline.html,在尚未互连网且缓存中也并鸡时行使,效果如下:

图片 5

在根目录下添加offline.svg,在无互连网时图片财富请求重临该文件。

图片 6

拓展阅读

除此以外,还有多少个很棒的离线功效案例。如:Guardian 营造了2个颇具 crossword
puzzle(填字游戏)的离线
web 页面 –
因而,即便等待网络重连时(即已在离线状态下),也能找到一点乐趣。小编也推荐看看
Google Chrome Github
repo,它含有了成都百货上千见仁见智的
Service Worker 案例 – 个中有的选择案例也在那!

但是,假若您想跳过上述代码,只是想大约地通过3个库来拍卖相关操作,那么作者引进您看看
UpUp。这是七个轻量的剧本,能让您更自在地应用离线功效。

打赏援救自个儿翻译越来越多好小说,谢谢!

打赏译者

 html5 worker

增长速度效果

首页加快后,网络请求从16降为1,加载时间从2.296s降为0.654s,获得了一下加载的结果。

图片 7

基于webpagetest

查看测试结果

using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.Web;namespace Test_One{ [DataContract] public class User { [DataMember] public string Name { get; set; } [DataMember] public string Password { get; set; } [DataMember] public string Email { get; set; } }}

using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.ServiceModel.Web;using System.Text;namespace Test_One{ [ServiceContract] public interface IUser { [OperationContract] [WebInvoke(Method = "GET", UriTemplate = "getuser/{name}", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)] User GetUserData(string name); [OperationContract] [WebInvoke(Method = "POST", UriTemplate = "checkuser", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)] User CheckUserData(User user); }}

using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.ServiceModel.Web;using System.Text;namespace Test_One{ // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together. // NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging. public class UserService : IUserService { public User GetUserData(string name) { User user = new User(); user.Name = name; user.Email = "test@123.com"; return user; } public User CheckUserData(User user) { user.Name += "-test"; return user; } }}

<?xml version="1.0"?><configuration> <appSettings> <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" /> </appSettings> <system.web> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5"/> </system.web> <system.serviceModel> <services> <service name="Test_One.UserService" behaviorConfiguration="RESTBehaviour"> <endpoint address="" binding="webHttpBinding" contract="Test_One.IUserService" behaviorConfiguration="ESEndPointBehavior"/> </service> </services> <behaviors> <serviceBehaviors> <behavior name="RESTBehaviour"> <serviceMetadata httpGetEnabled="true"/> <serviceDebug includeExceptionDetailInFaults="true"/> </behavior> <behavior> <!-- To avoid disclosing metadata information, set the values below to false before deployment --> <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/> <!-- To receive exception details in faults for debugging purposes, set the value below to true. Set to false before deployment to avoid disclosing exception information --> <serviceDebug includeExceptionDetailInFaults="false"/> </behavior> </serviceBehaviors> <endpointBehaviors> <behavior name="ESEndPointBehavior"> <webHttp/> </behavior> </endpointBehaviors> </behaviors> <protocolMapping> <add binding="basicHttpsBinding" scheme="https" /> </protocolMapping> <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" /> </system.serviceModel> <system.webServer> <!-- To browse web app root directory during debugging, set the value below to true. Set to false before deployment to avoid disclosing web app folder information. --> <directoryBrowse enabled="true"/> <!--<modules runAllManagedModulesForAllRequests="true"/>--> <modules runAllManagedModulesForAllRequests="true"> <remove name="WebDAVModule" /> </modules> <handlers> <remove name="WebDAV" /> </handlers> </system.webServer></configuration>

打赏支持小编翻译越来越多好作品,多谢!

任选一种支付办法

图片 8
图片 9

1 赞 3 收藏 1
评论

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
html5 worker 在服务器后台创建一个线程,加快程序运行。
<script>
    var w1 = new Worker('test.js');
    w1.postMessage('hi');
    w1.onmessage = function(ev){    //  把一部分数据处理交给  html5  worker处理,
        alert( ev.data );
    };
</script>
<!--
test.js 文件 

self.onmessage = function(ev){
    self.postMessage(ev.data + '妙味课堂');   // 对数据进行处理,再返回
};

-->
</body>
</html>

加速/离线原理探索

图片 10图片 11上学网址:

关于笔者:刘健超-J.c

图片 12

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

图片 13

 内容编排 语言输入 桌面提示

什么是 Service worker

图片 14

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当三个页面注册了一个
Service
worker
,它就能够注册一体系事件处理器来响应如网络请求和音讯推送那几个事件。Service
worker

能够被用来保管缓存,当响应二个互连网请求时得以配备为回到缓存依旧从互连网获取。由于Service
worker

是基于事件的,所以它只在处理这个事件的时候被调入内部存款和储蓄器,不用操心常驻内部存款和储蓄器占用财富导致系统变慢。

发表评论

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

网站地图xml地图