使用Angular6创建的PWA示例项目为”Ng6PwaSample”

2 年 ago
清, 扬
2 minutes

Ng6PwaSample是一个为那些希望在Angular6中实现PWA（渐进式Web应用）的开发者提供的示例项目。

完整的源代码，请参见以下链接：https://github.com/Ohtsu/ng6-pwa-sample

视频说明（日语），

视频解说（英语），

梗概

    • Ng6PwaSample はAngular6のng add @angular/pwaコマンドによって作成されたPWAのサンプルプロジェクトです。

 

    • Ng6PwaSample はAngular Materialのmat-grid, mat-card, mat-menu, mat-iconなどを使用しています。

 

    Ng6PwaSample はd3.js(ver4.3) 及びng6-o2-chartを利用しています。

前提

    • node.js

 

    • Typescript2

 

    • Angular6

 

    http-server

安装

要安装该项目，请执行以下操作。

$ npm install

项目建设

必须使用生产模式来构建项目。

$ ng build --prod

启动本地服务器

一旦生成dist目录后，进入其中的Ng6PwaSample目录。
如果您还没有安装http-server，请事先按照以下步骤安装。

$ npm install http-server -g

下面是启动 http-server 的步骤。

$ http-server --port 8080

然后在浏览器中访问 http://localhost:8080。
会显示如下内容。

First Page

undefined

只需一种选项，用中文进行释义：

离线模式的检查。

在Chrome中，按下control + shift + i键，打开开发者工具。
然后在应用程序选项卡页面中打开服务工作者。
在这里，勾选离线选项，将其设置为无法连接到互联网的离线状态。

在普通的网络应用程序情况下，当处于离线状态时，会显示以下类似的错误消息。

undefined

然而，如果利用PWA功能，即使离线也不会显示以下的错误消息。这是因为Service Worker会检测到离线状态，并切换到缓存来显示。

undefined

版本

    • Ng6PwaSample : 0.0

 

    • Angular6 : 6.0.3

 

    • TypeScript : 2.7.2

 

    • @angular/material : 6.2.1

 

    • @angular/pwa : 0.6.8

 

    • @angular/service-worker : 6.0.3

 

    • d3.js : 4.3.0

 

    ng6-o2-chart : 0.4.0

请引用相关的文献。

    • “PWAで何ができるようになるのか”,

 

    • https://speakerd.s3.amazonaws.com/presentations/c9b547f51eed4304ad1c6aa5f9024c1d/PWA%E3%81%A6%E3%82%99%E4%BD%95%E3%81%8B%E3%82%99%E3%81%A6%E3%82%99%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%AE%E3%81%8B.pdf

 

    • “PWA 入門 〜iOS SafariでPWAを体験するまで〜 2018年6月版”,

 

    • https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20

 

    • “Great Progressive Web App Experiences with Angular”,

 

    • https://www.youtube.com/watch?v=C8KcW1Nj3Mw&feature=share

 

    • “Angular Service Worker Tutorial”,

 

    • https://www.youtube.com/watch?v=5YtNQJQu31Y&feature=share

 

    • “Build your First Angular PWA from Scratch (Angular 6 PWA Tutorial)”,

 

    • https://www.youtube.com/watch?v=othhfZ0mGjU&feature=share

 

    • “Schematics”,

 

    • https://material.angular.io/guide/schematics

 

    • “Angular 5, Angular 6 Custom Library: Step-by-step guide”,

 

    • https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/

 

    • “Angular 5, Angular 6用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド”,

 

    https://www.udemy.com/angular5-l/

更新记录

    2018.8.2 version 0.0 uploaded

版权

版权所有2018年 大津秀一（DigiPub日本）

执照

麻省理工学院 © 大津周一

bannerAds