angular 支持PWA以及在同一URL上提供本地化应用和所有语言的服务,

1wnzp6jl  于 6个月前  发布在  Angular
关注(0)|答案(5)|浏览(50)

与该功能请求相关的@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-USda进行生产构建
  • 为两者添加了一个express脚本(默认为en-US)

应用程序运行良好,服务工作者注册自己,我可以查看缓存的文件。
但是,服务工作者从未在任何时候为这些文件提供服务。

使测试应用程序运行的方法

要使测试应用程序运行,请执行以下操作:

  1. 检出 https://github.com/michaelkrog/i18n-pwa-test
  2. cd i18n-pwa-test
  3. npm inpm run serve
r8xiu3jd

r8xiu3jd1#

几个月前,我们讨论了国际化(i18n)和URL。尽管www.google.com支持在单个域名上使用多种语言,但这种方法并不推荐。它与谷歌搜索的指南相冲突,即为不同语言版本使用不同的URL,并可能阻止谷歌找到并爬取所有您的语言变体。因此,我会谨慎地将其包含在文档中。
有关更多信息,请查看谷歌关于管理多区域网站的建议:https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites

kiayqfof

kiayqfof2#

我同意,出于SEO的目的,根据谷歌搜索指南,需要使用不同的URL。我们也在我们的SSR渲染网页(fx https://previsto.com/en , https://previsto.com/da 等)上这样做。但是当涉及到付费墙后面的应用程序时,搜索指南不再适用,但用户体验是重要的。

在我们的情况下,我们提供一个任务管理系统。如果用户复制一个任务的链接并与国际同事分享,我们发现最佳的用户体验是在没有任何关于语言细节的单个唯一URL(fx https://app.previsto.com/my-company/tasks/task-123 )。任务本身将以用户所写的语言显示,但应用程序本身应该以用户的首选语言显示。

o2g1uqev

o2g1uqev3#

我们为每种语言生成一个服务工作者,使用根目录下的index.html将传入的请求重定向到相应的/<lang> URL。每个构建都有一个服务工作者。
manifest.json文件将scope和start_url设置为相对路径,如下所示:

"scope": "./",
  "start_url": "./"
gtlvzcf8

gtlvzcf84#

@spock123 谢谢。
但是我们不会将浏览器重定向到应用程序的子路径(我们只对网站这样做)。所有语言都在同一URL上提供。根据他们首选的语言,我们选择要提供的本地化构建。
这样,我们的应用程序中就有深度URL,它们不定义应用程序的语言。
例如,如果我作为一个丹麦用户从浏览器复制一个深度URL并将其交给一位德国同事,我们两个都会从相同的深度URL获得以我们首选语言显示的UI。

mfpqipee

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:***@***.***>

相关问题