来自 澳门威尼斯人平台 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

离线模式数据访问DataSet和DataAdapter

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

2017/02/08 · JavaScript · PWA

本文作者: 伯乐在线 - pangjian 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

微信小程序来了,可以利用WEB技术在微信打造一个有着Native应用体验的应用,业界非常看好这种形式。但是你们也许不知道,Google早已有类似的规划,甚至层次更高。那就是PWA(渐进式增强WEB应用)。
PWA有以下几种特性:

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

所有这些特性都是“优雅降级、渐进增强的”,给支持的设备更好的体验,不支持的设备也不会更差。这就和微信小程序这种二流设计的根本不同之处。

本博客也在向着PWA的方向迈进,第一步我选择了Offline,也就是离线能力。可以让客户在没有网络连接的时候仍然可以使用部分服务。这个能力利用了Service Worker技术。

实现思路就是,利用service worker,另起一个线程,用来监听所有网络请求,讲已经请求过的数据放入cache,在断网的情况下,直接取用cache里面的资源。为请求过的页面和图片,展示一个默认值。当有网络的时候,再重新从服务器更新。
澳门威尼斯人平台 1
代码这里就不贴了,以后可能会专门写一篇来详细介绍Service Worker,有兴趣的可以直接参考源码。
注册起来也非常方便

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-

澳门威尼斯人平台,打赏支持我写出更多好文章,谢谢!

打赏作者

结合专属海报

原文中此处为链接,暂不支持采集

可以看出,专属海报属于小型网页应用,本身没有很复杂的构建过程,所以我选择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

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:离线模式数据访问DataSet和DataAdapter

关键词: