无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-10-10 04:15 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

应用要知道的那些事,入门教程

做 Web 应用要领悟的这两个事

2015/07/21 · HTML5 · Web应用

本文由 伯乐在线 - 刘健超-J.c 翻译,黄利民 校稿。未经许可,禁绝转载!
罗马尼亚(România)语出处:blog.venanti.us。欢迎参预翻译组。

在过去一年里,笔者从零开端开垦一向在自身的第一个第一的 Web 应用程序。本次经历教会了自个儿繁多事先不驾驭的事物,特别在鹰潭和客商体验方面。

自身最终一回尝试开荒丰富复杂的使用是在 2007年,所以就自己的立场的话,有好些个东西须要补充。

而外本人所知所见外,要记住本文清单里的从头到尾的经过。因为在开采 Web 应用时,特别是刚初步做的时候,轻巧忘记一些要害的事体。

那几个检查清单并非百样玲珑,假诺您是二个经验丰裕的开拓者,这里可能未有令你感到欣喜的东西,但本身梦想能印证它是推向让您想起起部分失去的事物。

渐进式Web应用(PWA)入门教程(下)

2018/05/25 · 基本功工夫 · PWA

初稿出处: Craig Buckler   译文出处:草龙珠城控件   

上篇小说我们对渐进式Web应用(PWA)做了一些核心的牵线。

渐进式Web应用(PWA)入门教程(上)

在这一节中,大家将介绍PWA的规律是哪些,它是哪些开头工作的。

迈向PWA!利用serviceworker的离线访谈形式

2017/02/08 · JavaScript · PWA

本文小编: 伯乐在线 - pangjian 。未经作者许可,禁绝转发!
应接参预伯乐在线 专栏撰稿人。

微信小程序来了,能够动用WEB技能在微信构建三个具有Native应用经验的应用,业界极其看好这种样式。然而你们只怕不知底,Google早就有周边的陈设性,以致档案的次序更加高。那就是PWA(渐进式巩固WEB应用)。
PWA有以下三种特色:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线工夫)
  • Re-engageable(推送公告才干)

有着那么些特点都以“温婉降级、渐进增强的”,给帮助的设备越来越好的体验,不援助的配备也不会更差。这就和微信小程序这种不好设计的有史以来差异之处。

本博客也在向着PWA的取向迈进,第一步小编选拔了Offline,也便是离线技术。能够让顾客在未曾互联网连接的时候还是能够接纳一些服务。这么些技术运用了ServiceWorker技能。

落到实处思路即是,利用service worker,另起一个线程,用来监听全部互连网恳求,讲曾经呼吁过的数额放入cache,在断网的事态下,直接取用cache里面包车型地铁能源。为呼吁过的页面和图片,展示一个私下认可值。当有互连网的时候,再另行从服务器更新。
图片 1
代码这里就不贴了,未来恐怕会特意写一篇来详细介绍ServiceWorker,风野趣的能够间接参考源码。
登记起来也不行便于

JavaScript

// ServiceWorker_js (function() { 'use strict'; navigator.serviceWorker.register('/sw.js', {scope: '/'}).then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    'use strict';
    navigator.serviceWorker.register('/sw.js', {scope: '/'}).then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
 
})();

此间必要注意的是,sw.js所在的目录要大于它的垄断(monopoly)范围,也正是scope。我把sw.js座落了根目录来支配总体目录。

接下去看看大家的最终效果呢,你也能够在友好的浏览器下断网尝试一下。当然有部分浏览器方今还不帮衬,比方闻名的Safari。

安全性

料定邮件:当客户注册时,应向他们发送带有一些击确认邮箱的链接的邮件。假使客户更新他们的邮箱地址,则要重复重新这几个专门的工作流程。

身价管理:当存储密码时,首先对它们举办加盐和散列操作,然后再用现时遍布利用的 crypto 库。若是您不这么做的话,把地方管理转由给 Twitter / GitHub /  脸书 / 等,用 OAuth 就能够做到。

加密:全数证件难题,还大概有啥样比 SSL 更加好。使用它吗。还足以应用 HSTS。

证据:不要把服务器身份音信(API 密钥、数据库密码等)放到版本调整里,不然就泄密了。

第一步:使用HTTPS

渐进式Web应用程序要求采取HTTPS连接。就算选用HTTPS会令你服务器的费用变多,但利用HTTPS能够让你的网址变得更安全,HTTPS网站在Google上的排名也会更靠前。

