Alien ZHOU
Alien ZHOU
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint，但是通过本文，你会快速学习到这一件**页面加载性能利器**。本系列相关demo的代码都可以在[github repo](https://github.com/alienzhou/learning-pwa)中找到。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 --- > 对之前的文章感兴趣的话，可以从这里找到： > - [第一篇：2018，开始你的PWA学习之旅](https://github.com/alienzhou/blog/issues/2) > - [第二篇：10分钟学会使用Manifest，让你的WebApp更“Native”](https://github.com/alienzhou/blog/issues/3) > - [第三篇：从今天起，让你的WebApp离线可用](https://github.com/alienzhou/blog/issues/4) > - [第四篇：TroubleShooting: 解决FireBase login验证失败问题](https://github.com/alienzhou/blog/issues/5) > - [第五篇：与你的用户保持联系: Web Push功能](https://github.com/alienzhou/blog/issues/6)...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第九篇文章。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 ## 引言 在前八篇文章中，我已经介绍了一些PWA中的常见技术与使用方式。虽然我们已经学习了很多相关知识，但是，还是有很多问题在实践时才会暴露出来。这篇文章是一篇TroubleShooting，总结了我近期在PWA实践过程中遇到了一些问题，以及这些问题的解决方案。希望能帮助一些遇到类似问题的朋友。 ## 1. Service Worker Scope > 注意Service Worker注册时的作用范围（scope） ### 1.1. 遇到的问题 我在页面`/home`下注册了Service Worker： ```javascript navigator.serviceWorker.register('/static/home/js/sw.js') ``` 通过在`.then()`中调用`console.log()`可以发现Service Worker其实注册成功了，但是在页面中却不生效。这是为什么呢？ ### 1.2. 产生的原因...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第八篇文章。本文中的代码可以在[learning-pwa的sync分支](https://github.com/alienzhou/learning-pwa/tree/sync)上找到（`git clone`后注意切换到sync分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 ## 1. 引言 生活中经常会有这样的场景： 用户拿出手机，浏览着我们的网站，发现了一个很有趣的信息，点击了“提交”按钮。然而不幸的是，这时用户到了一个网络环境极差的地方，或者是根本没有网络。他能够做的只有看着页面上的提示框和不断旋转的等待小圆圈。1s、5s、30s、1min……无尽的等待后，用户将手机放回了口袋，而这一次的请求也被终止了——由于当下极差的网络终止在了客户端。 上面的场景其实暴露了两个问题： 1. 普通的页面发起的请求会随着浏览器进程的结束/或者Tab页面的关闭而终止； 2. 无网环境下，没有一种机制能“维持”住该请求，以待有网情况下再进行请求。 然而，Service Worker的后台同步功能规避了这些缺陷。  下面就让我们先来了解下后台同步（Background Sync）的工作原理。 ## 2. 后台同步(Background Sync)是如何工作的？ 后台同步应该算是Service Worker相关功能（API）中比较易于理解与使用的一个。 其大致的流程如下： ...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第七篇文章。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 本文中的代码可以在[learning-pwa的notification分支](https://github.com/alienzhou/learning-pwa/tree/notification)上找到（`git clone`后注意切换到notification分支）。 ## 1. 引言 在第五篇文章《Web中进行服务端消息推送》中，我介绍了如何使用Push API进行服务端消息推送。提到Push就不得不说与其联系紧密的另一个API——Notification API。它让我们可以在“网站外”显示消息提示：  即使当你切换到其他Tab，也可以通过提醒交互来快速让用户回到你的网站；甚至当用户离开当前网站，仍然可以收到系统的提醒消息，并且可以通过消息提醒快速打开你的网站。  Notification的功能本身与Push并不耦合，你完全可以只使用Notification API或者Push API来构建Web App的某些功能。因此，本文会先介绍如何使用Notification API。然后，作为Notification的“黄金搭档”，本文还会介绍如何组合使用Push & Notification（消息推送与提醒）。 ## 2. 使用Notification API 在这第二节里，我们先来了解如何独立使用Notification功能。相较于第五篇中的Push功能，Notification API更加简洁易懂。...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第六篇文章。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 前几篇文章介绍了PWA中的一些功能与背后的技术。工欲善其事，必先利其器。这一篇会介绍如何调试我们的PWA。 ## Service Worker 新版的chrome调试工具中集成了Service Worker调试工具。 开启chrome调试工具，选择Application选项卡。在左侧的列表选择Application --> Service Worker，就会显示当前站点下的Service Worker。  在Service Worker下有三个复选框： - Offline：切换为无网环境。通过勾选可以方便查看应用在无网环境中的表现。 - Update on reload：每次reload都更新Service Worker。一般来说，当访问站点发现Service Worker有更新后，为了保证本次访问，不会立即激活新的Service Worker，只会在安装后进入等待状态，在下一次访问时激活。勾选该选项就可以使每次Reload后都重新安装与激活Service Worker。...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第三篇文章。文中的代码都可以在[learning-pwa的sw-cache分支](https://github.com/alienzhou/learning-pwa/tree/sw-cache)上找到（`git clone`后注意切换到sw-cache分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 ## 1. 引言 PWA其中一个令人着迷的能力就是离线（offline）可用。  离线只是它的一种功能表现而已，具体说来，它可以： - 让我们的Web App在无网（offline）情况下可以访问，甚至使用部分功能，而不是展示“无网络连接”的错误页； - 让我们在弱网的情况下，能使用缓存快速访问我们的应用，提升体验； - 在正常的网络情况下，也可以通过各种自发控制的缓存方式来节省部分请求带宽； - …… 而这一切，其实都要归功于PWA背后的英雄 —— **Service Worker**。 那么，Service Worker是什么呢？你可以把Service Worker简单理解为一个独立于前端页面，在后台运行的进程。因此，它不会阻塞浏览器脚本的运行，同时也无法直接访问浏览器相关的API（例如：DOM、localStorage等）。此外，即使在离开你的Web App，甚至是关闭浏览器后，它仍然可以运行。它就像是一个在Web应用背后默默工作的勤劳小蜜蜂，处理着缓存、推送、通知与同步等工作。所以，要学习PWA，绕不开的就是Service...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第二篇文章。文中的代码都可以在[learning-pwa的manifest分支](https://github.com/alienzhou/learning-pwa/tree/manifest)上找到（`git clone`后注意切换到manifest分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 ## 1. 引言 我们知道，在chrome（等一些现代浏览器）中，你可以将访问的网站添加到桌面，这样就会在桌面生成一个类似“快捷方式”的图标，当你点击该图标时，便可以快速访问该网站（Web App）。我们以[第一篇文章](https://juejin.im/post/5ac8a67c5188255c5668b0b8)中的demo为例，其添加到桌面后以及重新打开时的状态如下：  然而，对于PWA来说，有一些重要的特性： - Web App可以被添加到桌面并有它自己的应用图标； - 同时，从桌面开启时，会和原生app一样有它自己的“开屏图”； - 更进一步的，这个Web App在的样子几乎和原生应用一样——没有浏览器的地址栏、工具条，似乎和Native App一样运行在一个独立的容器中。 就像下面这样：  接下来，我们会基于该系列——《PWA技术学习与实践》的前一篇《2018，开始你的PWA学习之旅》中所提及的一个普通Web App的demo来进行改造，来实现PWA的这一效果。或者直接从github clone learning-pwa（https://github.com/alienzhou/learning-pwa/tree/master）这个仓库也可以。切换到manifest分支，即可看到本文的最后成果。...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 PWA作为今年最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。 本系列文章《PWA学习与实践》会逐步拆解PWA背后的各项技术，通过实例代码来讲解这些技术的应用方式。也正是因为PWA中技术点众多、知识细碎，因此我在学习过程中，进行了整理，并产出了《PWA学习与实践》系列文章，希望能带大家全面了解PWA中的各项技术。对PWA感兴趣的朋友欢迎关注。 首先简单了解一下PWA。 ## 1. 什么是PWA > PWA，即Progressive Web App, 是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。 我们需要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安全、性能和体验三个方面，优化我们的Web App。所以，其实PWA本质上依然是一个Web App。 因此，学习PWA其实就是了解与掌握这些PWA背后的技术。本系列文章会针对PWA中所涉及到的技术进行介绍，并配合代码实例来展示各类技术的使用方式。希望通过这一系列文章，让大家对PWA技术有一个更深入的认识。而PWA本身渐进式的思想也可以让我们在业务中“渐进式”地使用这些技术，在成本可控的前提下，不断优化我们的产品。 ## 2. PWA中的一些技术 PWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了： - Web App...
原Slides: [4½ Methods for Theming in (S)CSS](https://speakerdeck.com/csswizardry/4half-methods-for-theming-in-s-css) 作者: Harry Roberts > PM说要实现一个一键设置主题的功能，作为技术，你能想到的实现方式有哪些呢？ ## 1. 什么是主题样式？ 相信大家对网页的主题样式功能肯定不陌生。对于一些站点，在基础样式上，开发者还会为用户提供多种主题样式以供选择。 下面就是一个主题样式功能：用户可以在右侧选择自己喜欢的主题色，从而得到一个“个性”的页面。  还有时候，我们开发了一个系统用来售卖，采购我们系统的客户可能有多个。也许其中一个客户很喜欢我们当前的深色色系主题，但是另一个系统的采购方希望我们能为它们定制一套新的样式。他们希望买来的系统能贴合它们自己的品牌调性，变为浅色的。这其实也是一种主题样式的需求。  在上面的讨论里，除了“主题”外，我们又引出了一个概念——个性化。经常，我们说到主题时，还会有一种说法叫做：个性化主题。这两者在英文中分别有两个对应的词： Theming 与 Customisation。 当我们说主题（Theming）与个性化定制（Customisation）的时候，很多时候其实并没有区分两者。但实际上，两者还是有一些微妙的区别的。 ### 1.1. 主题 Theming 与个性化定制...
The module entry `index.js`(`"module": "index.js",`) imports `lib/all.js`. https://github.com/ecomfe/zrender/blob/559d610bd0a612fa8ed5a7e6a8dd4b23a318e94d/src/all.ts#L7-L8 But this module is not in the 'sideEffects': https://github.com/ecomfe/zrender/blob/559d610bd0a612fa8ed5a7e6a8dd4b23a318e94d/package.json#L36-L39 When using esbuild to bundle zrender, it will remove these as a default...