建站
咨詢
售后
建站咨詢
新聞中心
前提條件
對下列知識有基本的了解：
創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元涿州做網(wǎng)站,已為上家服務(wù),為涿州各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
- 生產(chǎn)環(huán)境下的 Service Worker
配置文件 ?ngsw-config.json? 指定了 Angular Service Worker 應(yīng)該緩存哪些文件和數(shù)據(jù)的 URL，以及如何更新緩存的文件和數(shù)據(jù)。?Angular CLI? 會在 ?ng build? 期間處理配置文件。如果想手動處理，可以用 ?ngsw-config? 工具（這里的 ?
./node_modules/.bin/ngsw-config ./dist/ ./ngsw-config.json [/base/href] 該配置文件使用 JSON 格式。所有文件路徑都必須以 ?/? 開頭，也就是相應(yīng)的部署目錄 —— 在 CLI 項目中的它通常是 ?dist/?。
除非另有注釋，否則模式使用limited* glob 格式，該格式將在內(nèi)部轉(zhuǎn)換為正則表達(dá)式：
|
GLOB 格式 |
詳情 |
|---|---|
** | 匹配 0 個或多個路徑段 |
* | 匹配不包括 |
? | 正好匹配不包括 |
| 將模式標(biāo)記為負(fù)數(shù)，這意味著僅包含與模式不匹配的文件 |
請注意，在內(nèi)部 glob 到正則表達(dá)式的轉(zhuǎn)換中，正則表達(dá)式中某些具有特殊含義的字符不會被轉(zhuǎn)義，并且模式不會用 ?
^? / ?
$? 包裝。
- ?
$? 是正則表達(dá)式中的一個特殊字符，它與字符串的結(jié)尾匹配，在將 glob 模式轉(zhuǎn)換為正則表達(dá)式時不會自動轉(zhuǎn)義。如果你想從字面上匹配 ?$? 字符，則必須自己對它進(jìn)行轉(zhuǎn)譯（使用 ?\\$?）。例如，glob 模式 ?
/foo/bar/$value? 會導(dǎo)致出現(xiàn)無法匹配的表達(dá)式，因為字符串不可能在結(jié)尾后有任何字符。- 將模式轉(zhuǎn)換為正則表達(dá)式時，不會自動用 ?
^? 和 ?$? 包裝。因此，這些模式將部分匹配請求 URL。如果你希望你的模式匹配 URL 的開頭和/或結(jié)尾，可以自己添加 ?^? / ?$?。例如，glob 模式 ?
/foo/bar/*.js? 將匹配 ?.js? 和 ?.json? 文件。如果你想僅匹配 ?.js? 文件，請使用 ?/foo/bar/*.js$?。
范例模式：
|
模式 |
詳情 |
|---|---|
/**/*.html | 指定所有 HTML 文件 |
/*.html | 僅指定根中的 HTML 文件 |
!/**/*.map | 排除所有源映射 |
下面講講配置文件中的每個屬性。
appData
本節(jié)允許你傳遞用來描述這個特定應(yīng)用版本的任何數(shù)據(jù)。?SwUpdate ?服務(wù)會在更新通知中包含這些數(shù)據(jù)。許多應(yīng)用會使用本節(jié)來提供 UI 彈窗時要顯示的附加信息，以通知用戶有可用的更新。
index
指定用來充當(dāng)索引頁的文件以滿足導(dǎo)航請求。通常是 ?/index.html?。
assetGroups
資產(chǎn)（Assets）是與應(yīng)用一起更新的應(yīng)用版本的一部分。它們可以包含從頁面的同源地址加載的資源以及從 CDN 和其它外部 URL 加載的第三方資源。由于在構(gòu)建時可能沒法提前知道所有這些外部 URL，因此也可以指定 URL 的模式。
該字段包含一個資產(chǎn)組的數(shù)組，每個資產(chǎn)組中會定義一組資產(chǎn)資源和它們的緩存策略。
{
"assetGroups": [
{
…
},
{
…
}
]
}當(dāng) ServiceWorker 處理請求時，它將按照資源組在 ?
ngsw-config.json? 中出現(xiàn)的順序?qū)ζ溥M(jìn)行檢查。與所請求的資源匹配的第一個資源組將處理該請求。
建議將更具體的資源組放在列表中較高的位置。比如，與 ?
/foo.js? 匹配的資源組應(yīng)出現(xiàn)在與 ?
*.js? 匹配的資源組之前。
每個資產(chǎn)組都會指定一組資源和一個管理它們的策略。此策略用來決定何時獲取資源以及當(dāng)檢測到更改時該怎么做。
這些資產(chǎn)組會遵循下面的 Typescript 接口：
interface AssetGroup {
name: string;
installMode?: 'prefetch' | 'lazy';
updateMode?: 'prefetch' | 'lazy';
resources: {
files?: string[];
urls?: string[];
};
cacheQueryOptions?: {
ignoreSearch?: boolean;
};
}name
?name ?是強(qiáng)制性的。它用來標(biāo)識該配置文件版本中這個特定的資產(chǎn)組。
installMode
?installMode ?決定了這些資源最初的緩存方式。?installMode ?可以取如下兩個值之一：
|
值 |
詳情 |
|---|---|
prefetch | 要求 Angular Service Worker 在緩存當(dāng)前版本的應(yīng)用時要獲取每一個列出的資源。這是個帶寬密集型的模式，但可以確保這些資源在請求時可用，即使瀏覽器正處于離線狀態(tài)。 |
lazy |
|
默認(rèn)為 ?prefetch?。
updateMode
對于已經(jīng)存在于緩存中的資源，?updateMode ?會決定在發(fā)現(xiàn)了新版本應(yīng)用后的緩存行為。 自上一版本以來更改過的所有組中資源都會根據(jù) ?updateMode ?進(jìn)行更新。
|
值 |
詳情 |
|---|---|
prefetch | 要求 Service Worker 立即下載并緩存更新過的資源。 |
lazy |
|
其默認(rèn)值為 ?installMode ?的值。
resources
本節(jié)描述要緩存的資源，分為如下幾組：
|
資源組 |
詳情 |
|---|---|
files |
|
urls | 包括要在運行時進(jìn)行匹配的 URL 和 URL 模式。這些資源不是直接獲取的，也沒有內(nèi)容散列，但它們會根據(jù) HTTP 標(biāo)頭進(jìn)行緩存。 這對于像 Google Fonts 服務(wù)這樣的 CDN 非常有用。 |
cacheQueryOptions
這些選項用來修改對請求進(jìn)行匹配的行為。它們會傳給瀏覽器的 ?Cache#match? 函數(shù)。詳情參閱 MDN。目前，只支持下列選項：
|
選項 |
詳情 |
|---|---|
ignoreSearch | 忽略查詢參數(shù)。默認(rèn)為 |
dataGroups
與這些資產(chǎn)性（asset）資源不同，數(shù)據(jù)請求不會隨應(yīng)用一起版本化。它們會根據(jù)手動配置的策略進(jìn)行緩存，這些策略對 API 請求和所依賴的其它數(shù)據(jù)等情況會更有用。
本字段包含一個數(shù)據(jù)組的數(shù)組，其中的每一個條目都定義了一組數(shù)據(jù)資源以及對它們的緩存策略。
{
"dataGroups": [
{
…
},
{
…
}
]
}當(dāng) ServiceWorker 處理請求時，它將按照數(shù)據(jù)組在 ?
ngsw-config.json? 中出現(xiàn)的順序?qū)ζ溥M(jìn)行檢查。與所請求的資源匹配的第一個數(shù)據(jù)組將處理該請求。
建議將更具體的數(shù)據(jù)組放在列表中較高的位置。比如，與 ?
/api/foo.json? 匹配的數(shù)據(jù)組應(yīng)出現(xiàn)在與 ?
/api/*.json? 匹配的數(shù)據(jù)組之前。
數(shù)據(jù)組遵循下列 TypeScript 接口：
export interface DataGroup {
name: string;
urls: string[];
version?: number;
cacheConfig: {
maxSize: number;
maxAge: string;
timeout?: string;
strategy?: 'freshness' | 'performance';
};
cacheQueryOptions?: {
ignoreSearch?: boolean;
};
}name
和 ?assetGroups ?下類似，每個數(shù)據(jù)組也都有一個 ?name?，用作它的唯一標(biāo)識。
urls
一個 URL 模式的列表。匹配這些模式的 URL 將會根據(jù)該數(shù)據(jù)組的策略進(jìn)行緩存。只有非修改型的請求（GET 和 HEAD）才會進(jìn)行緩存。
- 不支持 glob 中的否定模式
- ?
?? 只做字面匹配，也就是說，它只能匹配 ??? 字符。
version
API 有時可能會以不向后兼容的方式更改格式。新版本的應(yīng)用可能與舊的 API 格式不兼容，因此也就與該 API 中目前已緩存的資源不兼容。
?version ?提供了一種機(jī)制，用于指出這些被緩存的資源已經(jīng)通過不向后兼容的方式進(jìn)行了更新，并且舊的緩存條目（即來自以前版本的緩存條目）應(yīng)該被丟棄。
?version ?是個整型字段，默認(rèn)為 ?0?。
cacheConfig
本節(jié)定義了對匹配上的請求進(jìn)行緩存時的策略。
maxSize
（必需）緩存的最大條目數(shù)或響應(yīng)數(shù)。開放式緩存可以無限增長，并最終超過存儲配額，建議適時清理。
maxAge
（必需）?maxAge ?參數(shù)表示在響應(yīng)因失效而要清除之前允許在緩存中留存的時間。?maxAge ?是一個表示持續(xù)時間的字符串，可使用以下單位作為后綴：
|
后綴 |
詳情 |
|---|---|
d | 天 |
h | 小時 |
m | 分鐘 |
s | 秒 |
u | 毫秒 |
比如，字符串 ?3d12h? 規(guī)定此內(nèi)容最多緩存三天半。
timeout
這個表示持續(xù)時間的字符串用于指定網(wǎng)絡(luò)超時時間。 如果配置了網(wǎng)絡(luò)超時時間，Angular Service Worker 就會先等待這么長時間再使用緩存。?timeout ?是一個表示持續(xù)時間的字符串，使用下列后綴單位：
|
后綴 |
詳情 |
|---|---|
d | 天 |
h | 小時 |
m | 分鐘 |
s | 秒 |
u | 毫秒 |
比如，字符串 ?5s30u? 將會被翻譯成 5 秒零 30 毫秒的網(wǎng)絡(luò)超時。
strategy
Angular Service Worker 可以使用兩種緩存策略之一來獲取數(shù)據(jù)資源。
|
緩存策略 |
詳情 |
|---|---|
performance |
|
freshness |
|
你還可以模擬第三種策略 staleWhileRevalidate，它會返回緩存的數(shù)據(jù)（如果可用），但是也會在后臺從網(wǎng)絡(luò)上獲取新數(shù)據(jù)，以供下次使用。要使用本策略，請在 ?
cacheConfig?中把 ?
strategy?設(shè)置為 ?
freshness?，并且把 ?
timeout?設(shè)置為 ?
0u?。
本質(zhì)上說，它會做如下工作：
- 首先嘗試從網(wǎng)絡(luò)上獲取。
- 如果網(wǎng)絡(luò)請求沒有在 0ms 內(nèi)（也就是立刻）完成，就用緩存做為后備（忽略緩存有效期）。
- 一旦網(wǎng)絡(luò)請求完成，就更新緩存，以供將來的請求使用。
- 如果指定的資源在緩存中不存在，總是等待網(wǎng)絡(luò)請求。
cacheOpaqueResponses
Angular 服務(wù)工作者是否應(yīng)該緩存不透明的響應(yīng)。
如果未指定，則默認(rèn)值取決于數(shù)據(jù)組的配置策略：
| STRATEGIES |
詳情 |
|---|---|
使用 | 默認(rèn)值為 |
具有 | 默認(rèn)值為 |
評論不透明的響應(yīng)
如果你不熟悉， 不透明響應(yīng)是請求不同來源的不返回 CORS 標(biāo)頭的資源時返回的一種特殊類型的響應(yīng)。不透明響應(yīng)的特性之一是不允許服務(wù)工作者讀取其狀態(tài)，這意味著它無法檢查請求是否成功。有關(guān)更多詳細(xì)信息，請參閱 fetch()介紹。
如果你無法實現(xiàn) CORS（例如，如果你不控制來源），更愿意對會導(dǎo)致不透明響應(yīng)的資源使用 freshness 策略。
navigationUrls
這個可選節(jié)讓你可以指定一個自定義的 URL 列表，它們都會被重定向到索引文件。
處理導(dǎo)航請求
對于沒有匹配上任何 ?asset ?或 ?data ?組的導(dǎo)航請求，ServiceWorker 會把它們重定向到指定的索引文件。下列請求將會視為導(dǎo)航請求：
- 它的模式是 ?
navigation? - 它接受 ?
text/html? 響應(yīng)（根據(jù) ?Accept? 頭的值決定） - 它的 URL 符合特定的條件
默認(rèn)情況下，這些條件是：
- URL 的最后一段路徑中不能包含文件擴(kuò)展名（比如 ?
.?） - URL 中不能包含 ?
__?
匹配導(dǎo)航請求的 URL
雖然這些默認(rèn)條件在大多數(shù)情況下都挺好用，不過有時還是要配置一些不同的規(guī)則。比如，你可能希望忽略一些特定的路由（它們可能不是 Angular 應(yīng)用的一部分），而是把它們透傳給服務(wù)器。
該字段包含一個將要在運行期間匹配的 URL 和 類似 glob 的 URL 模式。 它既可以包含正向模式也可以包含反向模式（比如用 ?!? 開頭的模式）。
只有那些能匹配任意正向 URL 或 URL 模式并且不匹配任何一個反向模式的 URL 才會視為導(dǎo)航請求。當(dāng)匹配時，這些 URL 查詢將會被忽略。
如果省略了該字段，它的默認(rèn)值是：
[
'/**', // Include all URLs.
'!/**/*.*', // Exclude URLs to files.
'!/**/*__*', // Exclude URLs containing `__` in the last segment.
'!/**/*__*/**', // Exclude URLs containing `__` in any other segment.
]navigationRequestStrategy
通過此可選屬性，你可以配置服務(wù)工作者如何處理導(dǎo)航請求：
{
"navigationRequestStrategy": "freshness"
}|
可能的值 |
詳情 |
|---|---|
'performance' | 默認(rèn)設(shè)置。提供指定的索引文件，它通常會被緩存。 |
'freshness' | 將請求透傳到網(wǎng)絡(luò)，并在脫機(jī)時回退到
|
?
freshness?策略通常會導(dǎo)致向服務(wù)器發(fā)送更多請求，這可能會增加響應(yīng)延遲。建議你盡可能使用默認(rèn)的性能策略。
網(wǎng)站名稱：創(chuàng)新互聯(lián)Angular教程：AngularServiceWorker配置
文章地址：http://fisionsoft.com.cn/article/coshccp.html