鉴于Chrome浏览器会暗中同意将localhost以致127.x.x.x地址视为测量检验地点,所以在本示例中你并不需要开启HTTPS。别的,出于调节和测量检验目标,您能够在运营Chrome浏览器的时候使用以下参数来关闭其对网址HTTPS的反省:

  • –user-data-dir
  • –unsafety-treat-insecure-origin-as-secure

离线有缓存情形

图片 2

工程:动画

具备的爱,都是圣洁的。但别为使用里的具备因素加多动画。因为超越四分之二 CSS 动画都会接触布局重绘;最好尽可能地范围自身行使 transform 和 opacity。

防止实行缓慢的连通运算,假诺非要使用,那么保证它是针对某些属性的(如,”transition: opacity 250ms ease-in” ,并非 “transition: all 250ms ease-in”)。

其次步:创立二个应用程序清单(Manifest)

应用程序清单提供了和当前渐进式Web应用的连带消息,如:

  • 应用程序名
  • 描述
  • 不无图片(饱含主显示器Logo,运行显示器页面和用的图形只怕网页上用的图样)

实为上讲,程序清单是页面上用到的Logo和焦点等能源的元数据。

程序清单是贰个放在您使用根目录的JSON文件。该JSON文件重临时必需抬高Content-Type: application/manifest json 或者 Content-Type: application/jsonHTTP头新闻。程序清单的文本名不限,在本文的演示代码中为manifest.json

