填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

生產環境下的 Service Worker

Service worker in production

本頁講的是如何使用 Angular Service Worker 發佈和支援生產環境下的應用。 它解釋了 Angular Service Worker 如何滿足大規模生產環境的需求、Service Worker 在多種條件下有哪些行為以及有哪些可用的資源和故障保護機制。

This page is a reference for deploying and supporting production apps that use the Angular service worker. It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available resources and fail-safes.

前提條件

Prerequisites

對下列知識有基本的瞭解:

A basic understanding of the following:


Service Worker 與應用資源的快取

Service worker and caching of app resources

從概念上說,你可以把 Angular Service Worker 想象成一個轉發式快取或裝在終端使用者瀏覽器中的 CDN 邊緣。 Service Worker 的工作是從本地快取中滿足 Angular 應用對資源或資料的請求,而不用等待網路。 和所有快取一樣,它有一些規則來決定內容該如何過期或更新。

Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated.

應用的版本

App versions

在 Angular Service Worker 的語境下,“版本”是指用來表示 Angular 應用的某一次建構成果的一組資源。 當應用的一個新的建構發佈時,Service Worker 就把它看做此應用的一個新版本。 就算只修改了一個檔案,也同樣如此。 在任何一個給定的時間,Service Worker 可能會在它的快取中擁有此應用的多個版本,這幾個版本也都能用於提供服務。 要了解更多,參閱稍後的 App 選項卡

In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular app. Whenever a new build of the app is deployed, the service worker treats that build as a new version of the app. This is true even if only a single file is updated. At any given time, the service worker may have multiple versions of the app in its cache and it may be serving them simultaneously. For more information, see the App tabs section below.

要保持應用的整體性,Angular Service Worker 會用所有的檔案共同組成一個版本。 組成版本的這些檔案通常包括 HTML、JS 和 CSS 檔案。把這些檔案分成一組是至關重要的,因為它們會互相參考,並且依賴於一些特定內容。 比如,index.html 檔案可能有個參考 bundle.js<script> 標籤,它可能會試圖從這個指令碼中呼叫一個 startApp() 函式。 任何時候,只要這個版本的 index.html 被提供了,與它對應的 bundle.js 也必須同時提供。 這種情況下,使用呼叫了 startApp() 的老的 index.html 並同時使用定義了 runApp() 的新 bundle 就是無效的。

To preserve app integrity, the Angular service worker groups all files into a version together. The files grouped into a version usually include HTML, JS, and CSS files. Grouping of these files is essential for integrity because HTML, JS, and CSS files frequently refer to each other and depend on specific content. For example, an index.html file might have a <script> tag that references bundle.js and it might attempt to call a function startApp() from within that script. Any time this version of index.html is served, the corresponding bundle.js must be served with it. For example, assume that the startApp() function is renamed to runApp() in both files. In this scenario, it is not valid to serve the old index.html, which calls startApp(), along with the new bundle, which defines runApp().

當使用延遲載入模組時,檔案的整體性就顯得格外重要。 某個 JS 包可能參考很多惰性塊,而這些惰性塊的檔名在應用的每次特定的建構中都是唯一的。 如果執行應用的 X 版本檢視載入一個惰性塊,但該塊的伺服器已經升級到了 X + 1 版本,這次延遲載入操作就會失敗。

This file integrity is especially important when lazy loading modules. A JS bundle may reference many lazy chunks, and the filenames of the lazy chunks are unique to the particular build of the app. If a running app at version X attempts to load a lazy chunk, but the server has updated to version X + 1 already, the lazy loading operation will fail.

本應用的版本識別符號由其所有資源的內容決定,如果它們中的任何一個發生了變化,則版本識別符號也隨之改變。 實際上,版本是由 ngsw.json 檔案的內容決定的,包含了所有已知內容的雜湊值。 如果任何一個被快取的檔案發生了變化,則該檔案的雜湊也將在 ngsw.json 中隨之變化,從而導致 Angular Service Worker 將這個活動檔案的集合視為一個新版本。

The version identifier of the app is determined by the contents of all resources, and it changes if any of them change. In practice, the version is determined by the contents of the ngsw.json file, which includes hashes for all known content. If any of the cached files change, the file's hash will change in ngsw.json, causing the Angular service worker to treat the active set of files as a new version.

