• PWA


    Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来,沉浸式的体验,改进web的性能低下等。是Google 在2015年提出,今年才推广开来。其宗旨是渐进增强,不再有媲美原生应用的想法,而是让 WebApp 变得更加对移动环境友好,体验自然顺滑。

    目前移动web网页的体验 

    1. 手机桌面入口不够便捷; 当然现在可以添加到主屏幕
    2. 没网络就没响应,不具备离线能力; 
    3. 不像APP一样能进行消息推送。 

    PWA带来的新特性

    Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
    Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. 
    Connectivity independent - Service workers allow work offline, or on low quality networks.  可以离线,使用service worker技术,即使网页关闭,PWA 仍然可以在后台运行获取数据更新
    App-like - Feel like an app to the user with app-style interactions and navigation.  
    Fresh - Always up-to-date thanks to the service worker update process.  
    Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. 
    Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
    Re-engageable - Make re-engagement easy through features like push notifications.  可以推送消息
    Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.  可以添加到home屏幕
    Linkable - Easily shared via a URL and do not require complex installation.  便于分享

    浏览器支持情况

    基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了,Firefox 和微软的 Edge 正在开发中,水果公司的 Safari 最近刚刚表达了可能会支持 PWA。从长久的角度看,只要 Google 不断推动一些网站往 PWA 转型,其他的浏览器或者竞争对手也就会自然跟风上船。

    怎么实现?

    实现 PWA 所需要的特性,主要是围绕着 Service Workers 的基于事件的 cache 系统和消息推送的一套新的 API,此外还需要定义 manifest.json 来定义安装行为或是样式等。

    体验PWA

    首先,将你的chrome升级到最新的55版本

    1 合集

    https://pwa.rocks/,这个网址有很多pwa应用。其中不乏 The Washington Post,Flip Board,AliExpress,Wikipedia,Gmail,Booking 这样的大头

    2 阿里巴巴

    http://m.alibaba.com

    和Hybrid App的区别

    Hybrid App虽然看上去是一个Native App,但只有一个UI WebView + Native的壳子,里面访问的是一个Web App。而PWA是真正的Web App。

    和微信小程序的区别

    在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10
    在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 37 内核来渲染的
    在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的

    小程序入口在微信里面,并不能添加到主屏幕,不能离线,不能推送。小程序的优势就是庞大的用户群,推广起来非常好。

    总而言之,PWA是未来的趋势。

    参考文章:

    1. 我们真的需要网页版App吗?Google PWA的困局

    2. https://github.com/hemanth/awesome-pwa#tutorials

    3. https://developers.google.cn/web/progressive-web-apps/

  • 相关阅读:
    Web APP开发技巧总结
    2015年 移动开发都有哪些热点?
    手机APP UI设计尺寸基础知识
    最新Android & iOS设计尺寸规范
    给iOS开发者的Android开发建议
    Android 应用开发推荐书单
    Android 你应该知道的学习资源 进阶之路贵在坚持
    一篇文章让你读懂iOS和Android的历史起源
    Android平台上最好的几款免费的代码编辑器
    Google 发布的15个 Android 性能优化典范
  • 原文地址:https://www.cnblogs.com/bhaltair/p/6279692.html
Copyright © 2020-2023  润新知