尝试将 Cordova Angular6 应用转化为 PWA

2 年 ago
宇, 华
3 minutes

这是关于将我用Angular6 + OnsenUI开发的简单Cordova Android应用程序尝试转换为PWA的笔记。原本并没有使用REST或其他Web事务，所以应该很容易运行。我使用了一些Cordova插件，但通过以下代码进行了分割，以便在不使用插件的情况下也能正常运行。

declare var cordova: any;
   ...
   if (cordova) {
       ....
  }

在Chrome上安装Lighthouse

请点击此链接 “https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=j” 并点击”添加至Chrome”按钮。

image.png

确认现有项目的名称

请打开angular.json文件并确认项目名称。

...
  },
  "defaultProject": "mycordova"
}

安装@angular/pwa。

在应用程序的根目录中使用”ng –version”命令来确认其他模块的版本。

Angular CLI: 6.0.8
Node: 8.12.0
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@angular/platform-server          6.1.10
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.3.2
typescript                        2.7.2
webpack                           4.8.3

选择与@angular-devkit/architect相同版本号的0.6.8。
虽然不确定这个选择是否正确，但至少在最新的@angular/pwa中没有指定版本无法运行。请指定先前确认的项目名称。

ng add @angular/pwa@0.6.8 --project mycordova

Installed packages for tooling via npm.
CREATE ngsw-config.json (392 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
CREATE src/manifest.json (1073 bytes)
UPDATE angular.json (4732 bytes)
UPDATE package.json (2999 bytes)
UPDATE src/app/app.module.ts (4356 bytes)
UPDATE src/index.html (1065 bytes)

他为我准备了各种文件。

请确认app.module.ts文件中的内容。

查看src/app/app.module.ts文件的内容。

因为代码被放在了错误的地方而被破坏，所以将其移到了正确的位置。

    import { ServiceWorkerModule } from '@angular/service-worker';
    import { environment } from '../environments/environment';

请在下面继续添加。

@NgModule({
  ...
  imports: [
    ...
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled:  environment.production })
  ],

请检查src/index.html文件。

这里增加了以下内容，但没有任何问题。
src/index.html
…

…

设置缓存

修改缓存设置以存储OnsenUI和Cordova应用程序正在使用的资源。

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/*.eot",
        "/*.svg",
        "/*.ttf",
        "/*.woff",
        "/*.woff2",
        "/images/**"
      ]
    }
  }, {

在灯塔上确认状态

在这里使用命令”ng build –prod”来进行构建，然后在Apache服务器上用Chrome进行预览。随后，使用Lighthouse进行生成报告。需要注意的是，使用”ng build –watch”命令无法准备PWA相关的文件。

image.png

逐一解决这些问题。

将不把HTTP流量重定向到HTTPS进行修复。

在apache的httpd.conf文件的末尾添加以下mod_rewrite的重定向设置，将HTTP重定向到HTTPS。

# HTTPをHTTPSにリダイレクトする設定。
<ifModule mod_rewrite.c>
      RewriteEngine On
      LogLevel alert rewrite:trace3
      RewriteCond %{HTTPS} off
      RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</ifModule>

当JavaScript不可用时，未提供备选内容的修复。

<body>
  <noscript>
    Please enable JavaScript to run this application.
  </noscript>

添加noscript。

不提供有效的apple-touch-icon的修复。

  <link rel="apple-touch-icon" href="assets/icons/icon-192x192.png" />

添加到图标的链接。

在移动网络上页面加载速度不够快的修复方案。

image.png

即使被说慢了…这个应用程序并没有太多的改进空间…

我要求启用Lighthouse的性能并进行调查。

image.png
image.png

据说主要原因是启用了文本压缩，可以尝试在Apache中启用文本压缩。

LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so

启用上述模块。

我們將參考Apache的mod_deflate模塊來壓縮數據以減少傳輸量。

<IfModule mod_deflate.c>
     SetOutputFilter DEFLATE
     BrowserMatch ^Mozilla/4\.0[678] no-gzip
     BrowserMatch ^Mozilla/4 gzip-only-text/html

     BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
     SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
     SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

     AddOutputFilterByType DEFLATE text/plain
     AddOutputFilterByType DEFLATE text/html
     AddOutputFilterByType DEFLATE text/xml
     AddOutputFilterByType DEFLATE text/css
     AddOutputFilterByType DEFLATE application/xhtml+xml
     AddOutputFilterByType DEFLATE application/xml
     AddOutputFilterByType DEFLATE application/rss+xml
     AddOutputFilterByType DEFLATE application/atom_xml
     AddOutputFilterByType DEFLATE application/javascript
     AddOutputFilterByType DEFLATE application/x-javascript
     AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>
image.png

我已经设法通过考试了。
顺便提一下，再次使用Cordova构建时，包括ServiceWorker在内的这种状态似乎可以正常运行。

请参考以下网页

使用Angular 6构建PWA
利用Apache将HTTP访问自动重定向到HTTPS
使用Apache的mod_deflate来压缩数据以减少传输量
使用Apache的方法

✖
广告
将在 10 秒后关闭
bannerAds