Jsp 如何在AEM中集成PWA（progressiev web app）？_Jsp_Microservices_Aem_Service Worker_Progressive Web Apps

Jsp 如何在AEM中集成PWA（progressiev web app）？

jsp microservices aem

Jsp 如何在AEM中集成PWA（progressiev web app）？,jsp,microservices,aem,service-worker,progressive-web-apps,Jsp,Microservices,Aem,Service Worker,Progressive Web Apps,有人能帮我把PWA集成到AEM中吗。任何基本的想法都将受到赞赏。我的网站基于AEM内置的微服务。我想在我的网站上实现PWA。请指导我。以下文档介绍如何在AEM中构建PWA 先决条件： “Adobe Experience Manager 6.4.0”的工作实例。已安装演示webapp“weretail”（这是AEM默认安装的一部分）。主机的SSL设置已完成，即可以通过https访问“weretail”webapp 请确保您可以访问演示webapp“weretail”和相应的AEM管理界面。在本

有人能帮我把PWA集成到AEM中吗。任何基本的想法都将受到赞赏。我的网站基于AEM内置的微服务。我想在我的网站上实现PWA。请指导我。

以下文档介绍如何在AEM中构建PWA

先决条件： “Adobe Experience Manager 6.4.0”的工作实例。已安装演示webapp“weretail”（这是AEM默认安装的一部分）。主机的SSL设置已完成，即可以通过https访问“weretail”webapp

请确保您可以访问演示webapp“weretail”和相应的AEM管理界面。在本文的其余部分中，我们假设以下URL：管理界面：数字资产管理器（DAM）接口： Weretail网络应用程序：

根据您自己的系统需要调整URL。开始在浏览器中打开“weretail”Web应用程序

使用Lighthouse测试网站（例如，使用Chrome开发工具中的内置“审计”功能）。“weretail”webapp未通过“PWA”审核

将“weretail”Web应用程序变成PWA 从技术角度来看，如果添加以下额外资源，每个网站都可以变成PWA：

服务工作者，一个浏览器在后台运行的JS脚本，与网页分开，为不需要网页或用户交互的功能打开了大门
Web应用程序清单是一个简单的JSON文件，它告诉浏览器有关您的Web应用程序以及在用户的移动设备或桌面上“安装”时应如何运行
“离线”网页，一个简单的HTML页面，当没有可用的网络连接时将显示给用户
一组图标，这些图标用于主屏幕、应用程序启动程序、任务切换程序、启动屏幕等位置

服务人员在下面的示例中，我们使用一个非常简单的服务人员，基于，它提供以下PWA功能：

基本缓存
基本脱机模式
推送通知

文件“sw.js”的内容： Web应用程序清单 PWA的“添加到主屏幕”功能需要Web应用程序清单。一个非常简单的manifest.json文件可能如下所示：

{
  "short_name": "weretail",
  "name": "WE.Retail demo webapp",
  "icons": [
    {
      "src": "/content/dam/we-retail/en/experiences/48-hours-of-wilderness/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/content/dam/we-retail/en/experiences/48-hours-of-wilderness/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/content/we-retail",
  "theme_color": "#3367D6"
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Offline Page</title>
  <script>
      window.addEventListener('online', function(e) {
        location.reload();
      }, false);
  </script>
 </head>
 <body>
   <div style="text-align:center; margin-top:40px;">
     <img src="/content/dam/we-retail/en/experiences/48-hours-of-wilderness/offline.svg" height="80" />
     <p>You don't have an internet connection.</p>
     <p>Please check your network connection and try again.</p>
   <div>
  </body>
</html>

“离线”网页如果浏览器未连接到网络，则会向用户显示“脱机”网页。一个非常简单的示例网页如下所示：

{
  "short_name": "weretail",
  "name": "WE.Retail demo webapp",
  "icons": [
    {
      "src": "/content/dam/we-retail/en/experiences/48-hours-of-wilderness/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/content/dam/we-retail/en/experiences/48-hours-of-wilderness/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/content/we-retail",
  "theme_color": "#3367D6"
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Offline Page</title>
  <script>
      window.addEventListener('online', function(e) {
        location.reload();
      }, false);
  </script>
 </head>
 <body>
   <div style="text-align:center; margin-top:40px;">
     <img src="/content/dam/we-retail/en/experiences/48-hours-of-wilderness/offline.svg" height="80" />
     <p>You don't have an internet connection.</p>
     <p>Please check your network connection and try again.</p>
   <div>
  </body>
</html>


脱机页面
window.addEventListener（'online'，函数（e）{
location.reload（）；
}，假）；
您没有internet连接
请检查您的网络连接，然后重试

一组图标这些图标用于主屏幕、应用程序启动器、任务切换程序、闪屏等位置。PWA至少需要两个分辨率为192x192像素和512x512像素的图标

向AEM添加所有内容可以通过“数字资产管理器”上传manifest.json、图标和脱机页面等静态资源

如果服务人员应控制整个webapp，则服务人员应生活在“/content/we retail”下。从技术上讲，服务人员可以安置在任何地方，但如果服务人员不住在网站的根目录中，那么PWA仅限于为网站的（子）部分工作

有关服务人员“范围”的更多详细信息，请参见：

最后一步是将sw.js文件+manifest.json文件包含到webapp中。在这个非常简单的演示中，我们只需修改文件“/apps/weretail/components/structure/page/customheaderlibs.html”

应将以下代码行添加到文件“customheaderlibs.html”：

<link rel="manifest" crossorigin="use-credentials" href="/content/dam/we-retail/en/experiences/48-hours-of-wilderness/manifest.json">
<link rel="apple-touch-icon" href="/apps/weretail/components/structure/page/clientlib/resources/apple-touch-icon.png">


<meta name="theme-color" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script> 
  if ('serviceWorker' in navigator) 
  {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/content/we-retail/sw.js');   
    }); 
}
</script>


if（导航器中的“serviceWorker”）
{
window.addEventListener（'load'，（）=>{
register（'/content/we-retail/sw.js'）；
}); 
}

保存所有更改并重新加载webapp。如果一切都正确，那么webapp现在已经变成了PWA。请使用Lighthouse再次验证webapp。

您好，因此不是提出基于意见的问题的地方。请阅读但更具体地了解此问题