Popular blog tags

ASP.NET Core PWA Series: What are Progressive Web Apps?

Published

What are Progressive Web Apps?

Web App 读写本地文件

What are Progressive Web Apps?

1.Web 网站:更加易于发现,相比于安装应用,访问一个网站显然更加容易和迅速。你还可以通过链接来分享 Web 应用。

2.原生App应用:原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行;相较于使用浏览器访问,用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

3.PWA (3=1+2):赋予了我们创建同时拥有以上两种优势的应用的能力。

PWA类似于原生应用,它仍然是一个网站:您可以点击页面内的链接,也可以通过发送 URL 的方式分享网站给别人。

PWA可以让你的web程序跟一般应用一样运行,有桌面图标,能离线,没有浏览器地址栏,一切看起来想个普通的程序/APP(类似桌面的应用程序)

(1)可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏。即可以将app的快捷方式放置到桌面上,全屏运行,看起来与原生app无异。

(2)通过通知推送让 PWA 可重用

There are two widely accepted methods of running Blazor on the desktop: Using Blazor as Progressive Web Applications (PWAs) or using it as an Electron shell.

 

Progressive Web Applications (PWA) use modern browser APIs and capabilities to behave like a desktop app.

Since Blazor WebAssembly is a standards-based client-side web app platform,  developers have the ability to leverage these browser APIs and create PWAs using .NET.

 

Progressive Web Apps-google基于chrome的轻量级app开发思路

随着微信小程序热闹起来,说一下google基于chrome的轻量级app开发思路。

Progressive Web Apps 是结合了 web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问,不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系,它将变得越来越强大。它能够快速地加载,即使在比较糟糕的网络环境下,能够推送相关消息, 也可以像原生应用那样添加至主屏,能够有全屏浏览的体验。

Progressive Web Apps 的优势:

渐进增强 - 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则。
响应式用户界面 - 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备。
不依赖网络连接 - 通过 service workers 可以在离线或者网速极差的环境下工作。
类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的。
持续更新 - 受益于 service worker 的更新进程,应用能够始终保持更新。
安全 - 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。
可发现 - 得益于 W3C manifests 元数据和 service worker 的登记,让搜索引擎能够找到 web 应用。
再次访问 - 通过消息推送等特性让用户再次访问变得容易。
可安装 - 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。
可连接性 - 通过 URL 可以轻松分享应用,不用复杂的安装即可运行。


这引导指南将会引导你完成你自己的 Progressive Web App,包括设计时需要考虑的因素,也包括实现细节,以确保你的应用程序符合 Progressive Web App 的关键原则。

https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker

What browsers support A2HS?

Firefox has had mobile support since v58.

exact details:

https://caniuse.com/web-app-manifest

 

Add to Home screen

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen

 

Web App 读写本地文件.

see:https://mp.weixin.qq.com/s/DOHlBfxCCrljXhp041yNHw

网页应用程序(Web App),用户数据总是在云端。用户在里面生成的内容,也是在云端。

浏览器的底线

网页无法自由的访问本地文件,是浏览器的一条底线。目的是保护用户不被一些恶意的网页所侵害,例如:通过网页窃取用户本地的信息,通过网页修改我们的本地文件,甚至执行脚本控制我们的电脑。

除了上传/下载 这类操作, 浏览器也能接受一些存放在用户本地电脑的少量信息,这些信息 有相当的保护和隔离机制,一般只有对应的网站(或调试工具)可以访问, 例如: cookie 和 其它本地存储机制。这些信息虽然存储在用户本地,但完全由浏览器控制读写,不会和用户本地的其它文件发生交集,是受控的。

本地优先(local-first)隐私优先(privacy-first)

本地优先(local-first)隐私优先(privacy-first)的呼声开始高涨,大家担心少数互联网巨头垄断所有个人信息,因此会有意识的把一些自己的内容留在本地,而不是交给云端。

 

PWA(Progressive Web Apps)直接访问用户本地文件

PWA 可以离线使用,网页代码一次下载到本地后,之后就能像本地应用一样使用.

PWA网页应用,能直接访问用户本地文件,从技术上保证将数据留在用户手里,而不是云端服务器上。

 

PWA(Progressive Web Apps)直接访问用户本地文件实现原理

PWA直接访问用户本地文件,现在已经被主流浏览器实现, 浏览器将 一个新的 API 提供给了网页开发者,网页开发者可以在用户「授权一次」(指定某个文件夹)的情况下,自由读写那个本地文件夹下的内容。

理论上讲,做一个 网页版的 「本地文件管理器」 也是可能的。

顺新的 本地文件 API 能得以推广,主要和 Chrome内核的普及有关,现在只要 Chrome内核支持,就约等于主流的浏览器全都支持。

Web App 工具,采用 本地文件访问 API,可以把用户的数据保存在本地的磁盘里, 除了第一次需要指定授权读写的文件夹以外,之后的体验就和一个本地 App 一样了。

come from:https://www.iaspnetcore.com/Blog/Edit/5e9bcd071752ad5fd617de0d

 

App Shell 模型

https://www.jianshu.com/p/299c9c720e56

 

Google 的 sample 示例

https://zhuanlan.zhihu.com/p/25459319

Firefox的 sample 示例

https://github.com/mdn/pwa-examples

 

Useful links

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen

offline-plugin for webpack