最先

這是一個純練手的小項目，旨在演習運用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;
}