离线模式数据访问DataSet和DataAdapter,利用serviceworker的离线访问模式

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

2017/02/08 · JavaScript
· PWA

正文作者: 伯乐在线 –
pangjian
。未经小编许可,禁止转发!
欢迎出席伯乐在线 专栏撰稿人。

微信小程序来了,可以采取WEB技术在微信创设一个富有Native应用经验的施用,业界非凡看好那种方式。然而你们可能不知底,谷歌早已有近似的筹划,甚至层次更高。那就是PWA(渐进式增强WEB应用)。
PWA有以下三种特性:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线能力)
  • Re-engageable(推送通告能力)

怀有这么些特征都是“优雅降级、渐进增强的”,给接济的装备更好的感受,不协理的设施也不会更差。那就和微信小程序这种不良设计的有史以来不相同之处。

本博客也在向着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离线模式数据访问DataSet和DataAdapter,利用serviceworker的离线访问模式。所在的目录要当先它的支配范围,也就是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-

打赏协理自己写出越多好小说,谢谢!

打赏作者

结合专属海报

原文中此处为链接,暂不辅助采集

可以看看,专属海报属于小型网页应用,本身并未很复杂的打造进程,所以自己选拔gulp作为打造工具。

依附海报完结离线化,其资源可分为三类:

1、应用自身逻辑和样式资源做预缓存(precaching):在页面加载成功后就缓存到
Cache Storage,之后唯有陈设新版,都将从缓存读取资源

图片 5

2、cdn库文件使用运行时缓存(runtime caching),读取时使用缓存优先(cache
first)策略:使用到到时候从网络加载,第二次起从缓存加载

  {
      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

相关文章