Initial updates

This commit is contained in:
Tony Air 2020-04-02 02:42:13 +07:00
parent e7c0f9b416
commit 10e7cb5977
8 changed files with 38 additions and 170 deletions

View File

@ -1,20 +1,28 @@
# SilverStripe Progressive Web App # SilverStripe Progressive Web App
Tools to add progressive web app functionality to your silverstripe website Tools to add progressive web app functionality to your silverstripe website
And make it available offline
## Installation ## Installation
``` ```
composer require michelsteege/silverstripe-progressivewebapp composer require a2nt/silverstripe-progressivewebapp
``` ```
## Usage ## Usage
- Install the module, run dev/build and fill in the settings in the siteconfig - Install the module, run dev/build and fill in the settings in the siteconfig
- Include the required js to register the service worker - Add js to register the service worker
``` ```
Requirements::javascript('michelsteege/silverstripe-progressivewebapp:resources/js/progressivewebapp.js'); if ('serviceWorker' in navigator) {
var baseHref = (document.getElementsByTagName('base')[0] || {}).href;
if(baseHref){
navigator.serviceWorker.register(baseHref + 'service-worker.js').then(function() {
console.log('Service Worker Registered');
});
}
}
``` ```
- Add the following tags to the head of your website - Add the following tags to the head of your website
``` ```
<meta name="theme-color" content="$SiteConfig.ManifestColor"> <meta name="theme-color" content="#000000" />
<link rel="manifest" href="{$BaseHref}manifest.json"> <link rel="manifest" href="{$BaseHref}manifest.json" />
``` ```

View File

@ -4,9 +4,5 @@ Name: progressivewebapp
SilverStripe\Control\Director: SilverStripe\Control\Director:
rules: rules:
'manifest.json': 'MichelSteege\ProgressiveWebApp\Controllers\ManifestController' 'manifest.json': 'A2nt\ProgressiveWebApp\Controllers\ManifestController'
'service-worker.js': 'MichelSteege\ProgressiveWebApp\Controllers\ServiceWorkerController' 'service-worker.js': 'A2nt\ProgressiveWebApp\Controllers\ServiceWorkerController'
SilverStripe\SiteConfig\SiteConfig:
extensions:
- MichelSteege\ProgressiveWebApp\Extensions\ProgressiveWebAppSiteConfigExtension

View File

