PWA指的是渐进式web应用，一般由Web App Manifest、Service Worker、App Shell、通知推送等组成。 目前，本文只讨论web app manifest、service worker如何应用到项目中。 appmanifest可以使应用程序可安装。 可以通过浏览器将应用程序添加到桌面，这样就可以从桌面直接访问它们。同时，可以定义桌面图标、应用程序名称和系统状态栏颜色。通过这些，我们可以使我们的应用程序看起来像一个原生应用程序。 从而给客户更好的体验。 从产品的角度来看，客户从桌面图标访问我们的应用程序比通过浏览器更方便。同时，客户可以隐藏浏览器本身的少数控件，如导航栏、底部设置等控件。 而实现这一切只需要很小的代价。 所有这些都需要添加一个manifest.json文件。 注意:在开始尝试之前，请确保您的应用程序可以在https中使用。 如果没有，那么你最好等你的应用https后再试。 AppManifest我们来看看manifest.json文件是什么样子的:Web App Manifest文档{"name ":"前台收集器"，" short _ name ":"fedaily "，" orientation ":"portrait "，" display": "standalone "，" start _ URL": "/"，" description ":"只收藏好的，只推荐好的"，" background _ color": "# 000 "，" theme _ color": "# 000 "，" icons": [{"src": "icon.png "，" size ":" 96x 96 "，" type": "image...可以添加各种大小的图标]}对于iOS平台，我们需要以标签的形式添加:iOS应用程序的官方文档< link rel = " apple-touch-icon " href = " icon . png " & gt；& ltmeta = " apple-mobile-we b-app-title " content = "前台收藏" >:& ltmeta name = " apple-mobile-we b-app-capable " content = " yes " & gt；& ltmeta name = " apple-mobile-we b-app-status-bar-style " content = " black " & gt；& ltmeta name = " theme-color " content = " # 000000 " >然后将这个json文件引入到html中。 & ltlink rel = " manifest " href = "/manifest . JSON " & gt。注意需要放在项目的根目录下，否则会导致Android无法自动弹出添加到桌面的提醒(你可能会问，iOS会有这个问题吗？没有，iOS根本不支持这个功能) 当你这样做的时候，一个可以安装在桌面上的应用就诞生了。 你可以在Android的chrome浏览器中访问你的应用，然后通过设置-添加到桌面将你的应用添加到桌面。 您可以使用iOS的safari浏览器访问您的应用程序，然后单击底部的引用按钮-添加到主屏幕，将您的应用程序添加到桌面。 Serviceserviceworker是在指定的源和路径下注册的事件驱动的工作器。 它使用JavaScript来控制相关页面或网站，阻止和修改访问和资源请求，并以细粒度缓存资源。 在特定情况下(最常见的情况是网络不可用)可以完全控制应用。 服务worker在worker上下文中运行，因此它不能访问DOM。 与驱动应用的主JavaScript线程相比，它运行在其他线程中，所以不会造成阻塞。 它被设计成完全异步的，同步API(如XHR和localStorage)不能在service worker中使用。 出于安全考虑，服务人员只能由HTTPS接待。毕竟，在遭受中间人攻击时，修改网络请求的能力将非常危险。 在Firefox浏览器的客户隐私模式下，服务人员不可用。 Worker的具体API和详细的细节，你可以在网上搜一下相关资料，都很详细。这里有一个非常方便的获取细节的方法。 Workbox webpack插件可以和webpack集成，几乎不用配置就可以实现我们需要的大部分功能。 我们来看看如何使用:NewGeneratesW ({swdest:' sw.js '，Skipwaiting: true，ClientsClaim: true，CleanupoutDateCache: true，inlineworkboxruntime: true，运行时缓存:[{handler:' network first '，URL pattern:/\/API/，method:' get '，}]})这个插件会读取webpack自己构建的静态资源文件，比如。js，。css，。png和其他资源，并将它们添加到缓存列表中，因此无需在此指定。 例如，通过runtimeCaching，我们可以缓存api的返回值。在此，我们建议慎重考虑。如果你不是特别在意你的应用在断网时的体验(作为一个web应用，绝大多数情况下，断网时你什么都做不了，所以尽量不要缓存api数据，只缓存静态资源。如果缓存策略不合适，可能会导致少量意外的bug。)这个插件会根据你的配置自动生成维修工人文件。不是很简单吗？然后你需要做的就是进入你的html并注册servie worker。 & lt脚本& gtif(' service worker ' in navigator){ window . addevent listener(' load '，()= & gt{ navigator . service worker . register(`/SW . js？${Date.now()} `)。然后(注册= & gt{ console.log('SW已注册: '，registration) })。catch(注册错误= & gt{ console.log('SW注册失败: '，registration error)} })} } & lt；/script & gt；注意:sw.js文件和manifest.json一样，需要放在项目的根目录下。 至此，其实我们已经有了一个可以使用的基本pwa应用。 如果还需要少量的定制需求，可以详细阅读workbox文档来实现。 开发Android chrome遇到的问题没有在桌面弹出。检查您的manifest.json、sw.js文件是否在项目的根目录中。 以及sw能否注册成功。 将Android添加到桌面的过程非常缓慢，但我们还没有找到好的解决方案。如何判断是否可以从主屏幕访问？我们需要区分客户是从浏览器访问还是从主屏幕访问，可以这样判断:export const is from desktop =()= >；{ // window.navigator.standalone用于safari if(window . navigator . standalone){ return true；} if(window . match media & amp；& ampwindow.matchMedia('(显示模式:独立)')。matches) {返回true}返回false};如何侦听添加的桌面事件LetDeferredPromptWindow。addevent listener(' before install prompt '，event = >；{ console.log('安装事件触发器'，事件)；//禁止浏览器自动显示添加到桌面的提醒框e . prevent default()；//存储事件对象，以便以后设置弹窗机会，deferred prompt = e；//然后你可以给客户显示一个自己设置的提醒框，告诉他们//你可以把应用添加到桌面，同时告诉他们如何操作})//然后监听你设置提醒框的按钮，点击事件按钮install . addevent Listener(' click '，(e)= >；{//隐藏我们自己的弹出窗口hideminstallpromotion()；//显示桌面提醒框添加的deferredPrompt.prompt()(浏览器提供)；//这里可以得到客户的选择，同时做少量的嵌入相关操作deferred prompt.user choice.then((选择结果)= >；{ if(choice result . outcome = = = ' accepted '){ console . log(' customer accepted ')；} else {console.log('客户拒绝')；} })});未能添加到主屏幕。Android浏览器可能不会打开添加到主屏幕的权限。如果没有，就不会在主屏幕上添加警告框。你需要打开权限再试一次(所以一个自己设置的提示框还是很重要的，可以告诉客户如何解决故障。测试后，对于权限导致的失败，不会向客户发出警报。)如何抓取成功安装动作window . addevent Listener(' app installed '，(evt)= { console . log(' app installed '，evt)；})如何注销sw// registrations是(let registration of registrations){ registration . unregister()}如何降级的参数。建议配置一个接口，根据接口决定是否可以进行软件注册过程，否则现有软件将被注销。 这样可以轻松解决线上问题。 示例:fetch ('/API/SW/')。然后(result = >；{if (result) {//注册操作} else {//注销操作}})写到这里，就像实际开发过程中还是有很多问题，但总的来说PWA还是值得一试的。 毕竟体验大不一样。 后来遇到其他问题，就升级了。也欢迎大家积极留言交流。 微信官方账号:前台收款员 收集全网优秀前端技术信息，与您一起咨询，共同成长。