某某茶叶有限公司欢迎您!
金沙棋牌在线 > Web前端 > 离线模式数据访问DataSet和DataAdapter

离线模式数据访问DataSet和DataAdapter

时间:2019-12-29 06:38

迈向PWA!利用serviceworker的离线访问情势

2017/02/08 · JavaScript · PWA

本文小编: 伯乐在线 - pangjian 。未经笔者许可,防止转发!
款待插手伯乐在线 专栏编辑者。

Wechat小程序来了,能够行使WEB本事在Wechat营造多少个存有Native应用经历的行使,产业界特别看好这种情势。不过你们或者不知底,Google早就有像样的规划,以至档次越来越高。那就是PWA(渐进式加强WEB应用)。
PWA有以下两种性格:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线技艺)
  • Re-engageable(推送布告才具)

不无那一个特点都以“文雅降级、渐进加强的”,给支持的装置更好的心得,不扶助的配备也不会更差。那就和Wechat小程序这种倒霉设计的向来不相同之处。

本博客也在向着PWA的方向迈进,第一步笔者选拔了Offline,也便是离线技艺。能够让客商在未曾网络连接的时候还是能采取部分服务。这一个工夫运用了ServiceWorker技巧。

贯彻思路正是,利用service worker,另起一个线程,用来监听全部网络诉求,讲曾经号令过的数码放入cache,在断网的情况下,直接取用cache里面包车型客车财富。为倡议过的页面和图表,显示三个私下认可值。当有互联网的时候,再重新从服务器更新。
金沙棋牌在线 1
代码这里就不贴了,今后只怕会特意写意气风发篇来详细介绍ServiceWorker,有意思味的可以直接参考源码。
注册起来也十分有益

JavaScript

// ServiceWorker_js (function() { 'use strict'; navigator.serviceWorker.register('/sw.js', {scope: '/'}).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); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    'use strict';
    navigator.serviceWorker.register('/sw.js', {scope: '/'}).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);
    });
 
})();

金沙棋牌在线,这里必要专一的是,sw.js所在的目录要大于它的垄断范围,也正是scope。我把sw.js献身了根目录来决定总体目录。

接下去看看大家的终极效果呢,你也可以在大团结的浏览器下断网尝试一下。当然有生机勃勃对浏览器近些日子还不援助,举个例子有名的Safari。

引入

PWA(渐进式网页应用)对于关心新技术得同学或然已不素不相识。14年于今,其使用比不上应有的那么周围,最大的障碍:在iOS平台贫乏支撑,这两日已被打破 —— Safari本事预览版已经私下认可开启 Service Worker。

从开辟者角度,贫乏叁个开箱即用的方案,且专门的职业本身在高速进步,则是技巧职员选取观看的显要原因。本文将以专门项目海报为例,介绍通过 workbox 工具, 飞快为项目启用 PWA 中离线天性的主意,甚至本事总括。

本文是《PWA学习与施行》类别的第三篇小说。

 

离线有缓存景况

金沙棋牌在线 2

workbox介绍

workbox 是用来落到实处网页应用离线化的塑造筑工程具,通过转移的 service worker 文件,让您的离线静态能源管理攻略得以在用户端达成。由于 service worker 自个儿是急忙发展标准,且顾客端帮衬程度不等,通过调用 workerbox 的 API,能够最大程度的隐敝那几个包容难题,从这几个下边掌握,有一点像 jQuery 在 ie 时期的效劳,差别是前面一个化解的是 service work 运行条件的宽容性难题,而 jQuery 消逝的事浏览器包容性难点。

workbox 自身集成了常用的五套缓存计谋

Cache only;

Cache first, falling back to network;

Cache, with network update;

Network only;

Network first, falling back to cache

政策详细情形以至 API 可参照文档「 」这里不再赘述。

workbox 底层整合了sw-precache , sw-toolbox 等工具,对于熟稔那一个工具的同桌,领会接口和各种调查难题时应有会轻易些。

金沙棋牌在线 3

Default.aspx

离线无缓存意况

展览会示二个暗许的页面

金沙棋牌在线 4

-EOF-

打赏扶持本人写出越来越多好小说,谢谢!

