使用 service-worker 构建一个 angular 应用程序以在子目录中使用
Building an angular app with service-worker for using in sub-directory
有没有办法构建一个 angular 应用程序,因此它可以在多个子目录中工作,例如:
example.com/customerOne/
example.com/customerTwo/
example.com/customerThree/
如果我只使用 ng build --prod
,服务人员希望在用户离线时从 example.com
获取文件。
我的 index.html 使用
<base href="./" />
ServiceWorkerModule 注册如下:
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
如果可能的话,我不想为每个客户构建,或使用范围服务工作者。
有可能吗?
更新
我现在尝试了不同的构建配置:
ng build --prod --base-href ./ --deploy-url ./
它似乎生成了一个 ngsw.json 应该可以工作的文件?!但不幸的是,离线时它不起作用。
{
"configVersion": 1,
"index": "./index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"./common.99ba582125e1578d10cd.js",
"./index.html",
"./main.4bfd5158f8760f6437ea.js",
"./polyfills.0fbb99b6827212146275.js",
"./runtime.3d2d705784cd950436e9.js",
"./styles.268bb547bc6265af274a.css",
"./vendor.605927c5807ddc13f37d.js"
],
"patterns": []
},
{
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"./assets/background.jpg",
"./assets/i18n/de.json",
"./assets/icon/favicon.png",
"./assets/splash/ipad_splash.png",
"./assets/splash/ipadpro1_splash.png",
"./assets/splash/ipadpro2_splash.png",
"./assets/splash/iphone5_splash.png",
"./assets/splash/iphone6_splash.png",
"./assets/splash/iphoneplus_splash.png",
"./assets/splash/iphonex_splash.png",
"./assets/splash/splash_2208px.png"
],
"patterns": []
}
],
"dataGroups": [],
"hashTable": {
"./common.99ba582125e1578d10cd.js": "8a6798ba18b916daaaf2d02f82a9534a2e18194c",
"./index.html": "8b5f0e32aea68bd7bbd5702eddd921c31727dfec",
"./main.4bfd5158f8760f6437ea.js": "6d24a5d2a8a78dec6d88561322b0b42c684f6bba",
"./polyfills.0fbb99b6827212146275.js": "0640677f20e93d8ac14140a2b65321a620805f53",
"./runtime.3d2d705784cd950436e9.js": "6d6cf18db89319bbf712acced49f91d0ca23f8fa",
"./styles.268bb547bc6265af274a.css": "32604c26369aa52d21a3c3cde5fb11fa92eb1500",
"./vendor.605927c5807ddc13f37d.js": "8edcc68ede502aacf57469e56fcd3751c52f8e8b"
...
},
"navigationUrls": [
{
"positive": true,
"regex": "^\/.*$"
},
{
"positive": false,
"regex": "^\/(?:.+\/)?[^/]*\.[^/]*$"
},
{
"positive": false,
"regex": "^\/(?:.+\/)?[^/]*__[^/]*$"
},
{
"positive": false,
"regex": "^\/(?:.+\/)?[^/]*__[^/]*\/.*$"
}
]
}
有什么建议吗?
我弯腰使用 @ngular/serviceworker
因为我做不到 运行。
我正在使用 workbox。
配置:
module.exports = {
globDirectory: 'www',
globPatterns: ['**/*.{css,html,js,json,png,jpg,jpeg,svg,ico}'],
swDest: 'www\sw.js',
swSrc: 'src\sw.js',
maximumFileSizeToCacheInBytes: 28 * 1024 * 1024
};
sw.js:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
workbox.setConfig({
debug: false
});
self.addEventListener('message', function (event) {
if (event.data.action === 'skipWaiting') {
self.skipWaiting();
}
});
if (workbox) {
console.log(`Yay! Workbox is loaded `);
workbox.precaching.precacheAndRoute([]);
} else {
console.log(`Boo! Workbox didn't load `);
}
并用于构建:
workbox injectManifest
开箱即用
有没有办法构建一个 angular 应用程序,因此它可以在多个子目录中工作,例如:
example.com/customerOne/
example.com/customerTwo/
example.com/customerThree/
如果我只使用 ng build --prod
,服务人员希望在用户离线时从 example.com
获取文件。
我的 index.html 使用
<base href="./" />
ServiceWorkerModule 注册如下:
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
如果可能的话,我不想为每个客户构建,或使用范围服务工作者。
有可能吗?
更新
我现在尝试了不同的构建配置:
ng build --prod --base-href ./ --deploy-url ./
它似乎生成了一个 ngsw.json 应该可以工作的文件?!但不幸的是,离线时它不起作用。
{
"configVersion": 1,
"index": "./index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"./common.99ba582125e1578d10cd.js",
"./index.html",
"./main.4bfd5158f8760f6437ea.js",
"./polyfills.0fbb99b6827212146275.js",
"./runtime.3d2d705784cd950436e9.js",
"./styles.268bb547bc6265af274a.css",
"./vendor.605927c5807ddc13f37d.js"
],
"patterns": []
},
{
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"./assets/background.jpg",
"./assets/i18n/de.json",
"./assets/icon/favicon.png",
"./assets/splash/ipad_splash.png",
"./assets/splash/ipadpro1_splash.png",
"./assets/splash/ipadpro2_splash.png",
"./assets/splash/iphone5_splash.png",
"./assets/splash/iphone6_splash.png",
"./assets/splash/iphoneplus_splash.png",
"./assets/splash/iphonex_splash.png",
"./assets/splash/splash_2208px.png"
],
"patterns": []
}
],
"dataGroups": [],
"hashTable": {
"./common.99ba582125e1578d10cd.js": "8a6798ba18b916daaaf2d02f82a9534a2e18194c",
"./index.html": "8b5f0e32aea68bd7bbd5702eddd921c31727dfec",
"./main.4bfd5158f8760f6437ea.js": "6d24a5d2a8a78dec6d88561322b0b42c684f6bba",
"./polyfills.0fbb99b6827212146275.js": "0640677f20e93d8ac14140a2b65321a620805f53",
"./runtime.3d2d705784cd950436e9.js": "6d6cf18db89319bbf712acced49f91d0ca23f8fa",
"./styles.268bb547bc6265af274a.css": "32604c26369aa52d21a3c3cde5fb11fa92eb1500",
"./vendor.605927c5807ddc13f37d.js": "8edcc68ede502aacf57469e56fcd3751c52f8e8b"
...
},
"navigationUrls": [
{
"positive": true,
"regex": "^\/.*$"
},
{
"positive": false,
"regex": "^\/(?:.+\/)?[^/]*\.[^/]*$"
},
{
"positive": false,
"regex": "^\/(?:.+\/)?[^/]*__[^/]*$"
},
{
"positive": false,
"regex": "^\/(?:.+\/)?[^/]*__[^/]*\/.*$"
}
]
}
有什么建议吗?
我弯腰使用 @ngular/serviceworker
因为我做不到 运行。
我正在使用 workbox。
配置:
module.exports = {
globDirectory: 'www',
globPatterns: ['**/*.{css,html,js,json,png,jpg,jpeg,svg,ico}'],
swDest: 'www\sw.js',
swSrc: 'src\sw.js',
maximumFileSizeToCacheInBytes: 28 * 1024 * 1024
};
sw.js:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
workbox.setConfig({
debug: false
});
self.addEventListener('message', function (event) {
if (event.data.action === 'skipWaiting') {
self.skipWaiting();
}
});
if (workbox) {
console.log(`Yay! Workbox is loaded `);
workbox.precaching.precacheAndRoute([]);
} else {
console.log(`Boo! Workbox didn't load `);
}
并用于构建:
workbox injectManifest
开箱即用