我试着在Angular5中引入Service Worker

简略而言

    • 新規のアプリケーションに対してService Workerを導入する手順について説明する

 

    既存のアプリケーションに導入する場合は、公式チュートリアル の「既存のアプリケーションにService Workerを追加する」を参照のこと。

“Service Worker” 是什么?

简单地说,Service Worker(服务工作者)是在网络浏览器中运行的管理应用缓存的脚本。

将传统的Web应用程序升级为类似于智能手机本地应用的用户体验(能够离线使用、推送通知等等)的机制。

Angular被称为”Angular Service Worker”,专注于提供Service Worker并承担强烈的责任感和性能方面的承诺。

Angular 是什么。

现在虽然有点晚,但是Angular是一个用JavaScript编写的开源前端Web应用框架。在开发时可以使用JavaScript,但推荐使用TypeScript。截至2019年10月,最新版本是”Angular6″。

在类似的选择中,像”React.js”、”Vue.js”等等。关于哪个是最好的这个问题经常被讨论,但实际上这是一个个人偏好的问题,且因为它们各自的目的不同,所以不能一概而论。

「React.js」由Facebook开发,「Angular」由Google开发,这让人有一种来自大型公司的安心感。「Vue.js」则是由个人开发的F/W,但却越来越受欢迎。

前提条件 tí

Node.js がインストールされていること
angular-cli がインストールされていること
angular-cli のバージョンが、Angular5が作成可能なバージョン(1.7.x)になっていること(Angular5から Service Worker のサポートが有効になったため)

angular-cli のバージョン確認は以下でできる。

ng -v
    簡易サーバ起動用にnpmのhttp-serverを入れておく(任意)
npm i -g http-server

项目创建

    任意のディレクトリを作成して、その中に移動し、新規アプリプロジェクトを生成
ng new 任意のプロジェクト名 --service-worker --routing=true

完成安装模块(npm install)需要大约3至4分钟的时间。

    • オプション

–service-worker:Service Workerを使うために必要なファイルをアプリケーションに設定

–routing:ルーティングモジュール付きで生成する場合: true(falseの場合は省略可)

确认行动

    作成したディレクトリに移動し、ビルドする
cd 作成したプロジェクト名
ng build
    Webファイルが入っているディレクトリに移動し、簡易Webサーバ起動
cd dist
http-server -p 8080

由于 ng serve 不与 Service Worker 进行协作,因此为了进行启动测试,需要使用另外一个 HTTP 服务器,本次使用 npm 的 http-server。

    Webプラウザをプライベートモードもしくはシークレットモード等で起動し、http://localhost:8080 でAngularテストページが表示されたら成功。Ctrl + C でサーバ終了。

当您测试Angular Service Worker时,建议在浏览器中使用隐私窗口或私密窗口,因为如果之前的状态仍然存在,则可能会导致Service Worker在读取时出现意外行为并终止。

有什么被缓存了吗?

请注意,所有Web浏览器渲染应用程序所需的文件已被缓存。
src/ngsw-config.json的设置可让客户端将特定资源缓存下来。

    • index.html

 

    • favicon.ico

 

    • ビルド成果物(JSおよびCSSバンドル)

assets の下にあるもの

暂且就这样吧。(可能会再添加一些内容)

广告
将在 10 秒后关闭
bannerAds