藉助 Angular Service Worker 的這種版本控制行為,應用伺服器就可以確保這個 Angular 應用中的這組檔案始終保持一致。

With the versioning behavior of the Angular service worker, an application server can ensure that the Angular app always has a consistent set of files.

更新檢測

Update checks

每當使用者開啟或重新整理應用程式時,Angular Service Worker 都會透過檢視清單(manifest)檔案 “ngsw.json” 的更新來檢查該應用程式的更新。 如果它找到了更新,就會自動下載並快取這個版本,並在下次載入應用程式時提供。

Every time the user opens or refreshes the application, the Angular service worker checks for updates to the app by looking for updates to the ngsw.json manifest. If an update is found, it is downloaded and cached automatically, and will be served the next time the application is loaded.

資源整體性

Resource integrity

長週期快取的潛在副作用之一就是可能無意中快取了無效的資源。 在普通的 HTTP 快取中,硬重新整理或快取過期限制了快取這種無效檔案導致的負面影響。 而 Service Worker 會忽略這樣的約束,事實上會對整個應用程式進行長期快取。 因此,讓 Service Worker 獲得正確的內容就顯得至關重要。

One of the potential side effects of long caching is inadvertently caching an invalid resource. In a normal HTTP cache, a hard refresh or cache expiration limits the negative effects of caching an invalid file. A service worker ignores such constraints and effectively long caches the entire app. Consequently, it is essential that the service worker gets the correct content.

為了確保資源的整體性,Angular Service Worker 會驗證所有帶雜湊的資源的雜湊值。 通常,對於 Angular CLI 應用程式,使用者的 src/ngsw-config.json 配置檔案中會涵蓋 dist 目錄下的所有內容。

To ensure resource integrity, the Angular service worker validates the hashes of all resources for which it has a hash. Typically for an app created with the Angular CLI, this is everything in the dist directory covered by the user's src/ngsw-config.json configuration.

如果某個特定的檔案未能透過驗證,Angular Service Worker 就會嘗試用 “cache-busting” URL 為引數重新獲取內容,以消除瀏覽器或中間快取的影響。 如果該內容也未能透過驗證,則 Service Worker 會認為該應用的整個版本都無效,並停止用它提供服務。 如有必要,Service Worker 會進入安全模式,這些請求將退化為直接訪問網路。 如果服務無效、損壞或內容過期的風險很高,則會選擇不使用快取。

If a particular file fails validation, the Angular service worker attempts to re-fetch the content using a "cache-busting" URL parameter to eliminate the effects of browser or intermediate caching. If that content also fails validation, the service worker considers the entire version of the app to be invalid and it stops serving the app. If necessary, the service worker enters a safe mode where requests fall back on the network, opting not to use its cache if the risk of serving invalid, broken, or outdated content is high.

導致雜湊值不匹配的原因有很多:

Hash mismatches can occur for a variety of reasons:

  • 在源伺服器和終端使用者之間快取圖層可能會提供陳舊的內容。

    Caching layers in between the origin server and the end user could serve stale content.

  • 非原子化的部署可能會導致 Angular Service Worker 看到部分更新後的內容。

    A non-atomic deployment could result in the Angular service worker having visibility of partially updated content.

  • 建構過程中的錯誤可能會導致更新了資源,卻沒有更新 ngsw.json。 反之,也可能發生沒有更新資源,卻更新了 ngsw.json 的情況。

    Errors during the build process could result in updated resources without ngsw.json being updated. The reverse could also happen resulting in an updated ngsw.json without updated resources.

不帶雜湊的內容

Unhashed content

ngsw.json 清單中唯一帶雜湊值的資源就是建構清單時 dist 目錄中的資源。 而其它資源,特別是從 CDN 載入的資源,其內容在建構時是未知的,或者會比應用程式部署得更頻繁。

The only resources that have hashes in the ngsw.json manifest are resources that were present in the dist directory at the time the manifest was built. Other resources, especially those loaded from CDNs, have content that is unknown at build time or are updated more frequently than the app is deployed.

