styles.css:

/* styles.css */body {  font-family: Arial, sans-serif;  text-align: center;  background-color: #f0f0f0;  color: #333;}

app.js:

// app.jsif (\\'serviceWorker\\' in navigator) {  window.addEventListener(\\'load\\', () => {    navigator.serviceWorker.register(\\'/service-worker.js\\')      .then(registration => {        console.log(\\'ServiceWorker registered: \\', registration);      })      .catch(error => {        console.log(\\'ServiceWorker registration failed: \\', error);      });  });}

6. 设置 Service Worker

Service Worker 是浏​​览器在后台运行的脚本,与网页分开。它拦截网络请求并可以缓存资源以提高性能和离线能力。

service-worker.js:

// service-worker.jsconst CACHE_NAME = \\'my-pwa-cache-v1\\';const urlsToCache = [  \\'/\\',  \\'/styles.css\\',  \\'/app.js\\',  \\'/manifest.json\\',  \\'/icon-192x192.png\\',  \\'/icon-512x512.png\\'];self.addEventListener(\\'install\\', event => {  event.waitUntil(    caches.open(CACHE_NAME)      .then(cache => {        return cache.addAll(urlsToCache);      })  );});self.addEventListener(\\'fetch\\', event => {  event.respondWith(    caches.match(event.request)      .then(response => {        return response || fetch(event.request);      })  );});

7. 设置服务器

server.js:

const express = require(\\'express\\');const path = require(\\'path\\');const app = express();const PORT = process.env.PORT || 3000;app.use(express.static(path.join(__dirname, \\'public\\')));app.listen(PORT, () => {  console.log(`Server is running on http://localhost:${PORT}`);});

运行服务器:

node server.js

8. 测试你的 PWA

  1. 打开应用程序:

  2. 服务人员注册:

  3. 添加到主屏幕:

9. PWA 的最佳实践

最佳实践:

10. 结论

总结涵盖的要点:

11. 其他资源

","image":"http://www.luping.net/uploads/20240819/172406232366c31a735dfeb.jpg","datePublished":"2024-08-19T18:12:03+08:00","dateModified":"2024-08-19T18:12:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 渐进式 Web 应用程序 (PWA)

渐进式 Web 应用程序 (PWA)

发布于2024-08-19
浏览:542

Progressive Web Apps (PWAs)

构建渐进式 Web 应用程序 (PWA)

在这篇文章中,我们将探讨渐进式 Web 应用程序 (PWA),这是一种构建 Web 应用程序的现代方法,可提供类似本机应用程序的体验。我将介绍 PWA 的基础知识、它们的优点以及从头开始创建 PWA 的步骤。

1. 渐进式 Web 应用程序 (PWA) 简介

什么是渐进式 Web 应用程序 (PWA)?

渐进式 Web 应用程序是一种通过 Web 交付的应用程序软件,使用常见的 Web 技术(包括 HTML、CSS 和 JavaScript)构建。 PWA 旨在在使用符合标准的浏览器的任何平台上工作。

PWA 的主要特点:

  • 响应式:适用于任何设备和屏幕尺寸。
  • 离线功能:使用 Service Worker 离线或网络条件较差的情况下运行。
  • 类应用程序体验:提供类似应用程序的用户体验,具有主屏幕安装等功能。
  • 安全:通过 HTTPS 提供服务,以防止窥探并确保内容完整性。
  • 可重新参与:启用推送通知以保持用户参与。

2. PWA 的优点

为什么要构建 PWA?

  • 改进的性能:加载时间更快,交互更流畅。
  • 增强用户参与度:推送通知和主屏幕访问。
  • 降低开发成本:适用于网络和移动体验的单一代码库。
  • SEO 优势:PWA 可以被搜索引擎发现。

3. 设置 PWA

先决条件:

  • HTML、CSS 和 JavaScript 的基础知识。
  • 已安装 Node.js 和 npm/yarn。

创建一个简单的 PWA:

  1. 项目设置:

    mkdir my-pwa
    cd my-pwa
    npm init -y
    npm install express
    
  2. 项目结构:

    my-pwa/
    ├── public/
    │   ├── index.html
    │   ├── styles.css
    │   └── app.js
    ├── server.js
    ├── package.json
    └── manifest.json
    

4. 创建清单文件

manifest.json:

清单文件提供有关 PWA 的元数据,并且是在主屏幕上安装应用程序所必需的。

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. 创建 HTML、CSS 和 JavaScript 文件

index.html:



  
  
  My PWA
  
  


  

Welcome to My Progressive Web App!

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

6. 设置 Service Worker

Service Worker 是浏​​览器在后台运行的脚本,与网页分开。它拦截网络请求并可以缓存资源以提高性能和离线能力。

service-worker.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

7. 设置服务器

server.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

运行服务器:

node server.js

8. 测试你的 PWA

  1. 打开应用程序:

    • 在浏览器中导航至 http://localhost:3000。
  2. 服务人员注册:

    • 打开开发者工具(F12 或右键单击并选择“检查”)。
    • 转到“应用程序”选项卡。
    • 在“Service Workers”下,您应该会看到已注册的 Service Worker。
  3. 添加到主屏幕:

    • 在移动设备上,在浏览器中打开 PWA。
    • 您应该会看到“添加到主屏幕”的提示。

9. PWA 的最佳实践

最佳实践:

  • 使用 HTTPS:PWA 需要安全上下文。
  • 优化图像:使用响应式图像和延迟加载。
  • 最小化网络请求:有效缓存资源。
  • 确保离线功能:提供有意义的离线体验。

10. 结论

总结涵盖的要点:

  • PWA 简介及其优点。
  • 使用清单、Service Worker 和缓存设置简单的 PWA。
  • 构建强大的 PWA 的最佳实践。

11. 其他资源

  • PWA 文档
  • 有关高级 PWA 主题的教程和指南。
  • 社区论坛和支持。
版本声明 本文转载于:https://dev.to/suhaspalani/progressive-web-apps-pwas-3n8?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 在Python中如何创建动态变量?
    在Python中如何创建动态变量?
    在Python 中,动态创建变量的功能可以是一种强大的工具,尤其是在使用复杂的数据结构或算法时,Dynamic Variable Creation的动态变量创建。 Python提供了几种创造性的方法来实现这一目标。利用dictionaries 一种有效的方法是利用字典。字典允许您动态创建密钥并分...
    编程 发布于2025-06-11
  • 如何检查对象是否具有Python中的特定属性?
    如何检查对象是否具有Python中的特定属性?
    方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例,其中尝试访问不确定属性会引起错误: >>> a = someClass() >>> A.property Trackback(最近的最新电话): 文件“ ”,第1行, attributeError:SomeClass实...
    编程 发布于2025-06-11
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-06-11
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性,但是当要删除它们时,可以构成挑战,而无需替换元素本身就可以替换一个问题。 element? element.addeventlistener(event,function(){/在这里工作/},false); 要解决此问题,请考虑...
    编程 发布于2025-06-11
  • 为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    使用php dateTime修改月份:发现预期的行为在使用PHP的DateTime类时,添加或减去几个月可能并不总是会产生预期的结果。正如文档所警告的那样,“当心”这些操作的“不像看起来那样直观。 ; $ date->修改('1个月'); //前进1个月 echo $ date->...
    编程 发布于2025-06-11
  • Python高效去除文本中HTML标签方法
    Python高效去除文本中HTML标签方法
    在Python中剥离HTML标签,以获取原始的文本表示 仅通过Python的MlStripper 来简化剥离过程,Python Standard库提供了一个专门的功能,MLSTREPERE,MLSTREPERIPLE,MLSTREPERE,MLSTREPERIPE,MLSTREPERCE,MLST...
    编程 发布于2025-06-11
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-06-11
  • Java中假唤醒真的会发生吗?
    Java中假唤醒真的会发生吗?
    在Java中的浪费唤醒:真实性或神话?在Java同步中伪装唤醒的概念已经是讨论的主题。尽管存在这种行为的潜力,但问题仍然存在:它们实际上是在实践中发生的吗? Linux的唤醒机制根据Wikipedia关于伪造唤醒的文章,linux实现了pthread_cond_wait()功能的Linux实现,利用...
    编程 发布于2025-06-11
  • 版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    在时间戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源于遗留实现的关注,这些限制需要对当前的_timestamp功能进行特定的实现。 创建表`foo`( `Productid` int(10)unsigned not n...
    编程 发布于2025-06-11
  • Go语言如何动态发现导出包类型?
    Go语言如何动态发现导出包类型?
    与反射软件包中的有限类型的发现能力相反,本文探索了替代方法,探索了在Runruntime。go import( “ FMT” “去/进口商” ) func main(){ pkg,err:= incorter.default()。导入(“ time”) 如果err...
    编程 发布于2025-06-11
  • 为什么不使用CSS`content'属性显示图像?
    为什么不使用CSS`content'属性显示图像?
    在Firefox extemers属性为某些图像很大,&& && && &&华倍华倍[华氏华倍华氏度]很少见,却是某些浏览属性很少,尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到:。googlepic { 内容:url(&#...
    编程 发布于2025-06-11
  • Spark DataFrame添加常量列的妙招
    Spark DataFrame添加常量列的妙招
    在Spark Dataframe ,将常数列添加到Spark DataFrame,该列具有适用于所有行的任意值的Spark DataFrame,可以通过多种方式实现。使用文字值(SPARK 1.3)在尝试提供直接值时,用于此问题时,旨在为此目的的column方法可能会导致错误。 df.withco...
    编程 发布于2025-06-11
  • Async Void vs. Async Task在ASP.NET中:为什么Async Void方法有时会抛出异常?
    Async Void vs. Async Task在ASP.NET中:为什么Async Void方法有时会抛出异常?
    在ASP.NET async void void async void void void void void的设计无需返回asynchroncon而无需返回任务对象。他们在执行过程中增加未偿还操作的计数,并在完成后减少。在某些情况下,这种行为可能是有益的,例如未期望或明确预期操作结果的火灾和...
    编程 发布于2025-06-11
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-06-11

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3