Angular 2+使用sw-precache和github項目頁面

我有一個簡單的Angular應用程序，我試圖讓它脫機 - 可以在服務人員的幫助下完成。我按照有關如何設置服務工作者本教程：Angular 2+使用sw-precache和github項目頁面

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

的SW和應用程序本身工作正常，當我在我自己的開發機器上運行它，但我想在Github上部署該項目頁面：https://zyxon.github.io/AngTodo/

已經上傳的文件夾dist（因爲我在我的開發服務器上做相同）的服務人員無法註冊的內容，由於得到404的上assets文件夾的內容。它在/assets/...中查找文件。

我最好的猜測是它可以在我的開發服務器上工作，因爲應用程序託管在web服務器ROOT中，但是在Github頁面的情況下，託管在.../AngTodo目錄中。

所以我的問題如下：如何指定sw-precache輸出帶附加前綴的SW（在我的情況下爲/AngTodo/assets/...）？

我sw-precache-config.js如下：

module.exports = { 
    navigateFallback: '/index.html', 
    stripPrefix: 'dist', 
    root: 'dist/', 
    staticFileGlobs: [ 
     'dist/index.html', 
     'dist/**.js', 
     'dist/**.css', 
     'dist/assets/**.js', 
     'dist/assets/**.css', 
     'dist/assets/bootstrap/css/**.css', 
     'dist/assets/bootstrap/js/**.js', 
     'dist/assets/font-awesome/css/**.css', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/fonts/*.svg', 
     'dist/assets/font-awesome/fonts/*.ttf*', 
     'dist/assets/font-awesome/fonts/*.woff*', 
     'dist/assets/font-awesome/fonts/*.woff2*', 
     'dist/assets/font-awesome/fonts/*.otf', 
     'dist/assets/font-awesome/fonts/*.*', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/less/*.less', 
     'dist/assets/font-awesome/scss/*.scss', 
     'dist/assets/img/*.png', 
     'dist/assets/jquery/*.js', 
     'dist/assets/popper/*.js' 
    ] 
    };

來源

2017-09-01 János Schneider

我已經找到了解決我的問題。引述SW-預緩存文件：

replacePrefix [字符串]

取代在路徑的URL在運行時的開頭指定的字符串。當您在運行時從不同目錄提供靜態文件時，請使用此選項。例如，如果您的本地文件位於dist/app /下，但您的靜態資產根目錄位於/ public /，則會剝離「dist/app /」並將其替換爲「/ public /」。

默認值： ''

我不得不更新我的sw-precache-config.js：

module.exports = { 
    navigateFallback: '/index.html', 
    stripPrefix: 'dist/', 
    replacePrefix: 'AngTodo/', 
    root: 'dist/', 
    staticFileGlobs: [ 
     'dist/index.html', 
     'dist/**.js', 
     'dist/**.css', 
     'dist/assets/**.js', 
     'dist/assets/**.css', 
     'dist/assets/bootstrap/css/**.css', 
     'dist/assets/bootstrap/js/**.js', 
     'dist/assets/font-awesome/css/**.css', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/fonts/*.svg', 
     'dist/assets/font-awesome/fonts/*.ttf*', 
     'dist/assets/font-awesome/fonts/*.woff*', 
     'dist/assets/font-awesome/fonts/*.woff2*', 
     'dist/assets/font-awesome/fonts/*.otf', 
     'dist/assets/font-awesome/fonts/*.*', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/less/*.less', 
     'dist/assets/font-awesome/scss/*.scss', 
     'dist/assets/img/*.png', 
     'dist/assets/jquery/*.js', 
     'dist/assets/popper/*.js' 
    ] 
    };

來源

2017-09-01 11:08:09

用戶也可以提供一個範圍

navigator.serviceWorker.register('/service-worker.js').then(function(reg) { 
    scope:'/my-app/' 
});

的SW將控制其URL開頭的任何頁面與一個範圍，並會忽略不這樣做。所以，上面的例子中的服務人員將

/我的應用程序內/ - >控制它

/我的應用程序內/你好/世界 - >控制它

/- 不>控制它

/另一個應用程序內/ - >無法控制它

/我 - 應用程序 - >無法控制它

這將成爲非常方便的在多個項目中有SA GitHub的頁面我出身。範圍允許您爲每個項目提供不同的服務人員。默認範圍由SW腳本的位置確定。

來源

2017-09-02 15:09:58

這實際上是非常有用的。謝謝！ –

Angular 2+使用sw-precache和github項目頁面

回答

相關問題