PWA 和 Django #PWA 中的在线和离线资源 - 使用 Django 开发渐进式 Web 应用程序
注意:首次发布于:https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline
欢迎来到 Django 渐进式 Web 应用程序系列的第三篇文章。在本章中,我们将学习如何为 PWA 缓存资源,以便能够在没有有效互联网连接的情况下离线使用它们。
实施离线功能
在前面的章节中,我们定义了一个小型 PWA 应用程序,其中包含每个必需的部分:清单和 ServiceWorker。我们学习了如何注册 PWA 并使用一些图像开发了一个非常简单的界面:
现在我们将学习如何在 PWA 缓存中存储数据以及如何选择加载每个图像的位置:从互联网或本地缓存。
为了在 PWA 缓存上存储一个或多个资源,我们在 ServiceWorker 上使用如下函数:
const CACHE_NAME = "DJANGO_PWA_TEST" const MAIN_URL = "https://laboratorio.alvarezperello.com/djangopwa/"; self.addEventListener("install", (event) => { console.info("*** PWA event *** install", event); event.waitUntil(activateApp()); }); self.addEventListener("activate", (event) => { console.info("*** PWA event *** activate", event); event.waitUntil(activateApp()); }); async function activateApp() { // When a service worker is initially registered, pages won't use it // until they next load. The claim() method causes those pages to be // controlled immediately. console.log('Claiming control...'); clients.claim().then((ev) => { console.log('...claimed!', ev); }) manageCache(); } self.addEventListener("sync", (event) => { console.info("*** PWA event *** sync", event); manageCache(); }); async function manageCache() { const cache = await caches.open(CACHE_NAME); if (!cache) { console.error("Error storing resources in cache!"); return; } storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake1.jpg"); //storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake2.png"); //storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake3.png"); } async function storeResourceInCache(cache, element) { console.log("Storing resource in cache: "+element); cache.add(element).then(event => { console.info("Resource stored successfully! "+element); }).catch(event => { console.error("Error storing resource! "+element, event); }); }
现在,当我们执行 PWA 时,我们可以在开发者控制台中读取缓存消息:
Registering service worker... ...register completed! The service worker is active! serviceworker.js: Claiming control... serviceworker.js: Resource already in cache! static/demo/img/snake1.jpg
我们的 PWA 缓存正在运行!
选择从何处加载每个资源
当 PWA 加载资源时,调用 fetch 事件,如下所示:
self.addEventListener("fetch", async (event) => { console.info("*** PWA event *** fetch", event); let url = event.request.url.toString(); console.info("The PWA is loading a resource from: "+url); });
我们现在可以控制请求,并且可以选择从何处返回请求的资源:从缓存或从互联网。
这是一个如何检查我们是否缓存了资源并从缓存中返回它的示例。并且,如果未缓存,请改为从互联网请求。
self.addEventListener("fetch", async (event) => { let url = event.request.url.toString(); if (!url.includes("static/demo/img/snake")) { return false; } const cache = await caches.open(CACHE_NAME); if (!cache) { console.error("Error loading resources from cache!"); return false; } let fetchResponsePromise = await cache.match(url).then(async (cachedResponse) => { if (cachedResponse && cachedResponse.ok) { console.warn("Loading from cache: "+url); return cachedResponse; } else { console.error("Error! the cache does not have this url! "+url); console.error(cache.keys()); remoteFetchResponsePromise = await fetch(event).then(async (networkResponse) => { console.warn("Loading from internet: "+url); return networkResponse; }); return remoteFetchResponsePromise; } }); return (await fetchResponsePromise); });
我们可以读取开发者控制台来了解每个图像是从哪里加载的,如下所示:
在下一章中
我们现在有了 PWA。现在我们将学习如何制作可安装的 PWA,它将在操作系统中显示为本机应用程序。这是 PWA 最强大的功能之一:我们可以使用它们来使用 Django 创建“几乎本机”的应用程序。
下一章见!
关于名单
在 Python 和 Docker 帖子中,我还会写一些其他相关主题,例如:
- 软件架构
- 编程环境
- Linux操作系统
- 等等
如果您发现了一些有趣的技术、编程语言或其他什么,请告诉我!我总是乐于学习新东西!
关于作者
我是 Andrés,一位来自帕尔马的全栈软件开发人员,我正在踏上提高编码技能的个人旅程。我也是一位自行出版的奇幻作家,以我的名义出版了四本小说。有什么问题都可以问我!
以上是PWA 和 Django #PWA 中的在线和离线资源 - 使用 Django 开发渐进式 Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

Python更易学且易用,C 则更强大但复杂。1.Python语法简洁,适合初学者,动态类型和自动内存管理使其易用,但可能导致运行时错误。2.C 提供低级控制和高级特性,适合高性能应用,但学习门槛高,需手动管理内存和类型安全。

要在有限的时间内最大化学习Python的效率,可以使用Python的datetime、time和schedule模块。1.datetime模块用于记录和规划学习时间。2.time模块帮助设置学习和休息时间。3.schedule模块自动化安排每周学习任务。

Python在开发效率上优于C ,但C 在执行性能上更高。1.Python的简洁语法和丰富库提高开发效率。2.C 的编译型特性和硬件控制提升执行性能。选择时需根据项目需求权衡开发速度与执行效率。

每天学习Python两个小时是否足够?这取决于你的目标和学习方法。1)制定清晰的学习计划,2)选择合适的学习资源和方法,3)动手实践和复习巩固,可以在这段时间内逐步掌握Python的基本知识和高级功能。

Python和C 各有优势,选择应基于项目需求。1)Python适合快速开发和数据处理,因其简洁语法和动态类型。2)C 适用于高性能和系统编程,因其静态类型和手动内存管理。

pythonlistsarepartofthestAndArdLibrary,herilearRaysarenot.listsarebuilt-In,多功能,和Rused ForStoringCollections,而EasaraySaraySaraySaraysaraySaraySaraysaraySaraysarrayModuleandleandleandlesscommonlyusedDduetolimitedFunctionalityFunctionalityFunctionality。

Python在自动化、脚本编写和任务管理中表现出色。1)自动化:通过标准库如os、shutil实现文件备份。2)脚本编写:使用psutil库监控系统资源。3)任务管理:利用schedule库调度任务。Python的易用性和丰富库支持使其在这些领域中成为首选工具。

Python在科学计算中的应用包括数据分析、机器学习、数值模拟和可视化。1.Numpy提供高效的多维数组和数学函数。2.SciPy扩展Numpy功能,提供优化和线性代数工具。3.Pandas用于数据处理和分析。4.Matplotlib用于生成各种图表和可视化结果。
