構(gòu)建一個簡單的新聞客戶端PWA應(yīng)用

shiyang6017 發(fā)布于2019-08-26 11:56 / 2480人閱讀

摘要：開始這是一個純練手的小項目，旨在練習使用相關(guān)技術(shù)構(gòu)建一個網(wǎng)絡(luò)應(yīng)用。中一個很重要的點就是利用攔截攔截客戶端請求，如果請求命中緩存中的數(shù)據(jù)，則無需訪問網(wǎng)絡(luò)，直接返回。

開始

這是一個純練手的小項目，旨在練習使用PWA(Progressive Web Apps)相關(guān)技術(shù)構(gòu)建一個網(wǎng)絡(luò)應(yīng)用。

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

預(yù)覽地址：https://bjw1234.github.io/new...

手機端截屏：

主頁面

詳情頁

PWA是什么？

PWA(Progressive Web Apps)漸進式網(wǎng)絡(luò)應(yīng)用，結(jié)合了 Web 和原生應(yīng)用中最好功能的一種體驗。對于首次訪問的用戶它是非常有利的, 用戶可以直接在瀏覽器中進行訪問，不需要安裝應(yīng)用。隨著時間的推移當用戶漸漸地和應(yīng)用建立了聯(lián)系，它將變得越來越強大。它能夠快速地加載，即使在比較糟糕的網(wǎng)絡(luò)環(huán)境下，能夠推送相關(guān)消息, 也可以像原生應(yīng)用那樣添加至主屏，能夠有全屏瀏覽的體驗。

Service Worker

PWA中一個很重要的點就是利用Service Worker攔截攔截客戶端請求，如果請求命中緩存中的數(shù)據(jù)，則無需訪問網(wǎng)絡(luò)，直接返回。

注冊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，在這個文件中我們需要去監(jiān)聽三件事情，Service Worker的安裝，激活以及fetch事件。

// 安裝事件，在這里將一些初始化或者`app shell`資源加入緩存列表
self.addEventListener("install", event => {
    event.waitUntil(
        // xxx
    );
});

// 激活事件，在這個函數(shù)中處理資源的更新
self.addEventListener("activate", event => {
    event.waitUntil((
        //xxx
    );
});

// fetch事件，在這個函數(shù)中攔截并處理用戶的請求
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request,{ ignoreSearch: true }).then( response => {
            if(response){ // 緩存命中直接返回 }
            // 向服務(wù)器請求資源
                // 出錯則返回
                // response ok
                // 添加到緩存列表 
        });
    );
});

客戶端發(fā)起請求

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

解析URL

當用戶在首頁點擊不同的新聞，需要跳轉(zhuǎn)到新聞詳情頁。所以在article.js中去解析URL判斷給用戶呈現(xiàn)什么內(nèi)容。

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

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

每一條新聞的數(shù)據(jù)結(jié)構(gòu)

模擬來自服務(wù)器端的json數(shù)據(jù)。

{
  "id": 0,
  "image":"./images/0.jpg",
  "title": "中方回應(yīng)馬來西亞將取消新隆高鐵項目",
  "desc": "有記者問：據(jù)報道，馬來西亞總理昨天宣布將取消新隆高鐵項目......",
  "time":"兩分鐘前",
  "read":"2344評",
  "type":"國內(nèi)"
}
...

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實現(xiàn)多行文本超出省略號顯示

    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云服務(wù)器云服務(wù)器構(gòu)建安全的php應(yīng)用 php構(gòu)建新聞網(wǎng)站最簡單的客戶管理軟件一個不錯的應(yīng)用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107873.html

發(fā)表評論

登陸后可評論

0條評論

shiyang6017

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3187·2023-04-25 18:22
基于STM32Cube MX開發(fā)的TencentOS-Tiny軟件包

閱讀 2435·2021-11-17 09:33
【Python爬蟲】4萬字，詳解selenium從入門到實戰(zhàn)【錯過再無】

閱讀 3419·2021-10-11 10:59
我的虛擬主機怎么解釋-虛擬主機是什么概念？

閱讀 3265·2021-09-22 15:50
開發(fā)中idea常用快捷鍵集合

閱讀 2859·2021-09-10 10:50
基于Vue的點對點聊天項目

閱讀 885·2019-08-30 15:53
一段程序讓你看懂JS中的this

閱讀 477·2019-08-29 11:21
Vue - 組件開發(fā)和實例旋轉(zhuǎn)輪盤

閱讀 2962·2019-08-26 13:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

構(gòu)建一個簡單的新聞客戶端PWA應(yīng)用

相關(guān)文章

**前端每周清單半年盤點之 PWA 篇**

**前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓**

30分鐘從零開始教會你什么是PWA

前端清單第 27 期：React Patent License 回復(fù)，Shopify WebVR 購

前端每周清單第 50 期: AngularJS and Long Term Support, Web

發(fā)表評論

0條評論

shiyang6017

男|高級講師

TA的文章

tensorflow

基于STM32Cube MX開發(fā)的TencentOS-Tiny軟件包

【Python爬蟲】4萬字，詳解selenium從入門到實戰(zhàn)【錯過再無】

我的虛擬主機怎么解釋-虛擬主機是什么概念？

開發(fā)中idea常用快捷鍵集合

基于Vue的點對點聊天項目

一段程序讓你看懂JS中的this

Vue - 組件開發(fā)和實例旋轉(zhuǎn)輪盤

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

構(gòu)建一個簡單的新聞客戶端PWA應(yīng)用

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！