如果 Angular Service Worker 沒有雜湊可以驗證給定的資源,它仍然會快取它的內容,但會使用 “重新驗證時失效” 的策略來承認 HTTP 快取頭。 也就是說,當被快取資源的 HTTP 快取頭指出該資源已過期時,Angular Service Worker 將繼續提供內容,並嘗試在後臺重新整理資源。 這樣,那些被破壞的非雜湊資源留在快取中的時間就不會超出為它配置的生命週期。

If the Angular service worker does not have a hash to validate a given resource, it still caches its contents but it honors the HTTP caching headers by using a policy of "stale while revalidate." That is, when HTTP caching headers for a cached resource indicate that the resource has expired, the Angular service worker continues to serve the content and it attempts to refresh the resource in the background. This way, broken unhashed resources do not remain in the cache beyond their configured lifetimes.

App 選項卡

App tabs

如果應用程式的資源版本突然發生了變化或沒有給出警告,就可能會有問題。關於這些問題的描述,請參閱前面的 版本 部分。

It can be problematic for an app if the version of resources it's receiving changes suddenly or without warning. See the Versions section above for a description of such issues.

Angular Service Worker 會保證:正在執行的應用程式會繼續執行和當前應用相同的版本。 而如果在新的 Web 瀏覽器選項卡中打開了該應用的另一個實例,則會提供該應用的最新版本。 因此,這個新標籤可以和原始標籤同時執行不同版本的應用。

The Angular service worker provides a guarantee: a running app will continue to run the same version of the app. If another instance of the app is opened in a new web browser tab, then the most current version of the app is served. As a result, that new tab can be running a different version of the app than the original tab.

值得注意的是,這種擔保比普通的 Web 部署模型提供的擔保還要更強一點。 如果沒有 Service Worker,則不能保證稍後在這個正在執行的應用中延遲載入的程式碼 和其初始程式碼的版本是一樣的。

It's important to note that this guarantee is stronger than that provided by the normal web deployment model. Without a service worker, there is no guarantee that code lazily loaded later in a running app is from the same version as the initial code for the app.

Angular Service Worker 為什麼可能會更改執行中的應用的版本有幾個有限的原因。 其中一些是因為出錯了:

There are a few limited reasons why the Angular service worker might change the version of a running app. Some of them are error conditions:

  • 由於雜湊驗證失敗,當前版本變成了無效的。

    The current version becomes invalid due to a failed hash.

  • 某個無關的錯誤導致 Service Worker 進入了安全模式,或者說,它被暫時禁用了。

    An unrelated error causes the service worker to enter safe mode; that is, temporary deactivation.

Angular Service Worker 能知道在任何指定的時刻正在使用哪些版本, 並清除那些沒有被任何選項卡使用的版本。

The Angular service worker is aware of which versions are in use at any given moment and it cleans up versions when no tab is using them.

另一些可能導致 Angular Service Worker 在執行期間改變版本的因素是一些正常事件:

Other reasons the Angular service worker might change the version of a running app are normal events:

  • 頁面被重新載入/重新整理。

    The page is reloaded/refreshed.

  • 該頁面透過 SwUpdate 服務請求立即啟用這個更新。

    The page requests an update be immediately activated via the SwUpdate service.

Service Worker 更新

Service worker updates

Angular Service Worker 是一個執行在 Web 瀏覽器中的小指令碼。 有時,這個 Service Worker 也可能會需要更新,以修復錯誤和增強特性。

The Angular service worker is a small script that runs in web browsers. From time to time, the service worker will be updated with bug fixes and feature improvements.

首次開啟應用時或在一段非活動時間之後再訪問應用程式時,就會下載 Angular Service Worker。如果 Service Worker 發生了變化,Service Worker 就會在後臺進行更新。

The Angular service worker is downloaded when the app is first opened and when the app is accessed after a period of inactivity. If the service worker has changed, the service worker will be updated in the background.

Angular Service Worker 的大部分更新對應用程式來說都是透明的 - 舊快取仍然有效,其內容仍然能正常使用。 但是,在 Angular Service Worker 中可能偶爾會有錯誤修復或新功能,需要讓舊的快取失效。 這時,應用程式就從會網路上透明地進行重新整理。

Most updates to the Angular service worker are transparent to the app—the old caches are still valid and content is still served normally. However, occasionally a bugfix or feature in the Angular service worker requires the invalidation of old caches. In this case, the app will be refreshed transparently from the network.

繞過 Service Worker

