与该功能请求相关的@angular/*包有哪些?
service-worker
描述
某些用例需要具有本地化的ng应用程序在相同的URL上提供所有翻译的捆绑包。一个显著的例子是https://google.com,它在相同的URL上提供所有语言环境。
使用Angular应用程序设置起来并不容易,但可以实现——尽管将其与PWA支持结合似乎不可能。
这是对支持在相同URL上提供本地化PWA的所有语言环境或如何实现它的文档的愿望/请求。
背景:在相同的URL上提供本地化
使用fx express,我们可以根据首选语言提供正确的捆绑包。但是由于angular/angular-cli#17416,需要在URL中包含语言来提供所有js文件。我按照angular/angular-cli#17416(评论)的建议执行操作,并在fx处提供index.html。https://server/index.html和js文件也在fx处提供。(angular/angular-cli#17416(评论)提供了更多关于如何与路由一起使用以及所有内容的详细信息)
我们在https://app.previsto.com上运行了5个不同的语言版本,它们都在相同的URL上,所有的深链接都指向相同的内容,只是用户首选的语言中有应用程序的语言。
添加PWA
然而,我们无法使PWA正常工作。我们尝试在https://github.com/michaelkrog/i18n-pwa-test上创建一个非常简单的应用程序。然后:
- 添加了localize包(
ng add @angular/localize
) - 添加了pwa包(
ng add @angular/pwa
) - 调整angular.json以构建
en-US
和da
进行生产构建 - 为两者添加了一个express脚本(默认为
en-US
)
应用程序运行良好,服务工作者注册自己,我可以查看缓存的文件。
但是,服务工作者从未在任何时候为这些文件提供服务。
使测试应用程序运行的方法
要使测试应用程序运行,请执行以下操作:
- 检出 https://github.com/michaelkrog/i18n-pwa-test
cd i18n-pwa-test
npm i
和npm run serve
5条答案
按热度按时间r8xiu3jd1#
几个月前,我们讨论了国际化(i18n)和URL。尽管www.google.com支持在单个域名上使用多种语言,但这种方法并不推荐。它与谷歌搜索的指南相冲突,即为不同语言版本使用不同的URL,并可能阻止谷歌找到并爬取所有您的语言变体。因此,我会谨慎地将其包含在文档中。
有关更多信息,请查看谷歌关于管理多区域网站的建议:https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites
kiayqfof2#
我同意,出于SEO的目的,根据谷歌搜索指南,需要使用不同的URL。我们也在我们的SSR渲染网页(fx https://previsto.com/en , https://previsto.com/da 等)上这样做。但是当涉及到付费墙后面的应用程序时,搜索指南不再适用,但用户体验是重要的。
在我们的情况下,我们提供一个任务管理系统。如果用户复制一个任务的链接并与国际同事分享,我们发现最佳的用户体验是在没有任何关于语言细节的单个唯一URL(fx https://app.previsto.com/my-company/tasks/task-123 )。任务本身将以用户所写的语言显示,但应用程序本身应该以用户的首选语言显示。
o2g1uqev3#
我们为每种语言生成一个服务工作者,使用根目录下的index.html将传入的请求重定向到相应的
/<lang>
URL。每个构建都有一个服务工作者。manifest.json文件将scope和start_url设置为相对路径,如下所示:
gtlvzcf84#
@spock123 谢谢。
但是我们不会将浏览器重定向到应用程序的子路径(我们只对网站这样做)。所有语言都在同一URL上提供。根据他们首选的语言,我们选择要提供的本地化构建。
这样,我们的应用程序中就有深度URL,它们不定义应用程序的语言。
例如,如果我作为一个丹麦用户从浏览器复制一个深度URL并将其交给一位德国同事,我们两个都会从相同的深度URL获得以我们首选语言显示的UI。
mfpqipee5#
好的,我明白了。干杯...
2024年7月18日星期四上午8:36,Michael Krog ***@***.***>写道:@spock123 < https://github.com/spock123 > 谢谢。但是我们不会将浏览器重定向到应用程序的子路径(我们只为我们的网站这样做)。所有语言都在同一URL上提供。根据他们首选的语言,我们选择要提供的本地化构建。这样我们就可以在应用程序中使用深度URL,而不必定义应用程序的语言。例如,如果我作为一个丹麦用户从浏览器复制一个深度URL并将其交给一位德国同事,我们两个都会从相同的深度URL中获得以我们首选语言显示的UI。——直接回复此电子邮件,查看GitHub上的评论<#56910>,或取消订阅< https://github.com/notifications/unsubscribe-auth/AAJVM5BKRC4B3KN5R2QCQWLZM5PAJAVCNFSM6AAAAABKSOYWW2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZVG4ZTGOJRGI >。您收到此邮件是因为您被提及了。消息ID:***@***.***>