构建一个简单的新闻客户端PWA应用

shiyang6017 发布于2019-08-26 11:56 / 2410人阅读

摘要：开始这是一个纯练手的小项目，旨在练习使用相关技术构建一个网络应用。中一个很重要的点就是利用拦截拦截客户端请求，如果请求命中缓存中的数据，则无需访问网络，直接返回。

开始

这是一个纯练手的小项目，旨在练习使用PWA(Progressive Web Apps)相关技术构建一个网络应用。

项目地址：https://github.com/bjw1234/ne...

预览地址：https://bjw1234.github.io/new...

手机端截屏：

主页面

详情页

PWA是什么？

PWA(Progressive Web Apps)渐进式网络应用，结合了 Web 和原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在比较糟糕的网络环境下，能够推送相关消息, 也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。

Service Worker

PWA中一个很重要的点就是利用Service Worker拦截拦截客户端请求，如果请求命中缓存中的数据，则无需访问网络，直接返回。

注册Service Worker

if("serviceWorker" in navigator){
        navigator.serviceWorker.register("./news_sw.js").then(reg => {            
            console.log("ServiceWorker registration successful with scope:" + reg.scope);
        }).catch(err => {
            console.log("ServiceWorker registration fail:",err);    
        });
    }

Service Worker详情

news_sw.js，在这个文件中我们需要去监听三件事情，Service Worker的安装，激活以及fetch事件。

// 安装事件，在这里将一些初始化或者`app shell`资源加入缓存列表
self.addEventListener("install", event => {
    event.waitUntil(
        // xxx
    );
});

// 激活事件，在这个函数中处理资源的更新
self.addEventListener("activate", event => {
    event.waitUntil((
        //xxx
    );
});

// fetch事件，在这个函数中拦截并处理用户的请求
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request,{ ignoreSearch: true }).then( response => {
            if(response){ // 缓存命中直接返回 }
            // 向服务器请求资源
                // 出错则返回
                // response ok
                // 添加到缓存列表 
        });
    );
});

客户端发起请求

function requestData(url) {
    fetch(url,{
        method:"GET"
    }).then(result => {
        if(result){
            return result.json();
        }
    }).then(data => {
        console.log(data);
        buildWebPage(data.latestNews);
    });
}

解析URL

当用户在首页点击不同的新闻，需要跳转到新闻详情页。所以在article.js中去解析URL判断给用户呈现什么内容。

// 解析url
function queryParameter(url){
    let obj = {};
    url.replace(/([^?&=]+)=([^?&=]+)/g,($0,$1,$2) => {
        obj[$1] = $2;
    });
    return obj;
}

// 获取地址栏的url
let param = queryParameter(document.location.href);

每一条新闻的数据结构

模拟来自服务器端的json数据。

{
  "id": 0,
  "image":"./images/0.jpg",
  "title": "中方回应马来西亚将取消新隆高铁项目",
  "desc": "有记者问：据报道，马来西亚总理昨天宣布将取消新隆高铁项目......",
  "time":"两分钟前",
  "read":"2344评",
  "type":"国内"
}
...

manifest.json配置

{
  "name": "news web app",
  "short_name": "hello news",
  "start_url": "./index.html",
  "theme_color": "#00ff8b",
  "background_color": "#00ff8b",
  "display": "standalone",
  "icons": [
    {
      "src": "./images/news-144.png",
      "sizes": "144X144",
      "type": "image/png"
    },
    {
      "src": "./images/news-192.png",
      "sizes": "192X192",
      "type": "image/png"
    }
  ]
}

CSS实现多行文本超出省略号显示

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

是否支持webp格式的判断

// 在serviceWorker中拦截请求
self.addEventListener("fetch",event => {
    if(/.jpg$|.png$/.test(event.request.url)){
        let supportWebp = false;
        // 判断是否支持webp文件        
        if(event.request.headers.has("accept")){
            supportWebp = event.request.headers.get("accept").includes("webp");
        }

        if(supportWebp){
            var req = event.request.clone();            
            var returnUrl = "http://localhost/sunset.jpg";
            console.log(returnUrl);
            event.respondWith(
                fetch(returnUrl,{
                    mode:"no-cors"
                })
            );
        }    
    }
});

// 在window中判断
function isSupportWebp(){
    var isSWebp = !![].map && 
document.createElement("canvas").toDataURL("image/webp").
indexOf("data:image/webp") == 0;
    return isSWebp;
}

GPU云服务器云服务器构建安全的php应用 php构建新闻网站最简单的客户管理软件一个不错的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107873.html

前端每周清单半年盘点之 PWA 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于...

崔晓明 2019-08-20 19:01 评论0 收藏0
前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿

摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...

liuchengxu 2019-08-20 16:23 评论0 收藏0
30分钟从零开始教会你什么是PWA

摘要：前置知识储备是网络上谈论最多的技术变革之一，在界从业者中获得了前所未有的势头。如果你是为构建的，我相信是添加到你的工作词汇中的最新流行语。在这篇文章中，我想要以一个简单的案例来教会各位如何起步。 showImg(https://segmentfault.com/img/bVbd3uj?w=1850&h=1042); 前置知识储备 PWA ( Progressive Web Apps )...

30e8336b8229 2019-08-26 17:40 评论0 收藏0
前端清单第 27 期：React Patent License 回复，Shopify WebVR 购

摘要：新闻热点国内国外，前端最新动态就开源许可证风波进行回复数周前，基金会决定禁止旗下项目使用，因为其在标准的许可证之外添加了专利声明此举引发了社区的广泛讨论，希望能够更新其开源许可证。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清单第 27 期：React Patent License 回复，Sho...

jeffrey_up 2019-08-21 12:03 评论0 收藏0
前端每周清单第 50 期: AngularJS and Long Term Support, Web

摘要：在该版本发布之后，开发团队并不会继续发布新的特性，而会着眼于进行重大的错误修复。发布每六个星期，团队就会创建新的分支作为发布通道，本文即是对新近发布的版本进行简要介绍。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热...

DobbyKim 2019-08-26 11:38 评论0 收藏0