打赏小编

构成专项海报

原稿中此处为链接,暂不帮衬搜集

能够见到,专门项目海报归属Mini网页应用,本人并未很复杂的营造进度,所以自身选拔gulp作为营造筑工程具。

直属海报达成离线化,其能源可分为三类:

1、应用本身逻辑和体裁能源做预缓存(precaching):在页面加载成功后就缓存到 Cache Storage,之后只有计划新版,都将从缓存读取财富

金沙棋牌在线 5

2、cdn库文件使用运行时缓存(runtime caching),读取时利用缓存优先(cache first)计策:使用到届期候从互联网加载,第2回起从缓存加载

  {
      urlPattern : 'https://vendor-Url/(.*)',
      handler: 'cacheFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    },
    {
      urlPattern : 'https://CDN-Url/(.*)',
      handler: 'cacheFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    }

3、哀告接口的数码接纳运行时缓存(runtime caching),互连网优先政策(network first):优先通过互联网读取,断网后从缓存读取,用于贯彻离线浏览(不可提交)

  {
      urlPattern : 'https://API-Url/(.*)',
      handler: 'networkFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    }

全体的 gulp task 可参照布局「 」

PWA作为二零一五年最销路广的本事概念之朝气蓬勃,对晋级Web应用的安全、质量和体会有着很大的意思,极其值得大家去领会与读书。

金沙棋牌在线 6金沙棋牌在线 7View Code

打赏扶植作者写出越多好作品,感激!

任选蓬蓬勃勃种支付办法

金沙棋牌在线 8 金沙棋牌在线 9

1 赞 1 收藏 评论

其余场景

对此进一步扑朔迷离的档次,只怕 workbox 提供的缓存攻略不可能满意你的必要,那就须要协和定制一些路由逻辑。

对于复杂的崭新项目,则足以考虑直接拿 lavas 生成脚手架,裁减最早开销,不过认为后续遭受标题,这几个“省”下的大运照旧要还回去的。

本连串文章《PWA学习与实践》会慢慢拆除PWA背后的种种工夫,通过实例代码来说授这么些工夫的应用措施。也多亏因为PWA中技艺点不菲、知识细碎,由此小编在读书进度中,进行了整理,并现身了《PWA学习与实施》类别小说,希望能带大家精细入微摸底PWA中的各种技术。对PWA感兴趣的爱侣招待关切。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <style type="text/css">
        .style1
        {
            width: 62px;
        }
        .style2
        {
            width: 60%;
        }
        .style3
        {
            width: 968px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="0" cellspacing="0" >
        <tr>
            <td colspan="2">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/header.bmp" />
            </td>
        </tr>
        <tr>
            <td class="style1">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/left.bmp" />
            </td>
            <td valign="top" class="style3">
                    &nbsp;<asp:Image ID="Image3" runat="server" ImageUrl="~/right.bmp" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <table align="left" class="style2">
                        <tr>
                            <td>
                    <asp:Label ID="Label1" runat="server" style="font-size: medium"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;</td>
                        </tr>
                    </table>
                    &nbsp;</td>
        </tr>
    </table>
    <p>
        &nbsp;</p>
    </form>
</body>
</html>

关于作者:pangjian

金沙棋牌在线 10

庞健,金融IT男。 个人主页 · 我的篇章 · 5 ·   

金沙棋牌在线 11

总结

直属海报在开拓先前时代就已连接 workbox1.X,但寻思到项目作者还没步入稳固意况,其他方面技能标准和顾客端支持程度也不完备,并且缺少效果监察和控制措施。综合寻思低收入软危害点,一向未在临蓐条件启用此性情,而眼前随着 iOS 的协理和技艺逐步渐形成熟,项目中启用 PWA 的时机将趋近成熟。

将新技能引进实际项目后,理论上相应解决的问题是不是如预期得到减轻,解决效能如何?下生龙活虎篇将介绍通过在服务端依期记录 Lighthouse 跑分结果,来衡量优化作用的部分观念。

正文中的代码都足以在learning-pwa的sw-cache分支上找到(git clone后静心切换来sw-cache分支)。

Default.aspx.cs