Bypassing the service worker

某些情況下,你可能想要完全繞過 Service Worker,轉而讓瀏覽器處理請求。比如當你要用到某些 Service Worker 尚不支援的特性時(例如報告檔案上傳的進度)。

In some cases, you may want to bypass the service worker entirely and let the browser handle the request instead. An example is when you rely on a feature that is currently not supported in service workers (e.g. reporting progress on uploaded files).

要想繞過 Service Worker,你可以設定一個名叫 ngsw-bypass 的請求頭或查詢引數。(這個請求頭或查詢引數的值會被忽略,可以把它設為空字串或略去。)

To bypass the service worker you can set ngsw-bypass as a request header, or as a query parameter. (The value of the header or query parameter is ignored and can be empty or omitted.)

除錯 Angular Service Worker

Debugging the Angular service worker

偶爾,可能會需要檢查執行中的 Angular Service Worker,以調查問題或確保它在按設計執行。 瀏覽器提供了用於除錯 Service Worker 的內建工具,而且 Angular Service Worker 本身也包含了一些有用的除錯功能。

Occasionally, it may be necessary to examine the Angular service worker in a running state to investigate issues or to ensure that it is operating as designed. Browsers provide built-in tools for debugging service workers and the Angular service worker itself includes useful debugging features.

定位並分析除錯資訊

Locating and analyzing debugging information

Angular Service Worker 會在虛擬目錄 ngsw/ 下暴露出除錯資訊。 目前,它暴露的唯一的 URL 是 ngsw/state。 下面是這個除錯頁面中的一段範例內容:

The Angular service worker exposes debugging information under the ngsw/ virtual directory. Currently, the single exposed URL is ngsw/state. Here is an example of this debug page's contents:

NGSW Debug Info: Driver state: NORMAL ((nominal)) Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c Last update check: never === Version eea7f5f464f90789b621170af5a569d6be077e5c === Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65 === Idle Task Queue === Last update tick: 1s496u Last update run: never Task queue: * init post-load (update, cleanup) Debug log:
      
      NGSW Debug Info:

Driver state: NORMAL ((nominal))
Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
Last update check: never

=== Version eea7f5f464f90789b621170af5a569d6be077e5c ===

Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65

=== Idle Task Queue ===
Last update tick: 1s496u
Last update run: never
Task queue:

 * init post-load (update, cleanup)

Debug log:
    

驅動程式的狀態

Driver state

第一行表示驅動程式的狀態:

The first line indicates the driver state:

Driver state: NORMAL ((nominal))
      
      Driver state: NORMAL ((nominal))
    

NORMAL 表示這個 Service Worker 正在正常執行,並且沒有處於降級執行的狀態。

NORMAL indicates that the service worker is operating normally and is not in a degraded state.

有兩種可能的降級狀態:

There are two possible degraded states:

  • EXISTING_CLIENTS_ONLY:這個 Service Worker 沒有該應用的最新已知版本的乾淨副本。 較舊的快取版本可以被安全的使用,所以現有的選項卡將繼續使用較舊的版本執行本應用, 但新的應用將從網路上載入。

    EXISTING_CLIENTS_ONLY: the service worker does not have a clean copy of the latest known version of the app. Older cached versions are safe to use, so existing tabs continue to run from cache, but new loads of the app will be served from the network. The service worker will try to recover from this state when a new version of the application is detected and installed (that is, when a new ngsw.json is available).

  • SAFE_MODE:Service Worker 不能保證使用快取資料的安全性。 發生了意外錯誤或所有快取版本都無效。 這時所有的流量都將從網路提供,儘量少執行 Service Worker 中的程式碼。

    SAFE_MODE: the service worker cannot guarantee the safety of using cached data. Either an unexpected error occurred or all cached versions are invalid. All traffic will be served from the network, running as little service worker code as possible.

在這兩種情況下,後面的括號註解中都會提供導致 Service Worker 進入降級狀態的錯誤資訊。

In both cases, the parenthetical annotation provides the error that caused the service worker to enter the degraded state.

這兩種狀態都是暫時的;它們僅在 ServiceWorker 實例 的生命週期內儲存。 瀏覽器有時會終止空閒的 Service Worker,以節省記憶體和處理能力,並建立一個新的 Service Worker 實例來響應網路事件。 無論先前實例的狀態如何,新實例均以 NORMAL 模式啟動。