{ "name" : "PWA Website", "short_name" : "PWA", "description" : "An example PWA website", "start_url" : "/", "display" : "standalone", "orientation" : "any", "background_color" : "#ACE", "theme_color" : "#ACE", "icons": [ { "src" : "/images/logo/logo072.png", "sizes" : "72x72", "type" : "image/png" }, { "src" : "/images/logo/logo152.png", "sizes" : "152x152", "type" : "image/png" }, { "src" : "/images/logo/logo192.png", "sizes" : "192x192", "type" : "image/png" }, { "src" : "/images/logo/logo256.png", "sizes" : "256x256", "type" : "image/png" }, { "src" : "/images/logo/logo512.png", "sizes" : "512x512", "type" : "image/png" } ] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "name"              : "PWA Website",
  "short_name"        : "PWA",
  "description"       : "An example PWA website",
  "start_url"         : "/",
  "display"           : "standalone",
  "orientation"       : "any",
  "background_color"  : "#ACE",
  "theme_color"       : "#ACE",
  "icons": [
    {
      "src"           : "/images/logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

程序清单文件创建完事后,你必要在种种页面上援引该公文:

<link rel="manifest" href="/manifest.json">

1
<link rel="manifest" href="/manifest.json">

以下属性在程序清单中时时使用,介绍表达如下:

  • name: 顾客观望的应用名称
  • short_name: 应用短名称。当展现应用名称的地点远远不足时,将选用该名称。
  • description: 接纳描述。
  • start_url: 动用起首路线,绝对路线,暗中认可为/。
  • scope: U陆风X8L范围。比如:要是你将“/app/”设置为U帕杰罗L范围时,这一个动用就能够一贯在这些目录中。
  • background_color: 招待页面包车型地铁背景颜色和浏览器的背景颜色(可选)
  • theme_color: 动用的宗旨颜色,日常都会和背景颜色一样。这一个装置决定了利用怎么样展示。
  • orientation: 预先旋转方向,可选的值有:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary
  • display: 展现情势——fullscreen(无Chrome),standalone(和原生应用相同),minimal-ui(最小的一套UI控件集)只怕browser(最古老的施用浏览器标签突显)
  • icons: 叁个包括全体图片的数组。该数组中各类元素富含了图片的U奥德赛L,大小和项目。

离线无缓存景况

会显得二个暗中认可的页面

图片 3

-EOF-

打赏帮助自个儿写出更加多好小说,感激!

打赏小编

客商体验(UX)

表单:当提交一个表单后,客商应抽出提交后的反映。假诺提交后不向顾客发送二个见仁见智的页面,那么就应该有弹框或 alert 一些新闻,以便让客商明白此番提交是不是中标。

报到重定向:假使顾客准备在你的网址展开三个页面,但并不曾登陆,那么她们应该率先接受到贰个能登入的页面,并在报到后重定向到八个他们本来想展开的多个页面(当然,前提是已收获授权)。

只要她们尝试登陆,但提供了三个荒唐的密码,那时,客商有相当大可能率是忘记了密码,这我们就应有提供叁个视觉线索来唤醒她们,要有一个重新初始化密码的选项。

其三步:创建四个 Service Worker

Service Worker 是一个可编制程序的服务器代理,它能够阻碍也许响应互联网诉求。Service Worker 是身处应用程序根目录的三个个的JavaScript文件。

您需求在页面临应的JavaScript文件中注册该ServiceWorker:

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
4
if ('serviceWorker' in navigator) {
  // register service worker
  navigator.serviceWorker.register('/service-worker.js');
}

一经你无需离线的连带职能,您可以只开创三个 /service-worker.js文本,那样客商就足以直接设置您的Web应用了!

ServiceWorker这一个定义恐怕相比难懂,它实际上是二个工作在其余线程中的规范的Worker,它无法访问页面上的DOM成分,未有页面上的API,不过足以阻挡全部页面上的互联网乞求,包涵页面导航,供给财富,Ajax诉求。

地点正是运用全站HTTPS的要紧缘由了。纵然你未有在您的网址中运用HTTPS,贰个第三方的台本就足以从其他的域名注入他本人的ServiceWorker,然后篡改全数的央求——那确实是那多少个危险的。

Service Worker 会响应四个事件:install,activate和fetch。

打赏扶助小编写出更加多好作品,感谢!

任选一种支付办法

图片 4 图片 5

1 赞 1 收藏 评论

电子邮件

订阅设置:任何发送到顾客的 email ,都应当起码含有三个链接,能链接到修改他们的信箱设置的应用程序页面,并且最佳每一个邮件都有贰个独门的链接,能打消订阅。

千万别让客户为了撤除订阅而向你发送邮件。

Install事件

该事件将要行使设置落成后触发。我们日常在此间运用Cache API缓存一些不可缺少的文件。

先是,大家需求提供如下配置

  1. 缓存名称(CACHE)以至版本(version)。应用能够有多个缓存存款和储蓄,不过在运用时只会选用在那之中三个缓存存款和储蓄。每当缓存存款和储蓄有转移时,新的本子号将会钦命到缓存存储中。新的缓存存款和储蓄将会作为当前的缓存存储,以前的缓存存款和储蓄将会被作废。
  2. 一个离线的页面地址(offlineUCRUISERL):当客户访谈了此前未曾访问过的地点时,该页面将博览会示。
  3. 七个含有了具有必需文件的数组,包含保持页面平常机能的CSS和JavaScript。在本示例中,笔者还增添了主页和logo。当有两样的UQashqaiL指向同贰个能源时,你也得以将这么些UQashqaiL分别写到这么些数组中。offlineULANDL将会参预到这一个数组中。
  4. 大家也足以将某个非须求的缓存文件(installFilesDesirable)。那一个文件在装置进度准将会被下载,但万一下载败北,不会接触安装退步。

// 配置文件 const version = '1.0.0', CACHE = version '::PWAsite', offlineUENVISIONL = '/offline/', installFilesEssential = [ '/', '/manifest.json', '/css/styles.css', '/js/main.js', '/js/offlinepage.js', '/images/logo/logo152.png' ].concat(offlineURL), installFilesDesirable = [ '/favicon.ico', '/images/logo/logo016.png', '/images/hero/power-pv.jpg', '/images/hero/power-lo.jpg', '/images/hero/power-hi.jpg' ];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 配置文件
const
  version = '1.0.0',
  CACHE = version '::PWAsite',
  offlineURL = '/offline/',
  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg'
  ];

installStaticFiles() 方法应用基于Promise的点子选取Cache API将文件存款和储蓄到缓存中。

// 安装静态能源 function installStaticFiles() { return caches.open(CACHE) .then(cache => { // 缓存可选文件 cache.addAll(installFilesDesirable); // 缓存必需文件 return cache.addAll(installFilesEssential); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 安装静态资源
function installStaticFiles() {
  return caches.open(CACHE)
    .then(cache => {
      // 缓存可选文件
      cache.addAll(installFilesDesirable);
      // 缓存必须文件
      return cache.addAll(installFilesEssential);
    });
}

聊起底,我们抬高八个install的平地风波监听器。waitUntil措施保险了service worker不会安装直到其有关的代码被实行。这里它会实行installStaticFiles()方法,然后self.skipWaiting()艺术来激活service worker:

// 应用设置 self.add伊夫ntListener('install', event => { console.log('service worker: install'); // 缓存重要文件 event.waitUntil( installStaticFiles() .then(() => self.skipWaiting()) ); });

1
2
3
4
5
6
7
8
9
10
11
12
// 应用安装
self.addEventListener('install', event => {
  console.log('service worker: install');
  // 缓存主要文件
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );
});

至于小编:pangjian

图片 6

庞健,金融IT男。 个人主页 · 作者的稿子 · 5 ·   

图片 7

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:应用要知道的那些事,入门教程

关键词: 2018注册送白菜