# 渐进式 Web 应用(PWA)

PWA=Progressive Web App

前端技术官网

1 背景

1.1 问题

1.2 解决

1.3 Native Apps VS PWA

2 VS Code

Code editing.Redefined.

Free. Built on open source. Runs everywhere.

关键词：开源，支持多平台(Windows/Mac/Linux)

2.1 官方介绍

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

2.2 VS Code 下载安装

访问官网

$sudo apt-get install vscode -y

插件安装：liveserver

2.3 工具使用技巧

doc

快速生成html文件结构

html:5

3 Android Studio

官网下载安装

是 Android 的官方 IDE

升级到4.0后才有菜单

Configure

AVD Manager

Create Virtual Device

10.0.2.2 = 127.0.0.1

4 Materialize

基于Material Design的主流前端响应式框架

Meet the Team

We are a team of students from Carnegie Mellon University.

卡内基梅隆大学(CMU)

5 Firebase

6 PWA

最佳实践：sw.js放在根目录，否则后果自负。

6.1 Service Workers

Lifecycle

6.2 Registering a Service Worker

The Install Event

The ‘Activate’ Event

Lighthouse Audit

Fetch Events

offline

The Install Banner

Offline Mode Explained

(CacheStorage)

6.3 Pre-Caching Assets

6.4 Getting Cached Assets

6.5 Cache Versioning

6.6 Dynamic Caching

6.7 Offline Fallback Page

6.8 Conditional Fallbacks

6.9 Limiting Cache Size

6.10 Site audit Refresh

7 附录

7.1 名词解释

7.2 引用资源

VS Code https://code.visualstudio.com/
Materialize https://materializecss.com/
Materialize中文 http://www.materializecss.cn/
Ansroid Studio https://developer.android.google.cn/studio/
Can I Use https://caniuse.com/
webdev https://web.dev/
Install Prompts(PWA) https://developers.google.com/web/fundamentals/app-install-banners/native

7.3 其它PWA资源

PWA Builder github
Project Fugu Google’s Initiative To Unlock All Native Device Features For The Web
渐进式Web应用程序（PWA）

Quasar

Quasar Framework

面向开发人员的前端框架,带有VueJS组件,构建一流的高性能的响应式网站、PWA、SSR、移动和桌面应用,所有这些都来自同一个代码库。明智的人会选择Vue。高生产力的人选择Quasar。

什么是Quasar？

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：

* 响应式网站
* PWA（Progressive Web App）
* 通过Apache Cordova构建移动APP（Android，iOS，…）
* 多平台桌面应用程序（使用Electron）

Quasar允许开发人员编写一次代码，并且使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

知识库

渐进式 Web 应用(PWA)