小編給大家分享一下怎么開發一個漸進式Web應用程序PWA，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
要開始學習本教程，您必須安裝以下軟件：
node 8.9 版本及以上 (https: // nodejs.org/en/download/). Yarn(https://yarnpkg.com) Git.
作為本教程初始的工程，你可以clone以下Github庫：
git clone https://github.com/petereijgermans11/progressive-web-app
然后，到以下目錄中
cd pwa-article / pwa-app-manifest-init
通過以下命令安裝依賴并啟動工程
npm i && npm start
通過以下地址打開應用：http:// localhost:8080
有許多方法可以訪問我的本地主機：為了從遠程訪問發布在你機器上的8080端口的地址。為此，您可以使用ngrok。請參閱：https://ngrok.com/
使用以下命令安裝ngrok：
npm install -g ngrok
在終端中運行以下命令。該命令為您生成一個可供外部訪問的URL。
ngrok http 8080
然后在Chrome中的移動設備上瀏覽至生成的網址。
PWA有三個重要的技術組件協調工作，包括：
Manifest清單文件，Service Worker和在https下運行。
清單文件是一個JSON配置文件，其中包含了PWA的基礎信息，例如應用的icon，Web應用程序名稱及背景顏色。如果瀏覽器檢測到網站存在PWA清單文件，Chrome會自動出現“添加到主屏幕”按鈕。如果用戶點擊同意，該圖標將被添加到主屏幕，并且將安裝PWA。
創建一個Manifest.json
PWA的Manifest.json文件如下所示：
JSON格式
{
"name": "Progressive Selfies",
"short_name": "PWA Selfies",
"icons": [
{
"src": "/src/images/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/src/images/icons/app-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"scope": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#3f51b5"
}告訴瀏覽器你應用的清單
在與index.html文件相同的級別的目錄中創建Manifest.json文件。清單文件創建后，將清單文件引用鏈接添加到index.html中。
<link rel=”manifest” href=”/manifest.json”>
Manifest 屬性介紹
Manifest有很多配置屬性，接下來我們會對其中的屬性做一個簡單的介紹
name、short_name：指定Web應用的名稱，short_name是該應用的簡稱，當沒有足夠空間展示應用的name屬性時，系統就會使用short_name 。
display：display屬性指定Web應用的顯示模式，它有四個值可供配置：fullscreen、standalone、minimal-ui和browser，但一般常用的屬性就是fullscreen和standalone。 fullscreen：全屏顯示 standalone：這種模式下打開的應用不會出現瀏覽器的地址欄，所以因此看起來更像是一個原生應用 minimal-ui、browser：和使用瀏覽器訪問區別不大。
orientation：控制Web應用的顯示的方向及禁止手機轉屏。
icons、background_color：icon用于指定應用圖標，background_color是應用加載完成前的背景色，通過設置這兩個屬性，可組合成應用的Splash Screen。
theme_color：定義應用程序的默認主題顏色。
description：設置應用的一段描述內容。
以上是pwa 清單文件屬性的一些說明，我們通過將設置完成的清單文件并將其放置在與index.html文件同級的目錄中即可完成清單文件的添加。
打開Chrome開發者工具 – Application - Manifest，查看添加的清單文件是否加載完成，如果沒有下圖的信息，我們可以通過重新啟動服務器npm start來重新加載。
Service Worker(SW) 是一段JavaScript，它作為瀏覽器和網絡服務器間的代理。Service Worker可以在基于瀏覽器的 web 應用中實現如離線緩存、消息推送、靜默更新等 native 應用常見的功能，以給 web 應用提供更好更豐富的使用體驗。
另外，這個API還允許利用緩存來支持離線體驗，從而使開發人員可以完全控制用戶的使用體驗
Service Worker生命周期
對于Service Worker，基本設置的步驟如下：
首先應注冊SW，如果SW已注冊，瀏覽器會根據于安裝事件自動開始安裝。
安裝SW后，它將收到激活事件。此激活事件可用于清理SW早期版本的中使用的資源。
實際操作應該首先創建一個和index.html同級，名為sw.js的空文件。然后再index.html文件中，添加一個base標簽，如下：
<base href="/" rel="external nofollow" >
最后，在src/js/app.js中添加以下代碼注冊SW。此代碼將在頁面 “加載”過程中被激活。
你可以打開Chrome DevTools – Application - Service Worker 中檢查SW是否已經啟用。
window.addEventListener('load', () => {
const base = document.querySelector('base');
let baseUrl = base && base.href || '';
if (!baseUrl.endsWith('/')) {
baseUrl = `${baseUrl}/`;
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(`${baseUrl}sw.js`)
.then( registration => {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(err => {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
});以上這段代碼主要的作用是檢查SW的API在window對象的navigator屬性中是否可用。window對象代表瀏覽器窗口。如果SW在navigator中可用，則在頁面加載時立即注冊SW。
雖然注冊一個SW很簡單，但在有些情況下我們依然會遇到無法注冊Service Worker的問題，我們來簡單看看無法注冊SW的原因都有什么并如何解決：
您的應用程序無法在HTTPS下運行。在開發過程中，你可以通過localhost使用SW。但如果將其部署在網站上時，則需要啟用HTTPS。
SW的路徑不正確。
沒有勾選Update on reload?！?/p>
Service Worker 事件
除了install和activate事件外，其他事件還有message、fetch、sync和push事件。
將以下代碼添加到你的SW中以監聽生命周期事件（安裝和激活）：
self.addEventListener('install', event => {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
console.log('[Service Worker] Activating Service Worker ...', event);
return self.clients.claim();
});install回調調用skipWaiting()函數來觸發activate事件，并告訴Service Worker立即開始工作，而無需等待用戶瀏覽或重新加載頁面。
skipWaiting()函數強制等待中的Service Worker成為活動的Service Worker。self.skipWaiting()函數也可以和self.clients.claim()函數一起使用，以確保對底層Service Worker的更新立即生效。
在這種情況下，self-property 代表窗口對象（即你的瀏覽器窗口）。
添加到主屏幕按鈕
"添加到主屏幕按鈕" 允許用戶在其設備上安裝PWA。為了真正用這個按鈕安裝PWA，你必須在SW中定義一個fetch事件處理程序。讓我們在sw.js中解決這個問題。
self.addEventListener('fetch', event => {
console.log('[Service Worker] Fetching something ....', event);
// This fixes a weird bug in Chrome when you open the Developer Tools
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
return;
}
event.respondWith(fetch(event.request));
});Service Worker緩存
Service Worker的強大之處在于其攔截HTTP請求的能力。在這一步中，我們使用這個選項來攔截HTTP請求和響應，直接從緩存為用戶提供閃電般快速的響應。
在Service Worker安裝期間進行預緩存
當用戶第一次訪問你的網站時，SW會開始自行安裝。在這個安裝階段，你可以將PWA使用的所有頁面、腳本和樣式文件下載并緩存起來，以下是完成這項工作的sw.js文件代碼：
const CACHE_STATIC_NAME = 'static';
const URLS_TO_PRECACHE = [
'/',
'index.html',
'src/js/app.js',
'src/js/feed.js',
'src/lib/material.min.js',
'src/css/app.css',
'src/css/feed.css',
'src/images/main-image.jpg',
'https://fonts.googleapis.com/css?family=Roboto:400,700',
'https://fonts.googleapis.com/icon?family=Material+Icons',
];
self.addEventListener('install', event => {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(cache => {
console.log('[Service Worker] Precaching App Shell');
cache.addAll(URLS_TO_PRECACHE);
})
.then(() => {
console.log('[ServiceWorker] Skip waiting on install');
return self.skipWaiting();
})
);
});這段代碼使用安裝事件，并在安裝階段添加了一個URLS_TO_PRECACHE數組。一旦調用開啟緩存函數（caches.open），你就可以使用cache.addAll()函數來緩存數組中的文件。通過event.waitUntil()方法使用JavaScript promise來知道安裝需要多長時間以及是否成功。
安裝事件會調用self.skipWaiting()直接激活SW。如果所有文件都已被成功緩存，SW就會被安裝。但如果其中一個文件無法下載，則安裝步驟將會失敗。在Chrome開發者工具中，你可以檢查緩存（在Cache Storage中）是否被URLS_TO_PRECACHE數組中的靜態文件填充。
但是，如果你查看Network選項卡，文件仍然是通過網絡獲取的。原因是雖然緩存已經準備就緒了，但我們并沒有從緩存中讀取引用資源。所以為了完成這部分工作，我們首先要監聽應用的fetch事件，然后攔截并從緩存中獲取資源，讓我們看看下面的代碼吧：
self.addEventListener('fetch', event => {
console.log('[Service Worker] Fetching something ....', event);
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
console.log(response);
return response;
}
return fetch(event.request);
})
);
});我們使用caches.match()函數檢查傳入的URL是否與當前緩存中可能存在的資源匹配。如果匹配，我們就返回該緩存資源，但如果該資源不存在于緩存中，我們就像正常情況下一樣繼續獲取請求的資源。
在Service Worker安裝并激活后，刷新頁面并再次檢查網絡選項卡?，F在，Service Worker將攔截HTTP請求，并從緩存中即時加載相應的資源，而不是向服務器發出網絡請求。
現在，如果我們在網絡選項卡中設置離線模式，我們的應用也依然能正常訪問。
Background Fetch API是SW的后臺功能，它允許用戶在后臺下載大文件、視頻和音樂等資源。在獲取/傳輸過程中，你的用戶即便關閉標簽，乃至關閉整個瀏覽器，也不會清除傳輸任務。當用戶再次打開瀏覽器后，傳輸過程將恢復。這個API也可以將傳輸的進度可以顯示給用戶，用戶可以取消或暫停這個過程。
默認情況下，后臺傳輸功能是不可用的，你必須通過url(chrome://flags/#enable-experimental-web-platform-features)允許chrome的“Experimental Web Platform features”選項
以下是如何實現此類后臺傳輸的示例。
在你的index.html文件中添加ID為“ bgFetchButton”的按鈕
<button id="bgFetchButton">Store assets locally</button>
然后，在加載事件處理程序中的app.js中添加用于執行后臺傳輸的代碼
window.addEventListener(‘load', () => {
...
bgFetchButton = document.querySelector(‘#bgFetchButton');
bgFetchButton.addEventListener(‘click', async event => {
try {
const registration = await navigator.serviceWorker.ready;
registration.backgroundFetch.fetch(‘my-fetch', [new Request(`${baseUrl}src/images/main-image-lg.jpg`)]);
} catch (err) {
console.error(err);
}
});
...
});上面的代碼在以下條件下開始執行后臺傳輸：
用戶點擊ID為bgFetchButton的按鈕
SW已注冊
后臺傳輸必須在異步函數中執行，因為傳輸過程不能阻塞用戶界面。
傳輸完成后放入緩存
self.addEventListener(‘backgroundfetchsuccess', event => {
console.log(‘[Service Worker]: Background Fetch Success', event.registration); event.waitUntil(
(async function() {
try {
// Iterating the records to populate the cache
const cache = await caches.open(event.registration.id); const records = await event.registration.matchAll(); const promises = records.map(async record => {
const response = await record.responseReady;
await cache.put(record.request, response);
});
await Promise.all(promises);
} catch (err) {
console.log(‘[Service Worker]: Caching error');
}
})()
);
});這段代碼由以下步驟組成：
當Background Fetch傳輸完成，你的SW將收到Background Fetch成功事件。
創建并打開一個與registration.id同名的新緩存。
通過registration.matchAll()獲取所有記錄并遍歷。
最后，通過Promise.all()，執行所有的承諾。
以上是“怎么開發一個漸進式Web應用程序PWA”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
