迈向PWA!利用serviceworker的离线访问格局

2017/02/08 · JavaScript
· PWA

本文小编: 伯乐在线 –
pangjian
。未经笔者许可,禁止转发!
迎接参与伯乐在线 专辑小编。

微信小程序来了,能够应用WEB技术在微信创设1个具有Native应用经验的采取,产业界相当看好那种样式。然则你们或然不知晓,谷歌早已有相近的布署,甚至层次更高。那正是PWA(渐进式增强WEB应用)。
PWA有以下三种本性:

  • 利用PWA特性实现离线化,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所在的目录要压倒它的控制范围,也正是scope。我把sw.js放在了根目录来决定总体目录。

接下去看看大家的末梢效果呢,你也得以在祥和的浏览器下断网尝试一下。当然有一部分浏览器近来还不帮忙,比如出名的Safari。

引入

PWA(渐进式网页应用)对于关心新技巧得同学恐怕已不面生。14年现今,其利用不如应有的那么周边,最大的阻力:在iOS平台缺少支撑,近日已被打破
—— Safari技术预览版已经暗许开启 Service Worker。

从开发者角度,缺乏一个开箱即用的方案,且专业本身在高效上扬,则是技术人士选择观察的机要原因。本文将以专属海报为例,介绍通过
workbox 工具, 神速为项目启用 PWA 中离线性情的格局,以及技巧总计。

本文是《PWA学习与履行》文山会海的第1篇小说。

 

离线有缓存情形

图片 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作为创设筑工程具。

直属海报完结离线化,其财富可分为三类:

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

图片 5

二 、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]
        }
      }
    }

叁 、请求接口的数码利用运转时缓存(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

网站地图xml地图