Both states are temporary; they are saved only for the lifetime of the ServiceWorker instance. The browser sometimes terminates an idle service worker to conserve memory and processor power, and creates a new service worker instance in response to network events. The new instance starts in the NORMAL mode, regardless of the state of the previous instance.

最新清單的雜湊

Latest manifest hash

Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
      
      Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
    

這是 Service Worker 所知道的應用最新版本的 SHA1 雜湊值。

This is the SHA1 hash of the most up-to-date version of the app that the service worker knows about.

最後一次更新檢查

Last update check

Last update check: never
      
      Last update check: never
    

這表示 Service Worker 最後一次檢查應用程式的新版本或更新的時間。“never” 表示 Service Worker 從未檢查過更新。

This indicates the last time the service worker checked for a new version, or update, of the app. never indicates that the service worker has never checked for an update.

在這個除錯檔案範例中,這次更新檢查目前是已排期的,如下一節所述。

In this example debug file, the update check is currently scheduled, as explained the next section.

版本

Version

=== Version eea7f5f464f90789b621170af5a569d6be077e5c === Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
      
      === Version eea7f5f464f90789b621170af5a569d6be077e5c ===

Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
    

在這個例子中,Service Worker 擁有一個版本的應用程式快取並用它服務於兩個不同的選項卡。 請注意,這個版本雜湊值是上面列出的“最新清單的雜湊”。 它的兩個客戶執行的都是最新版本。每個客戶都用瀏覽器中 Clients API 的 ID 列了出來。

In this example, the service worker has one version of the app cached and being used to serve two different tabs. Note that this version hash is the "latest manifest hash" listed above. Both clients are on the latest version. Each client is listed by its ID from the Clients API in the browser.

空閒任務佇列

Idle task queue

=== Idle Task Queue === Last update tick: 1s496u Last update run: never Task queue: * init post-load (update, cleanup)
      
      === Idle Task Queue ===
Last update tick: 1s496u
Last update run: never
Task queue:

 * init post-load (update, cleanup)
    

空閒任務佇列是 Service Worker 中所有在後臺發生的未決任務的佇列。 如果這個佇列中存在任何任務,則列出它們的描述。 在這個例子中,Service Worker 安排的任務是一個用於更新檢查和清除過期快取的後期初始化操作。

The Idle Task Queue is the queue of all pending tasks that happen in the background in the service worker. If there are any tasks in the queue, they are listed with a description. In this example, the service worker has one such task scheduled, a post-initialization operation involving an update check and cleanup of stale caches.

最後的 tick/run 計數器給出了與特定事件發生有關的空閒佇列中的時間。 “Last update run” 計數器顯示的是上次執行空閒任務的時間。 “Last update tick” 顯示的是自上次事件以來可能要處理的佇列的時間。

The last update tick/run counters give the time since specific events happened related to the idle queue. The "Last update run" counter shows the last time idle tasks were actually executed. "Last update tick" shows the time since the last event after which the queue might be processed.

除錯日誌

Debug log

Debug log:
      
      Debug log:
    

在 Service Worker 中出現的任何錯誤都會記錄在這裡。

Errors that occur within the service worker will be logged here.

開發者工具

Developer Tools

Chrome 等瀏覽器提供了能與 Service Worker 互動的開發者工具。 這些工具在使用得當時非常強大,但也要牢記一些事情。

Browsers such as Chrome provide developer tools for interacting with service workers. Such tools can be powerful when used properly, but there are a few things to keep in mind.

  • 使用開發人員工具時,Service Worker 將繼續在後臺執行,並且不會重新啟動。 這可能會導致開著 Dev Tools 時的行為與使用者實際遇到的行為不一樣。

    When using developer tools, the service worker is kept running in the background and never restarts. This can cause behavior with Dev Tools open to differ from behavior a user might experience.

  • 如果你檢視快取儲存器的檢視器,快取就會經常過期。右鍵單擊快取儲存器的標題並重新整理快取。

    If you look in the Cache Storage viewer, the cache is frequently out of date. Right click the Cache Storage title and refresh the caches.

在 Service Worker 頁停止並重新啟動這個 Service Worker 將會觸發一次更新檢查。

