{"id":20114608,"url":"https://github.com/alienzhou/learning-pwa","last_synced_at":"2025-08-08T06:10:13.339Z","repository":{"id":50067870,"uuid":"127777469","full_name":"alienzhou/learning-pwa","owner":"alienzhou","description":"📱some samples and blogs about how to start with your first PWA","archived":false,"fork":false,"pushed_at":"2021-06-05T03:06:32.000Z","size":113,"stargazers_count":221,"open_issues_count":1,"forks_count":89,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T01:12:30.576Z","etag":null,"topics":["demo","frontend","manifest","performance","pwa","service-worker","userexperience","webapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alienzhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-02T15:48:51.000Z","updated_at":"2025-03-05T05:55:01.000Z","dependencies_parsed_at":"2022-08-03T17:45:22.338Z","dependency_job_id":null,"html_url":"https://github.com/alienzhou/learning-pwa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alienzhou/learning-pwa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Flearning-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Flearning-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Flearning-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Flearning-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alienzhou","download_url":"https://codeload.github.com/alienzhou/learning-pwa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Flearning-pwa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269373109,"owners_count":24406321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","frontend","manifest","performance","pwa","service-worker","userexperience","webapp"],"created_at":"2024-11-13T18:30:48.256Z","updated_at":"2025-08-08T06:10:13.303Z","avatar_url":"https://github.com/alienzhou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 2018，开始你的PWA学习之旅\n\n\u003e PWA学习系列技术文章汇总至此处 --\u003e [戳我](https://juejin.im/post/5ac8a67c5188255c5668b0b8#heading-3)，或者直接查看下面列表\n\u003e - 第一篇：2018，开始你的PWA学习之旅（本文）\n\u003e - [第二篇：10分钟学会使用Manifest，让你的WebApp更“Native”](https://juejin.im/post/5ac8a89ef265da238440d60a)\n\u003e - [第三篇：从今天开始，让你的WebApp离线可用](https://juejin.im/post/5aca14b6f265da237c692e6f)\n\u003e - [第四篇：TroubleShooting: 解决FireBase login验证失败问题](https://juejin.im/post/5accc3c9f265da23870f2abc)\n\u003e - [第五篇：与你的用户保持联系: Web Push功能](https://juejin.im/post/5accd1355188252b0b201fb9)\n\u003e - [第六篇：How to Debug? 在chrome中调试你的PWA](https://juejin.im/post/5ae56f926fb9a07aca79edf6)\n\u003e - [第七篇：增强交互：使用Notification API来进行提醒](https://juejin.im/post/5ae7f7fd518825670960fe96)\n\u003e - [第八篇：使用Service Worker进行后台数据同步](https://juejin.im/post/5af80c336fb9a07aab29f19c)\n\u003e - [第九篇：PWA实践中的问题与解决方案](https://juejin.im/post/5b02e5f1f265da0b767dc81d)\n\u003e - [第十篇：Resource Hint - 提升页面加载性能与体验](https://juejin.im/post/5b4b66f0f265da0f9155feb6)\n\nPWA作为今年最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。\n\n首先简单了解一下PWA。\n\n## 什么是PWA\n\n\u003e PWA，即Progressive Web App, 是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。\n\n我们需要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安全、性能和体验三个方面，优化我们的Web App。所以，其实PWA本质上依然是一个Web App。\n\n因此，学习PWA其实就是了解与掌握这些PWA背后的技术。本系列文章会针对PWA中所涉及到的技术进行介绍，并配合代码实例来展示各类技术的使用方式。希望通过这一系列文章，让大家对PWA技术有一个更深入的认识。而PWA本身渐进式的思想也可以让我们在业务中“渐进式”地使用这些技术，在成本可控的前提下，不断优化我们的产品。\n\n## PWA中的一些技术\nPWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了：\n\n- [Web App Manifest](https://github.com/alienzhou/learning-pwa/tree/manifest)\n- [Service Worker](https://github.com/alienzhou/learning-pwa/tree/sw-cache)\n- [Cache API 缓存](https://github.com/alienzhou/learning-pwa/tree/sw-cache)\n- [Push\u0026Notification 推送与通知](https://github.com/alienzhou/learning-pwa/tree/push)\n- [Background Sync 后台同步](https://github.com/alienzhou/learning-pwa/tree/sync)\n- 响应式设计\n- ……\n\n这些技术都是你在学习PWA中不可或缺的。而随着[apple在iOS Safari中也开始支持PWA]((https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7))（其中的某些技术），PWA的舞台更大了。\n\n## 项目DEMO\n为了配合PWA中相关知识的学习，我专门创建了一个demo Web App——\n\n一个根据关键字查询图书信息的demo。\n\n这个Web App最开始是不具备任何PWA的能力。我会在这一系列文章中以这个demo为例，阐述各项技术的同时，将其应用在demo上。也就是说，在这一系列的文章中，我会和大家一起将一个普通的网页应用逐步升级为一个简单的PWA，通过这种方式一起学习。\n\n首先简单介绍一下这个demo。这是一个根据关键词搜索图书信息的应用，用户在前端输入关键词，点击搜索，会请求我们自己的服务器，而服务器使用[豆瓣图书API V2](https://developers.douban.com/wiki/?title=book_v2)来获取数据。\n\n![图书搜索demo](https://upload-images.jianshu.io/upload_images/6476654-61e8e1ee38c99d84.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n项目使用[KOA](http://koajs.com/)来搭建node服务器，所以需要node版本\u003e7.6.0，可以使用[nvm](https://github.com/creationix/nvm)来切换到适合的node版本。\n\n要运行该项目，首先\n```bash\ngit clone git@github.com:alienzhou/learning-pwa.git\n# 切换到基础项目分支\ngit checkout basic\n```\n注意，需要切换到basic分支，master分支是上经过PWA升级后最新的demo代码。只有在basic分支才能看到原始的Web App。接下来，安装依赖：\n```\nnpm install\n```\n最后，运行项目：\n```\nnpm run start\n```\n然后就可以在`127.0.0.1:8085`上访问到该项目。\n\n基础demo的代码比较简单，这里就不去赘述demo中的代码细节了。简单了解一下项目结构，前端代码都存放于`public`目录中，具体结构如下：\n```\n|---public---|---index.html // 前端页面\n|            |---index.js // browser的JavaScript脚本\n|            |---style.css // 样式文件\n|            |---img // 图片文件夹\n|---app.js // node服务启动入口\n|---util.js // node服务工具库\n```\n\n值得一提的是，后续文章内的代码会以分支的形式存在，每篇文章的最终代码会存放于一个对应的分支中。你可以通过方便得切换分支，来查看每篇文章对应的示例代码。\n\n- basic分支：基础项目demo，一个普通的图书搜索应用（网站）；\n- manifest分支：基于basic分支，添加manifest等功能；\n- sw-cache分支：基于manifest分支，添加缓存与离线功能；\n- master分支：应用的最新代码。\n- ……\n\n## 写在最后\n作为本系列的第一篇文章，本文简单介绍了PWA与其相关的技术概念。通过学习PWA，我们可以很快将其中的优秀技术应用到我们的工作里。在下一部分（manifest分支），我就会介绍如何使用manifest来让你的Web App“更Native”，拥有一个App Shell。\n\n话不多说，下面就让我们来具体地学习PWA相关技术吧！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienzhou%2Flearning-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falienzhou%2Flearning-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienzhou%2Flearning-pwa/lists"}