利用PWA特性实现离线化,离线模式数据访问DataSet和DataAdapter

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

2017/02/08 · JavaScript
· PWA

正文作者: 伯乐在线 –
pangjian
。未经小编许可,禁止转发!
利用PWA特性实现离线化,离线模式数据访问DataSet和DataAdapter。迎接加入伯乐在线 专栏撰稿人。

微信小程序来了,可以应用WEB技术在微信构建2个有所Native应用经验的利用,产业界十分看好那种格局。可是你们或然不精通,谷歌(Google)早已有相近的统一筹划,甚至层次更高。那正是PWA(渐进式增强WEB应用)。
PWA有以下二种特色:

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

全数那些特点都以“优雅降级、渐进增强的”,给协理的装置更好的体验,不帮忙的配备也不会更差。这就和微信小程序那种蹩脚设计的根本分化之处。

本博客也在向着PWA的可行性迈进,第1步作者采纳了Offline,也正是离线能力。能够让客户在一贯不网络连接的时候还是能够运用部分服务。那个力量运用了ServiceWorker技术。

贯彻思路正是,利用service
worker,另起一个线程,用来监听全数互连网请求,讲曾经呼吁过的数量放入cache,在断网的意况下,间接取用cache里面包车型客车财富。为呼吁过的页面和图纸,体现三个暗中同意值。当有网络的时候,再另行从服务器更新。
亚洲城vip网页版 1
代码这里就不贴了,以往大概会特地写一篇来详细介绍ServiceWorker,有趣味的能够直接参考源码亚洲城vip网页版,。
挂号起来也万分便于

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学习与履行》三种的第①篇小说。

 

离线有缓存景况

亚洲城vip网页版 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
等工具,对于熟知这一个工具的校友,领悟接口和排查难题时应有会轻松些。

亚洲城vip网页版 3

Default.aspx

离线无缓存情形

会显得2个暗中认可的页面

亚洲城vip网页版 4

-EOF-

打赏扶助笔者写出更加多好小说,感谢!

打赏笔者

结缘专属海报

原作中此处为链接,暂不援助采集

能够观察,专属海报属于小型网页应用,自己并未很复杂的构建进程,所以本身选拔gulp作为塑造筑工程具。

隶属海报实现离线化,其财富可分为三类:

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

亚洲城vip网页版 5

② 、cdn库文件使用运转时缓存(runtime caching),读取时选择缓存优先(cache
first)策略:使用到到时候从互联网加载,第3次起从缓存加载

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

叁 、请求接口的数据利用运转时缓存(runtime
caching),互连网优先政策(network
first):优先通过互联网读取,断网后从缓存读取,用于落实离线浏览(不可提交)

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

完整的 gulp task 可参照布局「 」

PWA作为今年最火热的技艺概念之一,对升官Web应用的安全、品质和体验有着一点都不小的意义,非凡值得大家去探听与读书。

亚洲城vip网页版 6亚洲城vip网页版 7View Code

打赏帮助笔者写出愈多好小说,多谢!

任选一种支付办法

亚洲城vip网页版 8
亚洲城vip网页版 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

亚洲城vip网页版 10

庞健,金融IT男。
个人主页 ·
笔者的作品 ·
5 ·
  

亚洲城vip网页版 11

总结

直属海报在付出中期就已连接
workbox1.X,但考虑到花色本人还未进入平稳处境,另一方面技术专业和客户端协理程度也不齐全,而且贫乏效果监察和控制措施。综合考虑低收入轻风险点,平素未在生育环境启用此个性,而近期乘机
iOS 的支撑和技艺日趋成熟,项目中启用 PWA 的机遇将趋近成熟。

将新技巧引入实际项目后,理论上应有消除的题材是不是如预期获得消除,消除职能怎样?下一篇将介绍通过在服务端定期记录
Lighthouse 跑分结果,来衡量优化功效的一对想想。

正文中的代码都能够在learning-pwa的sw-cache分支上找到(git clone后专注切换成sw-cache分支)。

Default.aspx.cs

发表评论

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

网站地图xml地图