Stopping and starting the service worker in the Service Worker pane triggers a check for updates.

Service Worker 的安全性

Service Worker Safety

像任何複雜的系統一樣,錯誤或損壞的配置可能會導致 Angular Service Worker 以不可預知的方式工作。 雖然它在設計時就嘗試將此類別問題的影響降至最低,但是,如果管理員需要快速停用 Service Worker, Angular Service Worker 也包含多種故障保護機制。

Like any complex system, bugs or broken configurations can cause the Angular service worker to act in unforeseen ways. While its design attempts to minimize the impact of such problems, the Angular service worker contains several failsafe mechanisms in case an administrator ever needs to deactivate the service worker quickly.

故障保護機制

Fail-safe

要停用 Service Worker,請刪除或重新命名 ngsw.json 檔案。 當 Service Worker 對 ngsw.json 的請求返回 404 時,Service Worker 就會刪除它的所有快取並登出自己,本質上就是自毀。

To deactivate the service worker, remove or rename the ngsw.json file. When the service worker's request for ngsw.json returns a 404, then the service worker removes all of its caches and de-registers itself, essentially self-destructing.

Safety Worker

@angular/service-worker NPM 套件中還包含一個小指令碼 safety-worker.js,當它被載入時就會把它自己從瀏覽器中登出。 這個指令碼可以作為終極武器來擺脫那些已經安裝在客戶端頁面上的不想要的 Service Worker。

Also included in the @angular/service-worker NPM package is a small script safety-worker.js, which when loaded will unregister itself from the browser. This script can be used as a last resort to get rid of unwanted service workers already installed on client pages.

要特別注意的是,你不能直接註冊這個 Safety Worker,因為具有已快取狀態的舊客戶端可能無法看到一個新的、用來安裝 另一個 worker 指令碼的 index.html。 相反,你必須在想要登出的 Service Worker 指令碼的 URL 中提供 safety-worker.js 的內容, 而且必須持續這樣做,直到確定所有使用者都已成功登出了原有的 Worker。 對大多數網站而言,這意味著你應該永遠為舊的 Service Worker URL 提供 這個 Safety Worker。

It's important to note that you cannot register this worker directly, as old clients with cached state may not see a new index.html which installs the different worker script. Instead, you must serve the contents of safety-worker.js at the URL of the Service Worker script you are trying to unregister, and must continue to do so until you are certain all users have successfully unregistered the old worker. For most sites, this means that you should serve the safety worker at the old Service Worker URL forever.

這個指令碼可以用來停用 @angular/service-worker 以及任何其它曾在你的站點上提供過的 Service Worker。

This script can be used both to deactivate @angular/service-worker as well as any other Service Workers which might have been served in the past on your site.

更改應用的位置

Changing your app's location

重要的是,要記住 Service Worker 無法在重新導向後工作。你可能已經遇到過這種錯誤:The script resource is behind a redirect, which is disallowed

It is important to note that service workers don't work behind redirect. You may have already encountered the error The script resource is behind a redirect, which is disallowed.

如果你不得不更改應用的位置,就可能會出現問題。如果你設定了從舊位置(例如 example.com )到新位置(例如 www.example.com)的重新導向,則 Service Worker 將停止工作。 同樣,對於完全從 Service Worker 載入該網站的使用者,甚至都不會觸發重新導向。老的 Worker(註冊在 example.com)會嘗試更新並將請求傳送到原來的位置 example.com,該位置重新導向到新位置 www.example.com 就會導致錯誤 The script resource is behind a redirect, which is disallowed

This can be a problem if you have to change your app's location. If you setup a redirect from the old location (for example example.com) to the new location (for example www.example.com) the worker will stop working. Also, the redirect won't even trigger for users who are loading the site entirely from Service Worker. The old worker (registered at example.com) tries to update and sends requests to the old location example.com which get redirected to the new location www.example.com and create the error The script resource is behind a redirect, which is disallowed.

為了解決這個問題,你可能需要用上述技巧(故障安全Safety Worker)之一殺死老的 Worker。

To remedy this, you may need to kill the old worker using one of the above techniques (Fail-safe or Safety Worker).

關於 Angular Service Worker 的更多資訊

More on Angular service workers

你可能還對下列內容感興趣:

You may also be interested in the following: