Clever Geek Handbook

服务人员对Web应用程序的影响

对于移动设备，基于Web的应用程序越来越“锐化”，服务人员是高级基于Web的应用程序（PWA）的基础。当您第一次查看这项技术时，您可能会觉得服务工作者的主要工作是缓存内容。就是这样。服务人员的任务是确保在不稳定或完全不存在与网络的连接的情况下Web应用程序的功能，这是通过使用数据缓存来实现的。



在削减计划的基础上，引发了一些有关Web应用程序后果的想法，即通过服务工作者缓存数据的能力的出现。



PWA架构



这是Web应用程序的经典三层体系结构：





在客户端上添加服务工作者和数据持久性工具（Cache API和IndexedDB）将三层体系结构转变为五层体系结构：





实际上，在没有网络连接的情况下，渐进式Web应用程序应以经典的三层模式在客户端上运行：





当出现到网络的连接时，请转到五个级别：



  1. 演示（主线程）：用户界面；
  2. 客户端逻辑（服务人员）：用于处理特定用户数据的业务逻辑，考虑了脱机和联机模式下的工作；
  3. 客户端数据（缓存API和IndexedDB）：用户特定的数据存储；
  4. Server Logic (Server): - ;
  5. Server Data (DB): ;


Offline first



web- mobile first. PWA — offline first. , ( ), .



, service worker' , . — . — (online/offline) .



, offline- — , ( - ) - , .





:





  • : , (HTML/CSS/JS/images/...);
  • (API): ( , JSON), ( ), ( );


() Cache API — "" — ""



(API) — IndexedDB (NoSQL JSON).





Cache



Chrome' Application / Cache / Cache Storage / < >, :





, , CDN , .



IndexedDB



Chrome' Application / Storage / IndexedDB / < > / < >, :





CRUD-, , . IndexedDB . , .



, .



service worker'



- service worker' . ( webpack') . service worker' WorkerGlobalScope.importScripts(). , . service worker' :



import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });


, service worker', . — service worker web- offline-, .





service worker' ( IndexedDB) (PWA offline) ( — — ). Online- PWA "" : Client Logic/Data — Server Logic/Data. - web- : , , (, ACL ).



service worker' - service worker' (, ES6 import), service worker' , - Main Thread ( ).



web-, , :





Service worker . , online offline (.. ).



上面的内容可能使某些人感到困惑，但是在撰写本文之前，我对服务工作者在渐进式Web应用程序中的作用的理解更加令人困惑。对于进一步阐明服务人员任务以及如何使用它们的评论，我将不胜感激。



链接





More articles:


All Articles