美文网首页
PWA(Progressive Web App)

PWA(Progressive Web App)

作者: 阿凯_8b27 | 来源:发表于2022-01-13 11:13 被阅读0次

PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验
主要技术
web app Manifest
为了让 PWA 应用被添加到主屏幕, 使用 manifest.json 定义应用的名称, 图标等等信息。
manifest.json 文件

{
  "name": "Minimal app to try PWA",
  "short_name": "Minimal PWA",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#8888ff",
  "background_color": "#aaaaff",
  "icons": [
    {
      "src": "e.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}

Service Worker
在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能

<script>
  if (navigator.serviceWorker != null) {
    navigator.serviceWorker.register('sw.js')
    .then(function(registration) {
      console.log('Registered events at scope: ', registration.scope);
    });
  }
</script>
self: 表示 Service Worker 作用域, 也是全局变量
caches: 表示缓存
skipWaiting: 表示强制当前处在 waiting 状态的脚本进入 activate 状态
clients: 表示 Service Worker 接管的页面

Push Notification

1. 引入goeasy.js
2. 客户端订阅, 
Var goeasy = new GoEasy({appkey:’your appkey’});
goeasy.subscribe(channel:”your channel”,
onMessage:function(message){alert(‘received message’+ message.content)})
3. 三种推送方式
Javascript: goeasy.publish({channel:’your channel’, message:’your publish
msg’});
Java SDK: GoEasy goeasy = new GoEasy(“appkey”); goeasy.publish(“your
channel”,”your msg”)

1.开发方面有区别:

(1)原生APP:每一种移动操作系统都需要独立的开发项目,iphone版本、Ipad版本、安卓版本。每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)等等。需要使用各自的软件开发包,开发工具以及各自的控件。

(2)开发成本高、开发速度慢、维护成本高。三个平台(IOS、安卓、windows)的规则、推广、运营都不相同。官方应用商店对APP上线审核流程比较复杂而且很慢,会严重影响APP的发布上线。

(3)Web App :因为运行在移动设备的浏览器上,所以只需要一个开发项目。可以通过HTML、 CSS或者JavaScript来进行Web APP的开发。开发成本低、开发速度快。

2.功能有区别:

(1)原生App:原生APP是一个系统性的应用程序,可以类比于电脑上的软件。原生app可以调用移动终端的硬件设备, 比如:麦克风、摄像头、短信、GPS、蓝牙、重力感应等。实现功能丰富

(2)Web App:Web APP可以类比于电脑上的网页。Web APP更多是页面展示类的APP。只能使用有限的移动硬件设备功能。更多用于页面展示,侧重于简单的交互,无法使用很多硬件设备独特的功能

相关文章

  • 干货 | 10分钟玩转PWA

    关于PWA PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目的...

  • Progressive Web Apps(PWA)介绍

    Progressive Web App的介绍: Progressive Web Apps(PWA)是一个结合了最好...

  • pwa再理解

    pwa再理解 Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,...

  • PWA 2再一次深度学习

    pwa Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用...

  • PWA

    PWA PWA 就是渐进式 web 应用(Progressive Web App)。早在2016年初,Google...

  • 【sw】service worker概述

    1. 先说说PWA? PWA = progressive web app = 渐进增强式web应用 = 谷歌也想分...

  • PWA 实践/应用(Google Workbox)

    桌面端 PWA 应用: 移动端添加到桌面: 1 什么是 PWA PWA(Progressive Web App -...

  • PWA简单描述

    面试的时候问到的 对pwa的了解。 PWA为progressive web app,即渐进式Web App,是提高...

  • PWA 使用和配置说明

    PWA介绍 Progressive Web App, 即渐进式WEB应用,简称PWA。 一个网页添加上 App M...

  • 小试PWA

    PWA概念 PWA,全名 Progressive Web App,是提升Web App体验的一种新方法,它通过对应...

网友评论

      本文标题:PWA(Progressive Web App)

      本文链接:https://www.haomeiwen.com/subject/ifcvbltx.html