@ -1,5 +1,5 @@
{ {
"name": "a2nt/silverstripe-progressivewebapp", "name": "michelsteege/silverstripe-progressivewebapp",
"description": "Tools to add progressive web app functionality to your silverstripe website", "description": "Tools to add progressive web app functionality to your silverstripe website",
"type": "silverstripe-vendormodule", "type": "silverstripe-vendormodule",
"keywords": [ "keywords": [
@ -15,17 +15,26 @@
"minimum-stability": "dev", "minimum-stability": "dev",
"prefer-stable": true, "prefer-stable": true,
"require": { "require": {
"silverstripe/cms": "^4.*" "silverstripe/cms": "^4.0@dev",
"silverstripe/vendor-plugin": "^1.0",
"silverware/colorpicker": "^1.0"
},
"require-dev": {
"phpunit/phpunit": "^5.7",
"squizlabs/php_codesniffer": "^3.0"
}, },
"extra": { "extra": {
"installer-name": "silverstripe-progressivewebapp", "installer-name": "silverstripe-progressivewebapp",
"branch-alias": { "branch-alias": {
"dev-master": "2.x-dev" "dev-master": "2.x-dev"
} },
"expose": [
"resources"
]
}, },
"autoload": { "autoload": {
"psr-4": { "psr-4": {
"A2nt\\ProgressiveWebApp\\": "src/" "Pixelspin\\ProgressiveWebApp\\": "src/"
} }
} }
} }

View File

@ -1,8 +0,0 @@
if ('serviceWorker' in navigator) {
var baseHref = (document.getElementsByTagName('base')[0] || {}).href;
if(baseHref){
navigator.serviceWorker.register(baseHref + 'service-worker.js').then(function() {
//console.log('Service Worker Registered');
});
}
}

View File

@ -1,6 +1,6 @@
<?php <?php
namespace MichelSteege\ProgressiveWebApp\Controllers; namespace A2nt\ProgressiveWebApp\Controllers;
use SilverStripe\Control\Controller; use SilverStripe\Control\Controller;
use SilverStripe\SiteConfig\SiteConfig; use SilverStripe\SiteConfig\SiteConfig;
@ -22,79 +22,10 @@ class ManifestController extends Controller {
public function index($url) { public function index($url) {
$config = SiteConfig::current_site_config(); $config = SiteConfig::current_site_config();
$manifestContent = []; $manifestContent = [];
$manifestContent['start_url'] = '/';
if($config->ManifestName){
$manifestContent['name'] = $config->ManifestName;
}
if($config->ManifestShortName){
$manifestContent['short_name'] = $config->ManifestShortName;
}
if($config->ManifestDescription){
$manifestContent['description'] = $config->ManifestDescription;
}
if($config->ManifestColor){
$manifestContent['background_color'] = $config->ManifestColor;
$manifestContent['theme_color'] = $config->ManifestColor;
}
if($config->ManifestOrientation){
$manifestContent['orientation'] = $config->ManifestOrientation;
}
if($config->ManifestDisplay){
$manifestContent['display'] = $config->ManifestDisplay;
}
$logo = $config->ManifestLogo();
if($logo && $logo->exists()){
$mime = $logo->getMimeType();
$manifestContent['icons'] = [
[
'src' => $logo->Fill(48,48)->Link(),
'sizes' => '48x48',
'type' => $mime
],
[
'src' => $logo->Fill(72,72)->Link(),
'sizes' => '72x72',
'type' => $mime
],
[
'src' => $logo->Fill(96,96)->Link(),
'sizes' => '96x96',
'type' => $mime
],
[
'src' => $logo->Fill(144,144)->Link(),
'sizes' => '144x144',
'type' => $mime
],
[
'src' => $logo->Fill(168,168)->Link(),
'sizes' => '168x168',
'type' => $mime
],
[
'src' => $logo->Fill(192,192)->Link(),
'sizes' => '192x192',
'type' => $mime
],
[
'src' => $logo->Fill(256,256)->Link(),
'sizes' => '256x256',
'type' => $mime
],
[
'src' => $logo->Fill(512,512)->Link(),
'sizes' => '512x512',
'type' => $mime
]
];
}
$this->getResponse()->addHeader('Content-Type', 'application/manifest+json; charset="utf-8"'); $this->getResponse()->addHeader('Content-Type', 'application/manifest+json; charset="utf-8"');
return json_encode($manifestContent); return json_encode($manifestContent);
} }
} }

View File

@ -1,6 +1,6 @@
<?php <?php
namespace MichelSteege\ProgressiveWebApp\Controllers; namespace A2nt\ProgressiveWebApp\Controllers;
use SilverStripe\Control\Controller; use SilverStripe\Control\Controller;
use SilverStripe\Control\Director; use SilverStripe\Control\Director;
@ -17,7 +17,7 @@ class ServiceWorkerController extends Controller {
private static $allowed_actions = [ private static $allowed_actions = [
'index' 'index'
]; ];
/** /**
* @config * @config
*/ */
@ -32,7 +32,7 @@ class ServiceWorkerController extends Controller {
$this->getResponse()->addHeader('Content-Type', 'application/javascript; charset="utf-8"'); $this->getResponse()->addHeader('Content-Type', 'application/javascript; charset="utf-8"');
return $this->renderWith('ServiceWorker'); return $this->renderWith('ServiceWorker');
} }
/** /**
* Base URL * Base URL
* @return varchar * @return varchar
@ -40,7 +40,7 @@ class ServiceWorkerController extends Controller {
public function BaseUrl() { public function BaseUrl() {
return Director::baseURL(); return Director::baseURL();
} }
/** /**
* Debug mode * Debug mode
* @return bool * @return bool
@ -51,7 +51,7 @@ class ServiceWorkerController extends Controller {
} }
return $this->config()->get('debug_mode'); return $this->config()->get('debug_mode');
} }
/** /**
* A list with file to cache in the install event * A list with file to cache in the install event
* @return ArrayList * @return ArrayList

View File

@ -1,68 +0,0 @@
<?php
namespace MichelSteege\ProgressiveWebApp\Extensions;
use SilverStripe\ORM\DataExtension;
use SilverWare\Colorpicker\ORM\FieldType\DBColor;
use SilverStripe\Assets\Image;
use SilverStripe\Forms\FieldList;
use SilverStripe\AssetAdmin\Forms\UploadField;
use SilverStripe\Forms\TextField;
use SilverStripe\Forms\DropdownField;
use SilverWare\Colorpicker\Forms\ColorField;
class ProgressiveWebAppSiteConfigExtension extends DataExtension {
private static $db = [
'ManifestName' => 'Varchar',
'ManifestShortName' => 'Varchar',
'ManifestDescription' => 'Varchar(255)',
'ManifestColor' => DBColor::class,
'ManifestOrientation' => 'Varchar',
'ManifestDisplay' => 'Varchar'
];
private static $displays = [
'fullscreen',
'standalone',
'minimal-ui',
'browser'
];
private static $orientations = [
'any',
'natural',
'landscape',
'landscape-primary',
'landscape-secondary',
'portrait',
'portrait-primary',
'portrait-secondary'
];
private static $has_one = [
'ManifestLogo' => Image::class
];
public function onAfterWrite() {
parent::onAfterWrite();
$manifestLogo = $this->owner->ManifestLogo();
if ($manifestLogo && $manifestLogo->exists()) {
$manifestLogo->doPublish();
}
}
public function updateCMSFields(FieldList $fields) {
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestName', 'Name')->setDescription('Application name'));
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestShortName', 'Short name')->setDescription('Short human-readable name for the application try to keep it at a maximum of 12 characters'));
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestDescription', 'Description')->setDescription('Short description about the app'));
$fields->addFieldToTab('Root.ProgressiveWebApp', ColorField::create('ManifestColor', 'Color')->setDescription('Color used for the splash screen and/or icon'));
$fields->addFieldToTab('Root.ProgressiveWebApp', DropdownField::create('ManifestOrientation', 'Orientation', array_combine(self::$orientations, self::$orientations))->setDescription('App orientation'));
$fields->addFieldToTab('Root.ProgressiveWebApp', DropdownField::create('ManifestDisplay', 'Display', array_combine(self::$displays, self::$displays))->setDescription('Display mode of the app'));
$fields->addFieldToTab('Root.ProgressiveWebApp', UploadField::create('ManifestLogo', 'Logo')->setDescription('This image must be square and at least 512x512px'));
}
}

View File

@ -1,9 +1,9 @@
<?php <?php
namespace MichelSteege\ProgressiveWebApp\Interfaces; namespace A2nt\ProgressiveWebApp\Interfaces;
interface ServiceWorkerCacheProvider { interface ServiceWorkerCacheProvider {
public static function getServiceWorkerCachedPaths(); public static function getServiceWorkerCachedPaths();
} }